ASP.NET MVC’de Jquery Post ve Partial View İlişkisi

Selamla;

Bugün Mvc’de bir sayfanın belli bir bölümünün neden Partial View ile gösterilmesi gerekebileceğini ve içeriğinin Ajax ile doldurulmasının avantajlarını tartışacağız.

Aşağıda görüldüğü gibi Site adında bir modelimiz olsun. Ve her Site’in kendi içinde Channel adında bölümleri olsun.

Bir Site’in detayına gidince aşağıdaki modeli dolduralım. Modelde ilgili Site ve ona ait Channel Listesi olacaktır.

İlgili Site’ın detayında ID’ye göre Site ve Channel listesi alınıp ilgili  View() ile birlikte döndürülür.

SiteController/Detail:

Detail.cshtml: Aşağıdaki View’da ilgili Site ve Channel listesi Razor ile ekrana basılmıştır. Burada en önemli nokta “listContent” div içerisine “@foreach” ile yazılan channel listesi’dir. Bu listede silme işlemi olduğu zaman öncelikle sayfa post olmadan ilgili işlemin yapılabilmesi, Ajax Post ile ilgili channel silinip geriye kalan channel listesinin bir partial view olarak ilgili model ile “DeleteChannel()” function’ına result set olarak döndürülmesi ile mümkün olabilmektedir.

Site

Detail.js/DeleteChannel(): Herhangi bir channel’ı silme işleminde aşağıdaki script çağrılır. SiteController’daki ilgili method silinecek Channel’ın ID’si ve ait olduğu Site’ın ID’si ile birlikte post edilir. Daha sonra dönen “data” yani “ChannelList.cshtm” partialview’ı “listContent” div’inin html’ine basılır.

Controller/Site/DeleteChannelList(): Aşağıda tanımlanan method PartialView döndürmektedir. İlgili channel silindikten sonra geri kalan channel listesi ilgili “Channel” modeline doldurulup ChannelList partialview’ı ile birlikte döndürülmektedir.

View/Site/ChannelList.cshtm: SiteDetail’da “listContent” div’inin altında tanımlı olan channel listesi aşağıdaki partial view’da “List<Channel>” modeli alarak tanımlanmıştır. İşte “Detail.js”‘de tanımlı olan “DeleteChannel()” functionı silme işleminden sonra aşağıdaki partialview’ı “listContent” html’inin üstüne ezmektedir.

Bu makalede amaç silme işlemi olduğu zaman javascript ile post işleminden değer eskiden olduğı gibi StringBuilder ile hazırlanmış bir html değil render edilmiş bir partialview yani “.cshtml” uzantılı bir sayfanın döndürülebileceğini göstermektir. Bu da kodlamada bize büyük kolaylık sağlamaktadır.

Bir başka konu da Detail.cshtml’de “listDetail” div’inin altına channelList partil view olarak aşağıdaki yöntemler ile de konabilirdi. Amaç konun daha iyi anlaşılması için ilgili listenin Html’inin razor view engine’de gösterilmesidir.

DataContext.cs:

Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.

Herkes Görsün:

Sevebilirsin...

12 Yanıt

  1. Mesut dedi ki:

    Eline sağlık Bora hocam. Faydalı bir makale olmuş.

  2. Ahmet dedi ki:

    Abi merhaba, ben meslek lisesini yeni bitirdim sınav sonucuna göre bilgisayar programcılığına yerleştim meslek liselerinde c# asp.net web forms öğretiliyor yüksek okullarda da öyle yaptığım araştırmalar sonucu ilerde iş hayatının tamamen mvc e yönleneceğini düşünüyorum. Bende yazılım hayatıma .NET ile web yazılımı alanında devam etmek istiyorum Bu konuda ne öneriyorsun abi klasik web forms mu mvc mi.

    • borsoft dedi ki:

      Selam Ahmet;
      Öncelikle gayet bilinçlisin. Bu çok güzel birşey. Öncelikle meslek lisesinde yazılım okuduğunu farz ediyorum. Bu yüzden programcılığın temellerini bildiğini düşünüyorum. Algoritma, mümkünse tasarım kalıpları gibi..
      Şimdi Web programcılığı için temleri önce öğrenmen lazım. Yani Html5, Css3 ve çok iyi derecede Javascript( Jquery, TypeScript gibi). Daha sonra ülkemizde malesef bir uzmanlık yok. Yani eninde sonunda Asp.Net’de Mvc’de bilmen lazım:)
      Asp.Net öğrenmesi daha kolaydır. Mvc kesinlikle çok daha populer olan Model, View, Controller design pattern’ı kullanan çok sık bir yapı. Mvc 6.0 ile gayet optimumu. Ama programcılık bir bütün. Entity Framework’de bilmen lazım, Codefirst’de. Ne biliyim Grunt,Gulp,Npm’de. Web Api restfull services’de, WebApi services’de. Yani kendini Asp.Net, Mvc diye kısıtlama. Bu yazılım dünyası çok büyük. Önce bahsettiğim temelleri öğren sonra da üstüne basamaklar çık.
      Web Programcılığına başlangıcı buradan yapabilirsin(Birebir sevgili arkadaşım Engin Polat ile beraber anlatıyoruz): https://www.acikakademi.com/portal/egitimler/html-css-js.aspx
      Kolay Gelsin…

  3. Ahmet dedi ki:

    Bora abi çok teşekkür edioyorum, sitede mail adresini bulamadığımdan bu konunun altına yazdım meşgul ettim kusura bakma abi :). Meslek lisesinde 2. sınıfta alan seçtik abi ben veri tabanı alanını seçtim orada access ve sql gördük 3.ve 4. sınıflarda da c# ve asp.net gördük kurumsal bir web sitesi yapacak kadar bilgim var asp.net te ado.net ile rahat sorgu yazıp proje geliştirebiliyorum c# 4.0 ve asp.net 4.5 kitaplarını alıp anlayarak bitirdim. Html ve css de baştan tasarım yapamasamda olayları biliyorum. Sağolsun bir hocam bu konularda ilgimi görünce çok destek oldu bana okulda zeten 120 bilişim öğrencisinden 2,3 kişi var bu işe ilgili gerisi boş..Bu sene Adıyaman üni bilgisayar programcılığına yerleştim, bir facebook grubundan geçen senenin öğrencilerine ulaştım programlama alanında bize ilk sene algoritma ve turbo pascal öğrettiler dedi ikinci sene de delphi ve php ve mssql öğretiyorlar dedi ve hoca php de ingilizce bir eğitim setinden videolar gösteriyormuş derse örnekleri detaylandıracak kadar bilgisi yokmuş bile.Turbo pascal delphi php ve mssql komedi gibi mysql olsa anlarım da. Şuan çok doluyum buraya içimi döküyorum kusur bakma abi, ben alan olarak .NET i tercih ettim bu konuda ilerleyecektim ama okulum eğitimini vermiyor hayal kırıklığına uğradım. Abi Allah için sen söyle bu nasıl bir eğitim sistemi turbo pascal mı kaldı kafam çok karışık ne yapacağımı bilemiyorum bana yol göster abi.

    • borsoft dedi ki:

      Selam Ahmet;
      Öncelikle mailim bora@borakasmer.com.
      Ders program listesi sanırım şu: http://bp-gmyo.adiyaman.edu.tr/TR/Sayfalar/Programlar/Ders-Icerikleri-2708
      Öncelikle eğitim sistemi bizim kanayan en büyük yaramız. İnan senin kadar ben de çok üzülüyorum. İşte tam bu yüzden bu kadar çok kendimi paralayıp birşeyler paylaşmaya anlatmaya çalışıyorum:(
      Bu meslekte yani yazılım sektöründe okumaktan ziyade kendini geliştirmek herşeyden önemli. Malesef okul bir reklam bir ambalaj olarak işyerlerinde bakılıyor. İstediğin eğitimleri verebilecek öğretmenleri devlet okularında bulman çok zor. Malesef bu yetkinlikteki hocalar ya özel eğitim kurumlarında yada özel okullarda. Sen zaten anladığım kadarı ile güzel bir temel yapmışsın. Bu durumda yapılabilecek en iyi şey diploma da Türkiye de çalışıcak isen malesef lazım olduğu için, okurken yazılım ile alakalı bir işte çalışmak en mantıklısı bu gibi. Bence çok daha fazla şey öğrenirsin. Okul sürecinde Microsoft Msp(Microsoft Student Partners) olmanı, güzel bir blog oluşturmanı ve hayal ettiğin şeyleri herzaman kodlamanı öneririm. O zaman okulun ve diğer şeylerin pek önemi kalmaz…
      Hoşçakal…

  4. Ahmet dedi ki:

    Herşey için teşekkürler bora abi

  5. Sadun Cem dedi ki:

    Sizi sürekli takip ediyor ve sitenizi ansiklopedi gibi görüyorum. öncelikle paylaşımlarınız için çok teşekkür ederim. ne zaman girsem hep öğrenme heyecanı sarıyor burda. Sormak istedeğim, yeni bir şirkete başladım ve mvc ile proje geliştiriyorum. bu arada mvc yi de yeni öğrendim bayağada ilerledim. şimdi sormak istediğim yazdığınız makaleyi mesela arama ve sorgulama işlemlerinde kullanabilirmiyim. bir kariyer site projesi var ve baya kastım fakat detaylı aramalarda çok kafa patlatmama rağmen aşırı kod karmaşasına girdim.sayfa da birisi sektore basınca sektorler,sonra bölüme basınca sektor ve bölüm, sonra şehir seçince de 3 ne ait sırayla dataları listeliyorum.bu makaledeki bilgilerde arama sorguları ve sayfaları geliştirebiliriyim. böyle bir yola çıkmak mantıklımı ? teşekkürler.

    • borsoft dedi ki:

      Selamlar Sadun;
      Öncelikle güzel iltifatların için teşekkür ederim. Yeni işinde başarılar, tebrikler ve iyi şanslar. Sen aslında sıralı dropboxlarda triger arıyorsun:)
      Bu yazıdan ziyade sana aşağıdaki linkdeki makalem gibi bir örnek daha faydalı olabilir.Bu arada ilgili amkaleyi ararken blog nekadar da büyümüş birdaha fark ettim:)

      Blog: http://www.borakasmer.com/azure-db-ile-mvcde-code-first-islemleri-bolum-2/

      İyi çalışmalar.

      Not(Bütün olay şu):
      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($(““).val(this.StudentID).text(this.Name));
      });
      }
      });
      });
      });

    • borsoft dedi ki:

      Selam Sadun;
      Sanırım soruna en son yazdığım aşağıdaki makale daha güzel bir cevap olucaktır.
      http://www.borakasmer.com/birbirine-bagli-comboboxlari-angularjs-ve-webapi-kullanarak-doldurma/

  6. Ercan dedi ki:

    Bora hocam selamlar;
    Makaledeki örnek kodlarda eksiklik varmı acaba ? ben adım adım uyguluyorum da sanki eksiklikler var gibi (çok fazla hakim değilim yanlış anlamayın :) ) bazılarını kendim tamamlamaya çalıştım ama DataContext sınıfı gibi. diğer makalelerde bitmiş halini ekliyosunuz genelde ama bunda eklememişsiniz. Acaba ekleyebilirmisiniz ?

    • borsoft dedi ki:

      Selamlar Ercan,

      İlgili DataContext sınıfı olan “DbContext”, makalenin sonuna eklenmiştir. Dediğin gibi bu makalenin sonuna kodları eklememişim:)
      Eksikliği bildirdiğin için teşekkür ederim.

      İyi çalışmalar.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir