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…