MVC Partial View Kullanimi ve Model Gönderimi

Bu yazımızda MVC de partial view kullanıp bu view içerisne başka bir sayfadan model yollayacağız. Web Formda User Control yerine MVC de bu PartialView leri kullanacağız. Fark olarak Partial Viewler User Controlde bulunan ViewState, PostBack gibi özellikleri barındırmazlar. Direk yolladığımız model üzerinden işlem yaparlar. Zaten MVC genel mimarisi de buna göre dizayn edilmiş. Tekrar etmemiz gereken nesneleri, html sayfalarını rahatlıktla bu şekilde kullanabiliriz.
Öncelikle bir partialview ekliyoruz. View Kısmından Add View dedikten sonra karşımıza gelen ekrandan Create as a partial view seçeneğini seçip Partialımız oluşturuyoruz

Oluşturduğumuz View içerisi boş bir şekilde ekrana gelecektir. Bu partialımızı başka Viewlerde kullanmak istersek dosya yolunu belirtip rahatlıkla kullanabiliriz. Örneğin oluşturduğumuz UrunListe isimli viewpartial home klasörünün içerisinde oluşturduğumuz partial klasöründe olsun.

1	@Html.Partial("Partial/UrunListe")

Yukarıda tanımadlığımız gibi uzun bir şekilde klasör yolunu da verebiliriz.

1	@Html.Partial("/Views/HtmlParts/HelpSideBarPart.cshtml")

Şimdi gelelim bu partialı çağırdığımız view içerisinden buraya model gönderimine. Northwind database kullanarak Product tablosunu View kısmından direk Partial ıma yollamak istiyorum. Öncelikle Contoller kısmında Product tablomuzdaki verileri saklayacak bir ViewData oluşturup içini dolduruyoruz.

1	ViewData["UrunListesi"] = db.Products.ToList();

Sıra geldi View kısmında bu listemizi yakalayıp partial view kısmına göndermede. Öncelikle View kısmında using bölümüne projemizde isimlendirdiğimiz modelimizi eklemeyi unutmayalım. Ben Model Klasörü içerisinde Data isimli bir klasör açıp modelimi ona ekledim

1	@using PartialViewTest.Models.Data

Daha sonra viewdata dan gelen verimizi ienumerable tipine cast ediyourz.

1 2 3

@{     IEnumerable<Products> sidebarProduct = ViewData["UrunListesi"] as IEnumerable<Products>; }

Sıra geldi sidebarProduct isimli listemizi partialımıza yollamaya. İşlem oldukça basit.

1	@Html.Partial("Partial/UrunListe",sidebarProduct)

Oluşturduğumuz Partial içerisinde modele bu listeyi atayıp dilediğimiz gibi kullanabiliriz. Partial da ise modeli şu şekilde yakalıyoruz.

1	@model IEnumerable<PartialViewTest.Models.Products>

Burada gönderdiğimiz tiple yakaladığımız tipin aynı olmasına dikkat etmemiz gerekmektedir. Dilersek bu işlemi jquery ile de çok basit bir şekilde yapabiliriz. Bir sonraki yazıda bu partialımızı direkt jquery ile dolduracağız

http://cagatayyildiz.com/mvc-partial-view-kullanimi/

Mvc Ajax

Merhaba Arkadaşlar; Uzun bir aradan sonra, yeni makalem ile beraberiz. Bu makalemde Mvc ile Ajax işlemleri konusunda örnek bir uygulama yapacağım. Ajax nedir? diye soracak olursanız. A J A X : Asynchronous JavaScript and XML kelimelerinin baş harfleri alınarak türetilmiştir. Yaptığı işe gelince web ortamında (biz o şekilde kullanacağımız için) Sayfalarımızın postback olmadan verileri alıp vermesine yarayan asenkron çalışan bir yapıdır.

Daha ayrıntılı bilgi için Ajax Nedir? Ajax hakkında nette bir çok kaynak bulabileceğiniz için o konulara girmiyorum.

Hemen örnek uygulamamıza başlıyoruz. Senaryomuz textbox a yazdığımız bir veriyi post ederek, geri dönen değeri sayfamız postback olmadan ekrana yazdırmak üzerine kurulu. Mvc İle Ajax işlemini yapabilmemiz için sayfamıza bazı jQuery Kütüphaneleri referans etmemiz gerekli bunlar ;
jquery-{versiyon hangisi ise}.js
jquery.unobtrusive-ajax.js
jquery.validate.js
jquery.validate.unobtrusive.js,
zaten Mvc 4 projelerinde bu dosyalar Scripts dizini altında mevcut bulunmaktadır.

Ajax ile post işlemi yapabilmek için ise "Ajax.BeginForm()" metodu.

   1:  @using (Ajax.BeginForm("InsertMetot", "Home", new AjaxOptions { HttpMethod = "Post", OnSuccess = "ReturnData", OnBegin = "FirstSend" }))

   2:  {

   3:      //Form elemanlarımız

   4:  }

Sayfamızda bir TextBox bir Button ve dönen değeri ekrana yazacak bir span tag'ı Ekliyoruz.

   1:  <span id="message"></span>

   2:  <div><input type="text" name="FirstName" /></div>

   3:  <div><input type="submit" value="Gönder" /></div>

..ve Formumuzun genel yapısı.

   1:  @using (Ajax.BeginForm("InsertMetot", "Home", new AjaxOptions { HttpMethod = "Post", OnSuccess = "ReturnData", OnBegin = "FirstSend" }))

   2:      {

   3:          <span id="message"></span>

   4:          <div><input type="text" name="FirstName" /></div>

   5:          <div><input type="submit" value="Gönder" /></div>

   6:      }

Formumuzun post edildiğinde çalışacak metodlar ve yapacağı eylemler bu kısımda belirtiliyor.

   1:  new AjaxOptions { HttpMethod = "Post", OnSuccess = "ReturnData", OnBegin = "FirstSend" }

• HttpMethod = "Post" sayfanın post edilmesi gerektiğini belirtiyoruz. Duruma göre gönderme şeklini "Get" olarakta belirtebilirsiniz.
• OnSuccess = "ReturnData" Post olan formun geri dönen değerini ekranayazan JavaScript metodumuz
• OnBegin = "FirstSend" form post edildiğinde çalışacak olan ilk JavaScript metodumuz.

JavaScript metodlarımız ve jQuery kodlarımız.

   1:  <script>

   2:   

   3:      // form post edildiğinde ilk çalışacak olan metodumuz

   4:      function FirstSend() {

   5:   

   6:          //textbox kontrolu yapıyoruz boş / dolu --- boş ise durum false olarak işlemi sonlandırıyor.

   7:          var box = $("input[name='FirstName']").val();

   8:   

   9:          if (box == "") {

  10:              $("input[name=FirstName]").css({ 'border': 'solid 1px #f00'});

  11:              return false;

  12:          }

  13:      }

  14:   

  15:      // Formumuzun başarılı olması durumunda çalışacak fonksiyonumuz

  16:      function ReturnData(result) {

  17:   

  18:          $("#message").text(result.data);

  19:          $("input[name='FirstName']").val(''); // Textbox'i boşaltıyoruz.

  20:      }

  21:   

  22:      $(function () {

  23:   

  24:          $("input[name=FirstName]").click(function () {

  25:              $("input[name=FirstName]").css({ 'border': 'solid 1px #ccc' });

  26:          });

  27:      });

  28:   

  29:  </script>

Veriyi post ettiğimiz sayfamız. Verilerimizi jSon olarak döndürüyoruz.

   1:  [HttpPost]

   2:  public ActionResult InsertMetot(string FirstName)

   3:  {

   4:      try

   5:      {

   6:           // Geriye Dönen başarılı sonuç mesajımız

   7:           return Json(new { data = FirstName + " kayıt işlemi tamamlandı" });

   8:      }

   9:      catch (Exception ex)

  10:      {

  11:           // Hata oluşması durumunda dönen hata mesajımız.

  12:           return Json(new { data = ex.Message });

  13:      }

  14:  }

Textbox alanı boş ise aşağıdaki görüntü ile karşılaşacağız.

Başarılı bir işlem sonunda ise, sayfamıza kayıt işleminin tamamlandığına dair oluşacak ekran çıktısıda aşağıdaki gibi olacaktır.

Örnek uygulamayı indirerek konuyu daha yakından inceleyebilirsiniz. Fırsat buldukça Ajax ve jQuery ile ilgili bir kaç makale daha yazmayı düşünüyorum,

Şimdilik hoşçakalın...

Örnek Proje : Mvc Ajax İşlemleri 1

ASP.NET MVC Ajax.ActionLink ile sayfa yenilemeye son

İnternet sayfalarında artık yeni teknolojilerle birlikte javascript’in gücü iyice gösterilmeye başlandı. Sayfa yenilemeleri yapmak yerine sadece javascript ile sayfa üzerindeki etiketler(div) güncellenmekte. Linklere, butonlara tıklandığında istenen sonuçlar etkili bir biçimde bizi rahatsız etmeden önümüze dökülmekte. Son zamanlarda özellikle sosyal paylaşım sitelerinde javascript kendini o kadar belli ediyor ki, javascript’i icat edenler bile birgün bu kadar kullanılacağını tahmin etmemiştir.

Lafı fazla uzatmadan javascript özelliğini, liklere tıklandığında sayfa yenilemesi yapmadan önümüze getiren özelliği ASP.NET MVC mimarisinde kullanmaya çalışacağız.

Bir restorantın menü listesini önümüze getiren bir senaryomuz olduğunu varsayalım. Menü listesinde ürün adı ve fiyatı olsun. Bu yapıyı temsilen bir Menu adında sınıf oluşturmalıyız.

public class Menu {       public int Id { get; set; }       public string Name { get; set; }       public decimal Price { get; set; } }

Şimdi MenuController adında bir controller sınıfı oluşturup bu controller sınıfının Index metodu ve Index view sayfası oluşturalım.

public class MenuController : Controller {       List<Menu> menu = new List<Menu>       {            new Menu{Id =1, Name="Hamburger", Price=3.15M},            new Menu{Id =2, Name="Cheeseburger", Price=4.05M},            new Menu{Id =3, Name="Cola", Price=2.0M},            new Menu{Id =4, Name="Cips", Price=1.25M},       };         public ActionResult Index()       {            return View();       }         public ActionResult GetMenu()       {            return PartialView("_MenuPart", menu);       }   }

Menu Listesi linkine tıklandığında sayfa yenilenmeksizin yukardaki liste tablo halinde linkin aldına indirilacek.

Bunun için yapılacak hazırlıklardan biri jquery.unobtrusive-ajax.min.js dosyasının view sayfasına referans edilmesi gerekmektedir. Aksi taktirde yaptığımız işlem çalışmayacaktır. Bu söylediklerim ASP.NET MVC3 için geçerli tabiki.

Referans olarak ana Layout sayfasına ekliyorum javascript dosyasını.

Şimdi Index view sayfası içine “Menu Listesi” linkini oluşturmalıyız.

@Ajax.ActionLink("Menu Listesi",                  "GetMenu",                  new AjaxOptions{                                  InsertionMode=InsertionMode.Replace,                                  UpdateTargetId="MenuBox",                                  HttpMethod="GET",                    })   <div id="MenuBox"></div>

Ajax helper sınıfının ActionLink Extension metodu ile link oluşturma işlemini gerçekleştirebiliriz. Bu metodun aldığı AjaxOptions parametresinde belirtilen, InsertionMode özelliği Replace olarak işaretlenir. Bu sayede işlem sonrasında, yani GetMenu metodundan dönen değeriUpdateTargerId parametresindeki html element içeriği ile değiştirileceğini belirtiyoruz.

Örneğimizde GetMenu metodu bir _MenuPart adında bir PartialView döndürüyor.

_MenuPart partial view içeriği ise şu şeklide olacaktır.

<table> <tr> <th>Name</th> <th>Price</th> <th></th> </tr> @foreach (var item in Model) { <tr> <td>@Html.DisplayFor(modelItem => item.Name)</td> <td>@Html.DisplayFor(modelItem => item.Price)</td> <td>@Html.ActionLink("Edit", "Edit", new { id=item.Id }) | @Html.ActionLink("Details", "Details", new { id=item.Id }) | @Html.ActionLink("Delete", "Delete", new { id=item.Id }) </td> </tr> } </table>

Sonuç olarak Index sayfasındaki Menu Listesi linkine tıklandığında bu tablo önümüze gelecek.

http://www.bayramucuncu.com/asp-net-mvc-ajax-actionlink-ile-sayfa-yenilemeye-son/