Azure DB ile Mvc’de Code First İşlemleri.BÖLÜM-2
Şimdi Boş bir Mvc projesi açalım.Referance olarak DAL projemizi ekliyelim. Tüm DB işlemlerimizi bu dll üzerinden gerçekleştireceğiz. Aşağıdaki kodda görüldüğü gibi öncelikle bir Index View oluşturuyoruz. Burada amacımız sınıf,öğrenci ve ders verilerini aynı sayfa üzerinde düzenlemek ve listemek. Ayrıca herhangi birinde olan değişikliğin diğer ilişkili analar üzerinde olan etkisini görmek.Bu amaç doğrultusunda aşağıdaki kodda görüldüğü gibi SchollClass,ClassStudent ve StudentLesson için ayrı ayrı partial viewlar yaratıp hepsini Index view’da gösteriyoruz. Index.cshtml’e, herbir partial view Html.RenderAction‘la eklenmiştir. Amaç partial viewların beklediği view modellerin yani işlem yapacağı tablonun datalarının herbiri, homeController’da render zamanında kendi actionlarında doldurulmasıdır. Örneğin @{Html.RenderPartial(“PrtClass”, Model);} olsa idi istenen view modeli de Index viewımız’a yani homecontrollerın index action’ına da göndermek zorunda kalıcaktık. Bir başka konu da her partial view’ün kendine atanmış özel bir div ile sarmalanmış olmasıdır. Daha sonra buna neden ihityaç duyduğumuzu inceleyeceğiz.
|
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 = "Index"; } <script src="~/Scripts/jquery-1.10.2.min.js"></script> <table> <tr> <td> <div id="prtClass"> @{Html.RenderAction("PrtClass");} </div> </td> <td> <div id="prtStudent"> @{Html.RenderAction("PrtStudent");} </div> </td> <td> <div id="prtLesson"> @{Html.RenderAction("PrtLesson");} </div> </td> </tr> </table> |
Şimdi aşağıda kodu olan Shared/PrtClass.cshtml partial view’ımıza bakalım: Model olarak @model List<DAL.SchollClass> beklemektedir. DAL codefirst projemizdeki NameSpace adıdır.Yeni Sınıf Adı girilen bir textbox,kaydet buttonu ve DAL.SchollClass’dan dönen kayıtlı sınıfların listesini gösteren bir tablo vardır. Kaydet button’una basılınca /Home/PrtClass’a post olur ve ilgili data json olarak gönderilir. Kaydetme işlemi bitince buna bağlı prtStudent’da ve prtLesson’da yeniden yüklenir. Çünkü tüm bu partail viewlarda classların listesi vardır ve class tablosunda bir değişiklik olduğu için yenilenmesi gerekmektedir. İşte bu yenileme işlemi yani partail viewların yeniden doldurulması, kendilerine atanmış divlerin htmllerine basılarak yapılır. Mesela class datas’ı aşağıda görüldüğü gibi $(“#prtClass”).html(html); şeklinde doldurulmaktadı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 |
@model List<DAL.SchollClass> <script type="text/javascript"> function save() { $.post("/Home/PrtClass", { 'ClassName': $("#txtClass").val(),'IsActive':true }, function (html) { $("#prtClass").html(html); $.get("/Home/PrtStudent", function (htmlStudent) { $("#prtStudent").html(htmlStudent); }); $.get("/Home/PrtLesson", function (htmlStudent) { $("#prtLesson").html(htmlStudent); }); }); }; </script> <b>Sınıf Verileri:</b><br /> <input type="text" id="txtClass" /><input type="button" id="btnSave" onclick="save()" value="Kaydet"></><br /><br /> <table border="1" width="200px"> <tr><td><b>Sınıf Adı</b></td><td><b>Aktif mi</b></td></tr> @{string txt = "";} @foreach (var item in Model) { txt = item.IsActive == true ? "Aktif" : "Pasif"; <tr><td>@item.ClassName</td><td>@txt</td></tr> } </table> |
Sınıf Verilerinin ekran görüntüsü diğer öğrenci ve ders notları alanları ile birlikte aşağıdadır.
Aşağıda kodu görülen HomeController/PrtClass’ı inceleyelim: Action’ın üstündeki [ChildActionOnly] attribute’ü bu action’ın direk url’den çağrılamamasını sağlar.Yani amaç güvenliktir. using(ScienceSchool context=new ScienceSchool()) bizim DB tarafındaki contextimizdir. Buradan istendiği gibi direk tablolara POCO’lar sayesinde erişilebilir. ScollClass’daki datalar çekildikten ve PrtClass’ın beklediği List<SchollClass> oluşturulduktan sonra, ilgili datalar bu modele doldurulup gönderilir. Bir de [HttpPost]’lu olan Datanın kaydedildiği PrtClass Action’ı vardır. Bu action’a sadece post işlemi ile erişilebilir. Yani gene url’den request ile bu action’a ulaşılamaz. Burada amaç hem güvenlik hem de get ve post actionları ayırmaktır..Burada gönderilen data, context’e eklenip kaydedilir.
- context.SchollClass.Add(dataSC);
- context.SaveChanges();
Daha sonra da kayıtlı classların yeniden listelenmesi için tüm kayıtlar tekrardan çekilip; ilgili divlerin htmllerine front tarafta javascript ile basılır. Burada önemli bir nokta da fronta gönderilen html, contoroller’ün action’ından return PartialView() şeklinde gönderilmesidir.
|
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 |
public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } [ChildActionOnly] public PartialViewResult PrtClass() { using(ScienceSchool context=new ScienceSchool()) { var data = from cls in context.SchollClass select cls; List<SchollClass> dataModel=new List<SchollClass>(); if (data.Count() >0) { foreach(var itm in data.ToList()) { SchollClass item=new SchollClass(); item.ClassName=itm.ClassName; item.IsActive = itm.IsActive; dataModel.Add(item); } } return PartialView(dataModel); } } [HttpPost] public PartialViewResult PrtClass(SchollClass dataSC) { using (ScienceSchool context = new ScienceSchool()) { context.SchollClass.Add(dataSC); context.SaveChanges(); var data = from cls in context.SchollClass select cls; List<SchollClass> dataModel = new List<SchollClass>(); if (data.Count() > 0) { foreach (var itm in data.ToList()) { SchollClass item = new SchollClass(); item.ClassName = itm.ClassName; item.IsActive = itm.IsActive; dataModel.Add(item); } } return PartialView(dataModel); } } |
Shared/PrtStudent.cshtml: Aşağıda yeni öğrenci kayıdı için ilgi saveStudent() post’umuz[$.post] ile ve öğrenci bilgisi değişince prtLesson partial view’ının tekrardan doldurulması görülmektedir.[$.get] ile ayrıca ClassStudent için gerekli kontroller burada tanımlanmıştır.Öğrencinin hangi sınıfta olucağının seçileceği bir dropdown listesi,öğrenincinin adının,soyadının ve nosunun girileceği birer textbox ve bilgilerin kaydedileceği bir button vardır.En altta da öğrenci listesi olan bir tablo bulunmaktadir.
|
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 |
@model List<DAL.ClassStudent> <script type="text/javascript"> function saveStudent() { $.post("/Home/PrtStudent", { 'Name': $("#txtName").val(), 'SurName': $("#txtSurName").val(), 'StudentNo': $("#txtNo").val(), 'SchollClassID': $('#dropSelect :selected').val() }, function (html) { $("#prtStudent").html(html); $.get("/Home/PrtLesson", function (htmlStudent) { $("#prtLesson").html(htmlStudent); }); }); }; </script> <b>Öğrenci Verileri:</b><br /> <table> <tr> <td> Sınıfı: </td> <td>@Html.DropDownList("Class", new SelectList(ViewBag.ClassList, "ID", "ClassName"), new { @id = "dropSelect" })</td> </tr> <tr> <td>İsmi:</td> <td><input type="text" id="txtName" /></td> </tr> <tr> <td>Soy İsim:</td> <td><input type="text" id="txtSurName" /></td> </tr> <tr> <td>No:</td> <td><input type="text" id="txtNo" /></td> </tr> <tr> <td><br/><input type="button" id="btnSave" onclick="saveStudent()" value="Kaydet"></></td> </tr> </table><br /><br /> <table border="1" width="200px"> <tr><td><b>Adı</b></td><td><b>Soyadı</b></td><td><b>No</b></td><td><b>Sınıf</b></td></tr> @foreach (var item in Model) { <tr><td>@item.Name</td><td>@item.SurName</td><td>@item.StudentNo</td><td>@item.ClassName</td></tr> } </table> |
HomeController/PrtStudent: Burda da Class combosu ViewBag’e atılan data sayesinde doldurulmaktdır. ViewBag ile doldurulmasındaki amaç PrtStudent partial view’unun sadece ClassStudent modelini beklemesidir. Bir de ayrıca SchollClass modelini beklemesini istemedik. Kayıt edilecek öğrencinin sınıfı bu combodan belirlenir. Ayrıca ism,soy isim, ve No’suna ait bilgilerin girileceği bir alan ve önceki öğrenci kayıtlarının gösterildiği bir tablo vardır. Burada önemli olan ClassStudent POKO’suna altaki eklenen property’dir [NotMapped]‘ın anlamı bu property’nin database ile eşlenmiyecek olması ve bizim sadece projede kendimize özel olarak kullanmış olmamızdır. Bu alalnın eklenmesinin amacı herbir öğrenici kaydı için bağlı olduğu class ismini tek tek çekmek yerine bağlı olduğu calss’ın ismini tutmasıdır.
[NotMapped] public string ClassName { get; set; }
Gene kaydetme ve verileri gösterme SchollClass ile aynıdır. Kaydetme işleminden sonra prtLesson tekrardan doldurulmaktadır. İlgili kod aşağıda görülmektedir.
|
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 |
public PartialViewResult PrtStudent() { using (ScienceSchool context = new ScienceSchool()) { var data = from cs in context.ClassStudent select cs; List<ClassStudent> dataModel = new List<ClassStudent>(); ViewBag.ClassList = (from cls in context.SchollClass select cls).ToList(); if (data.Count() > 0) { foreach (var itm in data.ToList()) { ClassStudent item = new ClassStudent(); item.Name = itm.Name; item.SurName = itm.SurName; item.StudentNo = itm.StudentNo; item.SchollClassID = itm.SchollClassID; item.ClassName = context.SchollClass.Where(ca => ca.ID == itm.SchollClassID).Select(ca => ca.ClassName).FirstOrDefault(); dataModel.Add(item); } } return PartialView(dataModel); } } [HttpPost] public PartialViewResult PrtStudent(ClassStudent dataCS) { using (ScienceSchool context = new ScienceSchool()) { context.ClassStudent.Add(dataCS); context.SaveChanges(); var data = from cs in context.ClassStudent select cs; List<ClassStudent> dataModel = new List<ClassStudent>(); ViewBag.ClassList = (from cls in context.SchollClass select cls).ToList(); if (data.Count() > 0) { foreach (var itm in data.ToList()) { ClassStudent item = new ClassStudent(); item.Name = itm.Name; item.SurName = itm.SurName; item.StudentNo = itm.StudentNo; item.SchollClassID = itm.SchollClassID; item.ClassName = context.SchollClass.Where(ca => ca.ID == itm.SchollClassID).Select(ca => ca.ClassName).FirstOrDefault(); dataModel.Add(item); } } return PartialView(dataModel); } } |
Shared/PrtLesson.cshtml: Dersler’le ilgili post işlemi,sınıf combosu değişince ilgili öğrenci combosunun buna göre dolması ve önceki ders kayıtlarının listesinin bir tabloda gösterilmesi aşağıda kodlandığı gibidir. dropSelectStudent Ajax Post ile doldurulmaktadır. dataType’ı da json dır. Hatta bu datanın doldurduğu PrtLessonStudent partial view’ı dönecek bu datayı json’a yandaki komut ile çevirir.==>Json(cls)
|
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 |
@model List<DAL.StudentLesson> <script type="text/javascript"> function saveLesson() { $.post("/Home/PrtLesson", { 'LessonName': $("#txtLessonName").val(), 'FinalScore': $("#txtScore").val(), 'ClassStudentID': $('#dropSelectStudent :selected').val() }, function (html) { $("#prtLesson").html(html); }); }; jQuery(document).ready(function () { $("#dropSelectClass").change(function () { $.ajax({ type: 'POST', url: '/Home/PrtLessonStudent', data: "{ 'ID':'"+ $('#dropSelectClass :selected').val()+"' }", contentType: "application/json; charset=utf-8", dataType: 'json', success: function (result) { $('#dropSelectStudent').empty(); $.each(result, function () { $('#dropSelectStudent').append($("<option />").val(this.StudentID).text(this.Name)); }); } }); }); }); </script> <b>Ders Notları:</b><br /> <table> <tr> <td> Sınıfı: </td> <td>@Html.DropDownList("Class", new SelectList(ViewBag.ClassList, "ID", "ClassName"), new { @id = "dropSelectClass" })</td> </tr> <tr> <td> Öğrenci: </td> <td>@Html.DropDownList("Class", new SelectList(ViewBag.StudentList, "StudentID", "FullName"), new { @id = "dropSelectStudent" })</td> </tr> <tr> <td>Ders Adı:</td> <td><input type="text" id="txtLessonName" /></td> </tr> <tr> <td>Notu:</td> <td><input type="text" id="txtScore" /></td> </tr> <tr> <td><br /><input type="button" id="btnSave" onclick="saveLesson()" value="Kaydet"></></td> </tr> </table><br /><br /> <table border="1" width="200px"> <tr><td><b>Ders Adı</b></td><td><b>Notu</b></td><td><b>Öğrenci Adı</b></td></tr> @foreach (var item in Model) { <tr><td>@item.LessonName</td><td>@item.FinalScore</td><td>@item.StudentName</td></tr> } </table> |
HomeController/PrtLesson:Burada SchollClass Combosu yani Sınıf combosu değişince StudentList yani öğrenci listesine, bu sınıfta olanlar gelecek şekilde değişmektedir.Bunu için yeni bir Action eklenmiştir. PrtLessonStudent.Diğer derslerle ilgili bilgiler girilip kaydedilmekte ve yine tüm ders kayıtları aşağıda bir tabloda gösterilmektedir.
|
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 |
public PartialViewResult PrtLesson() { using (ScienceSchool context = new ScienceSchool()) { var data = from sl in context.StudentLesson select sl; List<StudentLesson> dataModel = new List<StudentLesson>(); ViewBag.ClassList = (from cls in context.SchollClass select cls).ToList(); ViewBag.StudentList = (from cls in context.ClassStudent select new { StudentID=cls.StudentID, FullName = (cls.Name + " " + cls.SurName) }).ToList(); if (data.Count() > 0) { foreach (var itm in data.ToList()) { StudentLesson item = new StudentLesson(); item.LessonName = itm.LessonName; item.FinalScore = itm.FinalScore; item.ClassStudentID = itm.ClassStudentID; var cls = context.ClassStudent.First(cs => cs.StudentID == itm.ClassStudentID); item.StudentName = cls.Name + " " + cls.SurName; dataModel.Add(item); } } return PartialView(dataModel); } } [HttpPost] public PartialViewResult PrtLesson(StudentLesson dataSL) { using (ScienceSchool context = new ScienceSchool()) { context.StudentLesson.Add(dataSL); context.SaveChanges(); var data = from sl in context.StudentLesson select sl; List<StudentLesson> dataModel = new List<StudentLesson>(); ViewBag.ClassList = (from cls in context.SchollClass select cls).ToList(); ViewBag.StudentList = (from cls in context.ClassStudent select new { StudentID = cls.StudentID, FullName = (cls.Name + " " + cls.SurName) }).ToList(); if (data.Count() > 0) { foreach (var itm in data.ToList()) { StudentLesson item = new StudentLesson(); item.LessonName = itm.LessonName; item.FinalScore = itm.FinalScore; item.ClassStudentID = itm.ClassStudentID; item.StudentName = (from cls in context.ClassStudent where cls.StudentID==itm.ClassStudentID select new { StudentID = cls.StudentID, FullName = (cls.Name + " " + cls.SurName) }).FirstOrDefault().FullName; dataModel.Add(item); } } return PartialView(dataModel); } } [HttpPost] public ActionResult PrtLessonStudent(int ID) { using (ScienceSchool context = new ScienceSchool()) { var data = context.ClassStudent.Where(sl => sl.SchollClassID == ID).ToList(); if (data.Count>0) { List<ClassStudent> cls = new List<ClassStudent>(); foreach (var item in data) { var clsitem = new ClassStudent(); clsitem.Name = item.Name + " " + item.SurName; clsitem.StudentID = item.StudentID; cls.Add(clsitem); } return Json(cls); } } return Json(new ClassStudent()); } |
Böylece birbiri ile bağlantılı azure üzerindeki üç tablomuzu, ScienceSchool database’i üzerinde yarattık. Code First POCO’larını tool yarıdımı ile oluşturduk. İlgili dataları çekme,kaydetme gibi işlerin yapıldığı Actionları yazıldıktan sonra buna bağlı partial view ve javascript kodlarını kodladık. Birinin değişmesi ile diğerleri üzerindeki etkisini detaylı olarak inceledik. En önemlisi de bu işlemleri yaparken esas yapmak isteğimiz işe konsantre olabildik. Önceden oluşturduğumuz DAL projemizde code first kullanarak DB ile olan tüm işlerimizi ayrıca emek ve zaman harcamadan gerçekleştirdik.
Geldik bir makalenin daha sonuna.
Yeni bir makalede görüşmek üzere herkese hoşçakalın.
Not:Örnek Url (İptal): http://codefirstonazure.azurewebsites.net/
Source Code: http://www.borakasmer.com/projects/CodeFirstBlog.rar
Son Yorumlar