CRUD – AngularJS ile MVC 6
Selamlar;
Bugün Mvc’de AngularJs javascript framework’ünü kullanarak CRUD işlemler nasıl yapılır sorusuna hep beraber cevap arayacağız. Öncelikle en basit hali ile aşağıda görüldüğü gibi Site adında bir tablo oluşturulur. Sadece iki kolonu vardır. Amaç en basit şekilde ilgili işlemleri yapmak ve konuyu fazla uzatmadan anlaşılırlığı arttırmaktır.
Database işlemlerini aşağıda görüldüğü gibi Class Library olan Data adında başka bir projede yaratılmıştır. DB katmanında Code First kullanılmıştır.
Add NewItem’dan Entity Data Model ve sonra da Code First from database seçilir.
İlgili Sites tablosunun poco nesnesi aşağıdaki gibidir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
namespace Crud.Data { using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Schema; using System.Data.Entity.Spatial; public partial class Sites { public int ID { get; set; } [StringLength(50)] public string Name { get; set; } } } |
Şimdi sıra geldi Mvc projesini yaratmaya. Aşağıda görüldüğü gibi Dashboard Controller ve Site action yaratılır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Crud.Data; namespace Crud.Controllers { public class DashboardController : Controller { public ActionResult Site() { return View(); } } } |
Site.cshtml: Sitelerin listelenmesi, aranması, yeni bir sitenin eklenmesi, düzenlenmesi ve silinmesi işlerini single page olarak yapacağız. Öncelikle AngularJS nugetten aşağıda görüldüğü gibi indirilir.
Şimdi sıra geldi AngularJs için ilgili Controller ve app’in oluşturulmasına: Sayfa yüklenme sırasında ilgili sitelerin çekilmesi ve angularJS’de $scope.Sites’a atılması aşağıda görüldüğü gibi yapılmaktadır.
1 2 3 4 5 6 7 8 9 10 11 |
(function (angular) { var app = angular.module("app", []); app.controller("Controller", ["$scope", "$http", function Controller($scope, $http) { $http.get("/Dashboard/GetSites").success(function (data) { console.log("GetSites data=" + JSON.stringify(data)); $scope.Sites = data; }).error(function (ex) { console.log(ex); }); })(angular); |
Dashboard/GetSites(): İlgili data Json formatında Coder First kullanılarak aşağıdaki gibi döndürülmektedir.
1 2 3 4 5 6 7 8 9 |
public JsonResult GetSites() { using (DataContext dbContext = new DataContext()) { var _listSites = dbContext.Sites.ToList(); return Json(_listSites, JsonRequestBehavior.AllowGet); } } |
Site.cshtml: Aşağıda “app” ve “controller”‘ın çalışacağı alan belirlendikten sonra doldurulan “$scope.Sites” “data-ng-repeat” ile gezilerek ilgili tablo içine basılmıştır. Tepede arama yapılması için “txtSearch” id’li bir input konulmuş ve “data-ng-model”‘i Sitelerin “Name” özelliğine bağlanmıştır. Kısacası yazılan text “Name” alanı içerisinde aranacaktır. Hemen altına silme buttonu konmuş ve “ng-click” eventine “DelSites()” angularJS function’ı atanmıştır. Tablonun hemen altına “edit-element” şeklinde bir Directive konmuştur. Ne işe yaradığını sonradan inceleyeceğiz. Hemen altınada “ng-click” event’ine “selectAll()” function’ı atanan bir checkbox konmuştur. Amaç tüm elemanları seçebilmektir. “ng-model”‘e Site modelinden bağımsız olan dinamik olarak oluşturulmuş “isSelectedAll” property’si bağlanmıştır. “data-ng-repeat” ile gezilirken “| filter:Name” filitresi kullanılmış böylece “Ara” kutucuğunda yazılan text’e göre istenen Site’nin bulunması sağlanmıştır. Herbir kayıdın başına checkbox koyulmuş, “ng-model”‘ine “site.IsDeleted” dinamik propertisi atanmış ve böylece silinecek kayıtlar belirlenmiştir. Tablo içine site ile ilgili alanlar “{{site.ID}} ve {{site.Name}}” ile yazılmıştır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@{ ViewBag.Title = "Site"; } <script src="~/Scripts/angular.min.js"></script> <script src="~/Scripts/jquery-2.1.4.min.js"></script> <script src="~/Scripts/DashBoard_Site.js"></script> <h2>Site</h2> <body data-ng-app="app"> <div data-ng-controller="Controller"> <h4> <b>Ara:</b><input type="text" data-ng-model="Name" id="txtSearch" />  <b><input type="button" value="Kayıtları Sil" ng-click="DelSites()" /></b> </h4> <table border="1"> <edit-element></edit-element> <tr><td><b><input type="checkbox" ng-click="selectAll()" ng-model="isSelectAll" />Sil</b></td><td style="padding:10px" align="center"><b>ID</b></td><td style="padding:10px;" align="left"><b>İsim</b></td></tr> <tr data-ng-repeat="site in Sites | filter:Name"> <td align="center"><input type="checkbox" ng-model="site.IsDeleted" /></td> <td style="padding:10px">{{site.ID}}</td> <td style="padding:10px">{{site.Name}}</td> </tr> </table> </div> </body> |
Öncelikle Sil checkbox’ı seçilince, tüm elemanların nasıl seçildiğini inceleyelim: Yukarıda görüldüğü gibi “isSelectAll” property’si checkbox’a “ng-model” ile bağlanmıştır. Aşağıda bu property’nin true veya false olmasına göre “$scope.Sites” tek tek gezilip “site.IsDeleted” property’sine Sil checkbox’ında seçilen değer atanır.
1 2 3 4 5 6 7 8 9 10 11 12 |
$scope.selectAll = function () { if ($scope.isSelectAll) { angular.forEach($scope.Sites, function (site) { site.IsDeleted = true; }); } else { angular.forEach($scope.Sites, function (site) { site.IsDeleted = false; }); } } |
Şimdi sıra geldi seçili elemanların silinmesine: “Kayıtları Sil” button’una basılınca silinecek site’ların ID’leri “IsDeleted” özelliğine bakılarak “deletedSites” listesine eklenir. Daha sonra “DelSites()” action’ına post edilerek silinmesi sağlanır. Daha sonra silinmemiş kayıt listesi “list” gezilerek “$Scope.Sites”‘a tek tek atılır. Böylece tablo içinden silinmiş kayıtlar çıkarılmış olunur.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$scope.DelSites = function () { var deletedSites = []; var list = []; angular.forEach($scope.Sites, function (site) { if (site.IsDeleted) { if (site.ID != null) { deletedSites.push(site.ID); } } else { list.push(site); } }); if (deletedSites.length > 0) { $http.post("/Dashboard/DelSites", deletedSites).success(function () { console.log("Kayıtlar Başarı ile silindi!") }).error(function (ex) { console.log(ex); }); } $scope.Sites = []; angular.forEach(list, function (item) { $scope.Sites.push(item); }); } |
Dashboard/DelSites: Silinecek Sitelara ait “ID”‘ler “Where” koşulunda kullanılarak ilgili kayıtlar linq ile silinir.
1 2 3 4 5 6 7 8 |
public void DelSites(int[] deletedSites) { using (DataContext dbContext = new DataContext()) { dbContext.Sites.RemoveRange(dbContext.Sites.Where(si => deletedSites.Contains(si.ID))); dbContext.SaveChanges(); } } |
Yeni Kayıt Ekleme: Hatırlarsanız Site.cshtml’de “<edit-element>” şeklinde bir directive vardı. Bilmiyenler için directive angularJS’de bir çeşit user control’dur. Aşağıda “E” yani element tipinde bir directive kullanılmıştır. Yani tek başına bir başka html element’e attach olmadan kullanılan nesnelerdir. “TemplateUrl” yani nesneyi oluşturan html başka bir dosyadan alınmıştır. Bu sayfa “/Dashboard/NewRecord” sayfasıdır.
1 2 3 4 5 6 7 8 |
app.directive("editElement", function () { return { restrict: "E", transclude: true, url: '/Dashboard', templateUrl: "/Dashboard/NewRecord" }; }); |
DashBoard/NewRecord: Dikkat ederseniz “Yeni Kayıt Ekle” buttonun’un “data-ng-click” eventine “Show()” methodu eklenmiştir. Ayrıca hemen altında yeni kayıt işlemi yapılacak “İsim”, “Ekle” ve “Kaydet” buttonları “Span” içine konmuştur. İlgili Span’ın “data-ng-show” özeliği, yani görünmesi “isShow” dynamic property’sine bağlıdır. Tahmin edebileceğiniz gibi “Show()” methodunda ilgili değişken sıra ile “True” yada “False” değerlerini alarak “Span” içindeki ilgili nesnelerin gösterilip gizlenmesini sağlanmıştır. “Ekle” button’unun “data-ng-click” eventinde “AddData()” function’ı “Kaydet” button’unun “data-ng-click” eventinde “SavaData()” function’ı çağrılmaktadır. Son olarak “txtSite” input alanı “data-ng-model” attribute ile yine dinamic olarak oluşan “NewSite” property’sine bağlanmaktadır.
1 2 3 4 5 6 7 8 9 10 11 |
@{ Layout = ""; } <tr> <td><b><input type='button' value='Yeni Kayıt Ekle ' data-ng-click='Show()' id='btnAdd' /></b></td> <span data-ng-show='isShow'> <td><b> İsim: <input type='text' id='txtSite' ng-model='NewSite'></b></td><td> <b><input type='button' value=' Ekle ' data-ng-click='AddData()' /></b> </td><td>  <b><input type='button' value=' Kaydet' data-ng-click='SaveData()' /></b></td> </span> </tr> |
Show(), AddData() ve SaveData() Functionları: “Show()” function’ı yukarıda anlatılandan farklı olarak ilgili button’un text’i görünme durumunda “İptal” ve gizlenme durumda “Yeni Kayıt Ekle” şeklinde değiştirilmektedir.
“AddData()” function’ında “$scope.Sites”‘a ismi yazılan yeni site “NewSite” property’si ile eklenmiştir. Buna bağlı olan diğer nesneler(table nesnesi) ilgili değişiklikten angularJS sayesinde etkilenip yeni kayıdı liste sonunda “ID” siz olarak gösterilmektedir. ID’nin olmamasının nedeni yeni eklenen site’ın daha database’e eklenmemiş olmasından kaynaklanmaktadır. Burada amaç database katmanına geçmeden client side taraflı istenen sayıda kaydın eklenmesi ve “Kaydet” işleminden sonra toplu olarak database kaydedilmesidir. Böylece performans olarak büyük bir kazanç sağlanacaktır.
“SaveData()” function’ında “data[]” dizisine “$scope.Sites” altında “ID”‘si null olan kayıtlar push edilerek yeni eklenecek kayıtlar bir dizi altına toplanmış olunur. Daha sonra ilgili kayıtlar “SaveSites()” action’ına parametre olarak gönderilerek database’e kaydedilir. İşlemin başarılı olması durumunda geri dönen tüm kayıtlar “$scope.Sites”‘a atanır. Buna bağlı tablo bundan etkilenerek başta “ID”‘si null olan kayıtlar artık database’e eklendiği için “ID” değerleri ile birlikte gözükür.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
$scope.isShow = false; $scope.Show = function () { if ($scope.isShow) { $scope.isShow = false; $("#btnAdd").val("Yeni Kayıt Ekle ") } else { $scope.isShow = true; $("#btnAdd").val("İptal "); } $scope.$apply(); $("#txtSite").focus(); } $scope.AddData = function () { $scope.Sites.push({ Name: $scope.NewSite }); $scope.NewSite = ""; $("#txtSite").focus(); } $scope.SaveData = function () { var data = []; angular.forEach($scope.Sites, function (site) { if (site.ID == null) { data.push(site); } }); console.log("New Sites data=" + JSON.stringify(data)); $http.post("/Dashboard/SaveSites", data).success(function (siteList) { $scope.Sites = siteList; }).error(function (ex) { console.log(ex); }); } |
SaveSites Action: Aşağıda görüldüğü gibi List<> şeklinde gelen sites değerleri “AddRange()” methodu ile tek seferde toplu olarak kaydedilmiştir. Daha sonra GetSites() methodu tekrardan çağrılarak yeni eklenen kayıtlar da dahil olmak üzere tüm site kaydı geri döndürülmektedir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
public JsonResult SaveSites(List<Crud.Data.Sites> _sites) { try { using (DataContext dbContext = new DataContext()) { dbContext.Sites.AddRange(_sites); dbContext.SaveChanges(); } return GetSites(); } catch (Exception ex) { return Json(ex.Message); } } |
Site Güncelleme: Site.cshtml aşağıdaki gibi güncellenir. Tüm kayıtların sonuna “Düzenle” adında bir button eklenir. “ng-click” eventine “Update()” function’ı düzenlenecek site’ın “Name” ve “ID”‘si ile birlikte çağrılır.
Site.cshtml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@{ ViewBag.Title = "Site"; } <script src="~/Scripts/angular.min.js"></script> <script src="~/Scripts/jquery-2.1.4.min.js"></script> <script src="~/Scripts/DashBoard_Site.js"></script> <h2>Site</h2> <body data-ng-app="app"> <div data-ng-controller="Controller"> <h4> <b>Ara:</b><input type="text" data-ng-model="Name" id="txtSearch" />  <b><input type="button" value="Kayıtları Sil" ng-click="DelSites()" /></b> </h4> <table border="1"> <edit-element></edit-element> <tr><td><b><input type="checkbox" ng-click="selectAll()" ng-model="isSelectAll" />Sil</b></td><td style="padding:10px" align="center"><b>ID</b></td><td style="padding:10px;" align="left"><b>İsim</b></td></tr> <tr data-ng-repeat="site in Sites | filter:Name"> <td align="center"><input type="checkbox" ng-model="site.IsDeleted" /></td> <td style="padding:10px">{{site.ID}}</td> <td style="padding:10px">{{site.Name}}</td> <td align="center"> <input type="button" ng-click="Update(site.ID,site.Name)" value="Düzenle"/> </td> </tr> </table> </div> </body> |
NewRecord.cshtm: Update işlemi için “edit-element” directive’inde bir takım düzenlemeler yaptık. “Ekle” buttonuna “btnAdded” id’sini verdik.
1 2 3 4 5 6 7 8 9 10 11 |
@{ Layout = ""; } <tr> <td><b><input type='button' value='Yeni Kayıt Ekle ' data-ng-click='Show()' id='btnAdd' /></b></td> <span data-ng-show='isShow'> <td><b> İsim: <input type='text' id='txtSite' ng-model='NewSite'></b></td><td> <b><input type='button' value=' Ekle ' data-ng-click='AddData()' id="btnAdded"/></b> </td><td>  <b><input type='button' value='Kaydet' data-ng-click='SaveData()' id="btnSave"/></b></td> </span> </tr> |
Update() Function: Burada aynı yeni kayıt buttonu tıklanmış gibi işlemler yapılır. Tek fark “btnAdded” yani “Ekle” buttonu gizlenir. Güncelleme yapılacak “siteID” “$scope.NewID” parametresine atılır. Son olarak “btnSave” buttonun’un text’i “Güncelle” yapılır.
1 2 3 4 5 6 7 8 9 |
$scope.Update = function (siteID, siteName) { $scope.isShow = true; $("#btnAdd").val("İptal "); $scope.isShow = true; $("#btnAdded").hide(); $("#btnSave").val('Güncelle'); $scope.NewSite = siteName; $scope.NewID = siteID; } |
Update işlemi için bir değişiklik de “SaveData()” function’ı için yapılır: Aşağıda görüldüğü gibi “btnSave” yani kaydet button’unu text’ine bakılarak yeni bir kayıt mı yoksa var olan bir kaydın güncellenmesi mi işlemine karar verilir. Güncelleme işleminde “UpdateSite()” action’ına güncellenecek data, yani yeni “siteName” ve “ID” değerleri parametre olarak gönderilir. Action sonuç olarak tüm “Site” listesini geri döner. İlgili liste “$scope.Sites”‘a atanır. Böylece buna bağlı olan tablo angularjs bind işleminden dolayı bu değişiklikten etkilenerek triger olur. Böylece client’a gösterilen tüm kayıt güncellenir. Daha sonra “btnAdd” button’u “İptal” yazısı yerine “Yeni Kayıt Ekle” haline getirilip, gösterilen site bilgilerinin girildiği span içindeki elemanların “isShow” parametresine false değeri atanarak gizlenmesi sağlanır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$scope.SaveData = function () { if ($("#btnSave").val()=="Kaydet") { var data = []; angular.forEach($scope.Sites, function (site) { if (site.ID == null) { data.push(site); } }); console.log("New Sites data=" + JSON.stringify(data)); $http.post("/Dashboard/SaveSites", data).success(function (siteList) { $scope.Sites = siteList; }).error(function (ex) { console.log(ex); }); } else { var data = { Name: $scope.NewSite, ID: $scope.NewID }; $http.post("/Dashboard/UpdateSite", data).success(function (siteList) { $scope.Sites = siteList; $scope.isShow = false; $("#btnAdd").val("Yeni Kayıt Ekle ") }).error(function (ex) { console.log(ex); }); } } |
Şimdi sıra geldi UpdateSite() Action’ına: Aşağıda görüldüğü gibi güncellenecek Site datası “ID” değeri ile bulunup yeni “Name” değeri atanıp kaydedilmiştir. İşlemin hatasız bir şekilde yapılması durumunda makalenin en başında anlatığımız “GetSites()” methodu çağrılıp tüm “Site” datasının JsonResult olarak döndürülmesi sağlanmıştır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
public JsonResult UpdateSite(Crud.Data.Sites _site) { try { using (DataContext dbContext = new DataContext()) { var site = dbContext.Sites.Where(si => si.ID == _site.ID).FirstOrDefault(); site.Name = _site.Name; dbContext.SaveChanges(); } return GetSites(); } catch (Exception ex) { return Json(ex.Message); } } |
Matematikçiler için 4 işlem ne ise, biz developerlar için de CRUD o dur. Bu örnekte Mvc 6.0 ile AngularJS javascript framework’u kullanılarak, arka tarafta Code First ve Entityframework ile database işlemleri yapılarak, nasıl Creat, Update, Edit ve Delete yapabileceğimizi hep beraber gördük. Angularjs’in bize sağladığı bir çok kolaylığı da böylece bir daha irdelemiş olduk.
Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın. Aşağıda kodların tamamı görülmektedir.
DashboardController.cs(Tamamı):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Crud.Data; namespace Crud.Controllers { public class DashboardController : Controller { public ActionResult Index() { return View(); } public ActionResult Site() { return View(); } public JsonResult GetSites() { using (DataContext dbContext = new DataContext()) { var _listSites = dbContext.Sites.ToList(); return Json(_listSites, JsonRequestBehavior.AllowGet); } } public JsonResult SaveSites(List<Crud.Data.Sites> _sites) { try { using (DataContext dbContext = new DataContext()) { dbContext.Sites.AddRange(_sites); dbContext.SaveChanges(); } return GetSites(); } catch (Exception ex) { return Json(ex.Message); } } public void DelSites(int[] deletedSites) { using (DataContext dbContext = new DataContext()) { dbContext.Sites.RemoveRange(dbContext.Sites.Where(si => deletedSites.Contains(si.ID))); dbContext.SaveChanges(); } } public ActionResult NewRecord() { return View(); } public JsonResult UpdateSite(Crud.Data.Sites _site) { try { using (DataContext dbContext = new DataContext()) { var site = dbContext.Sites.Where(si => si.ID == _site.ID).FirstOrDefault(); site.Name = _site.Name; dbContext.SaveChanges(); } return GetSites(); } catch (Exception ex) { return Json(ex.Message); } } } } |
Site.cshtml(Tamamı):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@{ ViewBag.Title = "Site"; } <script src="~/Scripts/angular.min.js"></script> <script src="~/Scripts/jquery-2.1.4.min.js"></script> <script src="~/Scripts/DashBoard_Site.js"></script> <h2>Site</h2> <body data-ng-app="app"> <div data-ng-controller="Controller"> <h4> <b>Ara:</b><input type="text" data-ng-model="Name" id="txtSearch" />  <b><input type="button" value="Kayıtları Sil" ng-click="DelSites()" /></b> </h4> <table border="1"> <edit-element></edit-element> <tr><td><b><input type="checkbox" ng-click="selectAll()" ng-model="isSelectAll" />Sil</b></td><td style="padding:10px" align="center"><b>ID</b></td><td style="padding:10px;" align="left"><b>İsim</b></td></tr> <tr data-ng-repeat="site in Sites | filter:Name"> <td align="center"><input type="checkbox" ng-model="site.IsDeleted" /></td> <td style="padding:10px">{{site.ID}}</td> <td style="padding:10px">{{site.Name}}</td> <td align="center"> <input type="button" ng-click="Update(site.ID,site.Name)" value="Düzenle"/> </td> </tr> </table> </div> </body> |
NewRecord.cshtml(Tamamı):
1 2 3 4 5 6 7 8 9 10 11 |
@{ Layout = ""; } <tr> <td><b><input type='button' value='Yeni Kayıt Ekle ' data-ng-click='Show()' id='btnAdd' /></b></td> <span data-ng-show='isShow'> <td><b> İsim: <input type='text' id='txtSite' ng-model='NewSite'></b></td><td> <b><input type='button' value=' Ekle ' data-ng-click='AddData()' id="btnAdded"/></b> </td><td>  <b><input type='button' value='Kaydet' data-ng-click='SaveData()' id="btnSave"/></b></td> </span> </tr> |
DashBoard_Site.js(Tamamı):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
$(document).ready(function () { $("#txtSearch").focus(); }); (function (angular) { var app = angular.module("app", []); app.controller("Controller", ["$scope", "$http", function Controller($scope, $http) { $scope.isShow = false; $scope.Show = function () { if ($scope.isShow) { $("#btnAdded").show(); $("#btnSave").val('Kaydet'); $scope.NewSite = ""; $scope.isShow = false; $("#btnAdd").val("Yeni Kayıt Ekle ") } else { $scope.isShow = true; $("#btnAdd").val("İptal "); } $scope.$apply(); $("#txtSite").focus(); } $scope.AddData = function () { $scope.Sites.push({ Name: $scope.NewSite }); $scope.NewSite = ""; $("#txtSite").focus(); } $scope.SaveData = function () { if ($("#btnSave").val()=="Kaydet") { var data = []; angular.forEach($scope.Sites, function (site) { if (site.ID == null) { data.push(site); } }); console.log("New Sites data=" + JSON.stringify(data)); $http.post("/Dashboard/SaveSites", data).success(function (siteList) { $scope.Sites = siteList; }).error(function (ex) { console.log(ex); }); } else { var data = { Name: $scope.NewSite, ID: $scope.NewID }; $http.post("/Dashboard/UpdateSite", data).success(function (siteList) { $scope.Sites = siteList; $scope.isShow = false; $("#btnAdd").val("Yeni Kayıt Ekle ") }).error(function (ex) { console.log(ex); }); } } $scope.selectAll = function () { if ($scope.isSelectAll) { angular.forEach($scope.Sites, function (site) { site.IsDeleted = true; }); } else { angular.forEach($scope.Sites, function (site) { site.IsDeleted = false; }); } } $scope.DelSites = function () { var deletedSites = []; var list = []; angular.forEach($scope.Sites, function (site) { if (site.IsDeleted) { if (site.ID != null) { deletedSites.push(site.ID); } } else { list.push(site); } }); if (deletedSites.length > 0) { $http.post("/Dashboard/DelSites", deletedSites).success(function () { console.log("Kayıtlar Başarı ile silindi!") }).error(function (ex) { console.log(ex); }); } $scope.Sites = []; angular.forEach(list, function (item) { $scope.Sites.push(item); }); } $scope.Update = function (siteID, siteName) { $scope.isShow = true; $("#btnAdd").val("İptal "); $scope.isShow = true; $("#btnAdded").hide(); $("#btnSave").val('Güncelle'); $scope.NewSite = siteName; $scope.NewID = siteID; } $http.get("/Dashboard/GetSites").success(function (data) { console.log("GetSites data=" + JSON.stringify(data)); $scope.Sites = data; }).error(function (ex) { console.log(ex); }); }]); app.directive("editElement", function () { return { restrict: "E", transclude: true, url: '/Dashboard', templateUrl: "/Dashboard/NewRecord" }; }); })(angular); |
abi elinize saglik
Ellerinize sağlık webinerinizide bekliyoruz…
Teşekkürler Bülent.
Abi bi web api ve angular ile ilgili bir webiner yaparmısın?
Selam Çağrı;
Alttaki Webinar işine yaramadı mı? Ya da henüz görmedin mi:)
http://www.borakasmer.com/webinar-angular-jse-giris/
Eline sağlık. Türkçe kaynak anlamında çok iyi ve anlaşılır.
Teşekkür ederim Adnan.
proje dosyası nerede acaba?
Selamlar İsmail,
Sanırım bu uygulamanın proje dosyasını koymamış..
angularJS anlamamda bu makalenin çok büyük faydasını gördüm. anlatılanları uygularken tek bir tip data üstünden değilde datetime ve int tiplerinde de alanlar ekleyerek çalışınca çok daha iyi oldu.
çok teşekkürler.
not: uçmakdere virajları ile ilgili makaleniz hala yok sanırım! :)
Selam Harun,
Öncelikle güzel yorumların için teşekkür ederim. İşden dolayı Ağustos ayı olmasına rağmen normalin aksine çok yoğun bir dönemdeyim. Hep aklımda ama yazamadı. Yazınca twitter’dan paylaşıcam güzel birkaç anımı:)
İyi çalışmalar.
Hacam süpersin. Ellerine sağlık
Ben teşekkür ederim Erol. İşine yaradı ise ne mutlu bana :)
Tebrik ederim çok güzel bir makale olmuş :)
Ben teşekküre ederim Gökhan.
İyi çalışmalar.
Elinize sağlık hocam güzel makale.
Angular 2 yi MVC (.NET 4.0) altında kullanamıyor muyuz?
Teşekkürler Rahman,
Kullanırsın da Angular2 ve Mvc’yi birlikte kullanman pek anlamlı değil.
İyi çalışmalar.
tebrik ederim
Teşekkürler.
Merhaba hocam yıl olmuş 2017 benim gibi bir çok arkadaşım ve hocalarım dahil angular js ile signalR js’yi bir birine karıştırmakta ki bende bu gün öğrenince yazma gereğinde bulundum. angular js ile socket programlama yazamıyoruz sanırım. kabaca anlatııym angular js html ve jquery kodlarını daha az yazmamıza olanak sağlamakta. angular js ile de veri tabanına bağlanabilmekteyız fakat jquery ajax gibi çalışma mantığı var sanırım. ram ve cpu yine kasılacaktır. signalR ise veri tabanı işlemlerini socket programlama yöntemi ile yaptığımızdan dolayı cpu ve ram oldukça hafif bir şekilde çalışacaktır.
konu hakkında detaylı bilgi verebilir misiniz :) teşekkürler…
eğer çok yanlış şeylerden bahsediyorsam beni, bu yorumu ve gerekirse borakasmer.com ‘ u silebilirsiniz.
Selamlar Açelya,
Aslında bu konular ile alakalı tonla bloğumda makale var. Bakmanı şiddet ile tavsiye ederim:) Zaten o zaman sormana gerek kalmıyacak. AngularJS moder javascript kütüphanesi. Evet jquery den daha az koda yazmanı model değişince buna bağlı görselin hemen değişmesini sağlıyan bir yapı. SignaR SERVER SIDE TARAFINDAN CONNECT OLAN TÜM CLİENTLARI JAVASCRİPT FUNCTIONLARINI PARAMETRE GÖNDEREREK TETİKLEMEKTİR. Ve web socket kullanır. Yandi mesela databasede birşeyler değiştiği zaman sayfayı refresh etmene gerek klamadan değişen datayı connect olmuş clientlara gönderiri.
İyi çalışmalar.
Selamlar Bora BEY,
Cevabınız için teşekküre ederim.
Bora Bey,
Başarılarınızın devamını dilerim çok başarılı bir yazı…
Teşekkürler Zafer :)
Çok açıklayıcı ve sade bir anlatım. Teşekkürler :)
Teşekkürler Göker :)
çok karışık bir örnek hiç bir şey anlamadım
Selam Ferdi,
Bu karışık geldi ise önce daha basitten başla.
Mesela sadece listelemeyi incele. Hatta önce AngularJS ne imiş diye başla. Bu örnek karışık olabilir. Sen de önce daha az karışık birşeylerden başla. Hazırlan. Sonra, sana bu karışık gelen örneğe bir daha bak. Gene karışık geliyor ise biraz daha hazırlan. Gene gel bak.
Kolay Gelsin :)
hocam bu iş derya deniz elimden geldiğince öğrenmeye çalışıyorum. bu örnekte köşeli parantez nerede kapanıyor?
1
2
3
4
5
6
7
8
9
10
11
(function (angular) {
var app = angular.module(“app”, []);
app.controller(“Controller”, [“$scope”, “$http”, function Controller($scope, $http) {
$http.get(“/Dashboard/GetSites”).success(function (data) {
console.log(“GetSites data=” + JSON.stringify(data));
$scope.Sites = data;
}).error(function (ex) {
console.log(ex);
});
})(angular);
Selamlar,
Hangi köşeli parantez :)
Bunu bu kadar geç görmem..
:)