Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

Asp.NET MVC – PartialView Döndürüp Değeri Ajax İle Okuma

Asp.NET MVC mimarisiyle çalıştığım bir proje üzerinde yaşadığım basit bir sıkıntıdan kaynaklanan ama çözümü saatlerimi alan bir hata üzerine sizlere bu yazıyı yazmaya karar verdim.Anlayacağınız üzere sizlere konuyla alakalı olası bir hata gösterip, aman aman bir çözüm sunmayacağım.Bu yazımızda Asp.NET MVC mimarisinde, server side tarafında veri işlemlerimizi gerçekleştirdikten sonra geriye PartialView değeri döndürüp, bu değeri Ajax ile okuma işlemi üzerine sadece bir örnek yapıp konuyu kapatacağım.Tabi ki de benim saflık yaparak saatleri harcadığım durumuda sizlere göstereceğim 🙂

Hemen geriye döndürüp, Ajax ile okuyacağımız PartialView dosyamızın içeriğini oluşturalım.

---- _IslemYapPartial.cshtml ----
<h1>İşlem Gerçekleştirildi</h1>

Bu kadar 🙂 Nihayetinde buda bir içeriktir 🙂
Şimdide “Home(Controller).cs” isimli Controller sınıfımızın “Index” Action’ının .cshtml uzantılı dosyasının içeriğini oluşturalım.

<input type="submit" id="btnIslemYap" value="İşlem Yap" />
<br />
<div id="divAlan"></div>

Butona tıklandığı zaman Ajax ile serverı tetikleyip PartialView’i değer olarak geriye döndüreceğiz ve gelen bu değeri “divAlan” id değerine sahip divin içine gömeceğiz.

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnIslemYap").click(function () {
            $.ajax({
                url: '@Url.Action("IslemYap","Home")',
                type: 'POST',
                dataType: 'html',
                success: function (data) {
                    $("#divAlan").html(data);
                },
                error: function () {
                    alert("Hata alındı.");
                }
            });
        });
    });
</script>

“Home(Controller).cs” isimli sınıfta bulunan ve Ajax ile tetiklenecek olan “IslemYap” ismini verdiğimiz Action metodun yapısıda aşağıdaki gibi olacaktır.

        [HttpPost]
        public ActionResult IslemYap()
        {
            return PartialView("~/Views/Home/_IslemYapPartial.cshtml");
        }

Velhasıl bu şekilde yapılan çalışma neticesinde butona tıkladığımız zaman Ajax ile serverımız tetiklenip PartialView geriye dönecek ve ilgili veri belirtilen alana basılacaktır.

Benim hata yaptığım yeri merak ederseniz eğer yukarıdaki Ajax komutlarının yaptığım hatalı halini aşağıya alalım…

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnIslemYap").click(function () {
            $.ajax({
                url: '@Url.Action("IslemYap","Home")',
                type: 'POST',
                dataType: 'json',
                success: function (data) {
                    $("#divAlan").html(data);
                },
                error: function () {
                    alert("Hata alındı.");
                }
            });
        });
    });
</script>

Yukarıda “dataType” parametresine dikkat ederseniz eğer ‘json’ değerini vermişim.Lakin ben PartialView geriye döndürmekteyim.Yani gelecek verinin tipini, html yapı yerine json veri yapısı olarak belirlemişim.Eee json verisi geriye döndürmediğimize göre doğal olarak projede çalışma yaptığım alanla ilgili patlak verdi.

Örneğin bu şekilde projemizi denersek error bloğuna düşeceğiz.

Tabi Ajax komut ve parametrelerini seri bir şekilde girip, alınan hatayada doğru düzgün bakmadan üşengeçlik taslarsanız benim gibi böyle basit bir komut hatası üzerine saatlerce uğraşmak zorunda kalabilirsiniz 🙂 İbret olsun.

Hepinize iyi çalışmalar diliyorum…
Görüşmek üzere…

Bunlar da hoşunuza gidebilir...

14 Cevaplar

  1. Ceyhun Sözer dedi ki:

    Merhaba, bu süper birşeydi, bana bir level atlattı resmen 🙂 Anlatım ve paylaşım için çok teşekkür ederim.
    Ufak bir sorunum var size danışmak istedim. PartialView e bilgileri getiriorm cok güzel ama normal sayfalarımda yaptıgım gibi ViewBag lerimi okuyamıorm. benmi bi hata yapıyorum. Yoksa mümkün deilmi?

    Yardımcı olaiblirseniz sevinirim.

    İyi Çalışmalar

  2. eski kafa dedi ki:

    Çeşitli konular için bir çok blog inceledim ama bu mvc konusunda açık ara önde eline sağlık.
    Devamını bekliyoruz çok iyi gidiyor.

  3. Nariman dedi ki:

    Emeginize saglik Hocam cox yararimiza deydi.

  4. gülsüm dedi ki:

    bazı bilgiler insana ilaç gibi gelir TEŞEKKÜR EDERİZZ… Emeğinize yüreğinize sağlık. Başarılarınızın devamını dilerim.

  5. Emir Sen dedi ki:

    Tecrübenizi paylaştığınız için çok teşekkür ederim. Sorunum sayenizde çözüldü.

  6. Fatih dedi ki:

    Merhaba Gencay Bey, benim bu isleme benzer bir sorum var. Controller deki bir veriyi nasil partial view ‘e tasiyabilirim?

    • Gençay dedi ki:

      Merhaba,

      Controller’da ki veriyi view’e gönderdiğiniz de o view’de kullanılan bir partial view varsa eğer otomatik ona da gönderilmiş olacaktır. Veya controller’dan veri taşıma kontrollerinden herhangi birini(ViewBag, ViewData ya da TempData) kullanırsanız yine ilgili view’de kullanılan partial view’e o kontrolü çağırıp veriyi elde edebilirsiniz.

      Misal;
      1. Örnek:
      Controller

              public IActionResult Index()
              {
                  ExampleModel model = new() { Data = "Example" };
                  return View(model);
              }
      

      Index View

      <div class="text-center">
          <h1 class="display-4">Welcome</h1>
          <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
      </div>
      
      <partial name="./PartialViews/ExamplePartial"></partial>
      

      Example Partial View

      @model ExampleModel
      
      <h6>@Model.Data</h6> 
      

      2. Örnek:
      Controller

              public IActionResult Index()
              {
                  ViewBag.Data = new ExampleModel() { Data = "Example" };
                  ViewData["Data"] = new ExampleModel() { Data = "Example" };
                  TempData["Data"] = new ExampleModel() { Data = "Example" };
      
                  return View();
              }
      

      Index View

      <div class="text-center">
          <h1 class="display-4">Welcome</h1>
          <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
      </div>
      
      <partial name="./PartialViews/ExamplePartial"></partial>
      

      Example Partial View

      <h6>@((ViewBag.Data as ExampleModel).Data)</h6>
      <h6>@((ViewData["Data"] as ExampleModel).Data)</h6>
      <h6>@((TempData["Data"] as ExampleModel).Data)</h6>
      

      Kolay gelsin…

  7. nefise özşahin vurur dedi ki:

    Hocam emeğinize sağlık, küçük bir katkı yapmak istedim

            [HttpPost]
            public ActionResult IslemYap()
            {
                ViewBag.ad = "nefise";
                return PartialView("~/Views/HIDetay/_DenemePartial.cshtml");
            }
    

    şeklinde bir viewbag tanımladım
    partialview içinde de şu şekilde yazdım

    İşlem Gerçekleştirildi
    @ViewBag.ad
    

    sonuçta vievnag’deki data “nefise” ekranda göründü.
    Paylaşmak istedim

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir