MVC Ajax POST – Response Obje Kullanımı

By H.Burak Karadağ Last updated Eki 14, 2019

Hepimizin bildiği gibi web uygulamalarının çalışma mantığı Request – Response ilişkisine dayanmaktadır. İstemci üzerinden gönderilen istek sunucuya düşer, sunucuda işlemler gerçekleştirildikten sonra istemciyi yapılan işlemden haberdar etmek adına cevap gelir. Örneğin güncelleme işleminden sonra sunucu üzerinde değişen verinin kullanıcıya gösterilmesi için sayfanın yenilenip güncel verinin ekrana getirilmesi gerekmektedir. Fakat sayfa yenilenmesi her zaman istenilen bir durum değildir. Bazı durumlarda sayfanın belirli bir bölümünü yenilemek isteyebiliriz, bu durumda sayfanın veya PartialView’ın yeniden yüklenmesi istenmeyen durumdur. Bu istenmeyen durumdan bizi kurtaran Ajax’ı inceleyelim. Ajax , sayfayı yenilemeden içerik değiştirmemizi sağlayan JQuery kütüphanesidir. Get ve Post olarak kullanımları mevcuttur. Bu makalemizde MVC üzerinde Ajax kullanımını örnekleyeceğiz. JSonResult’ların client-side üzerinde daha anlamlı hale gelmesi ve işlenebilmesi için standart bir modelimiz olacak.

Bir web uygulamasında Ajax ‘ın öncelikli kullanım yerleri CRUD işlemleri (Select ,Insert, Update, Delete) ve PartialView’ların çağrılması diyebiliriz. Bu işlemlerin sonucunda client tarafını yapılan işlemden bazı dönüşlerimizin olması gerekir. Basitçe bir response objesi tasarlayacak olursak;

İşlem başarılı mı ?
Gerçekleştirilen işlemin durumunu belirlediğimiz bir değer olmalı.
İşlem sonucunda bilgilendirme mesajı
Sunucu taraflı işimiz bittiğinde kullanıcıyı bilgilendirmeliyiz.
Veri dönüşümüz var mı ?
Bazı işlemlerin sonucunda geriye veri dönmemiz gerekir. Örneğin sunucu taraflı bir validasyon işleminde hatalar ekranda listelenmek isteniyorsa metot veri dönüşü yapabilir.

Metot dönüşlerimizi yapacağımız Model’ i oluşturalım. Yukarıda belirttiğim kriterleri karşılayacak şekilde ResultType , Message , Data değişkenlerinden oluşan OperationResult modeli aşağıdaki gibidir.



    public class OperationResult
    {
        public OperationResultType ResultType { get; set; }

        public string Message { get; set; }

        public object Data { get; set; }

    }

public class OperationResult

{

public OperationResultType ResultType { get; set; }

public string Message { get; set; }

public object Data { get; set; }

}

Dönüş tipimizi Enum değer ile ifade edeceğiz.



  public enum OperationResultType
    {
        Success = 1,
        Fail = 2,
        Warn = 3
    }

public enum OperationResultType

{

Success = 1,

Fail = 2,

Warn = 3

}

ViewModel’limizi oluşturalım



    public class AuthorModel
    {               
        public string Name { get; set; }

        public string LastName { get; set; }
        
    }

public class AuthorModel

{

public string Name { get; set; }

public string LastName { get; set; }

}

Ajax Şemasını tanıyalım



 $.ajax({
            // Request' in yapılacak URL bilgisi
            url: 'Home/Save', 
            // Request için gönderilen parametreler Json tipinde gönderiliyor
            data: {
                'Name': $("#Name").val(),
                'LastName': $("#LastName").val()
            },
            // Ajax işlem tipi belirleniyor GET & POST
            type: "post",
            // Request'in browser üzerinden cache'lenecek mi 
            cache: false,
            // AjaxRequest başarılı şekilde sonuçlanırsa
            success: function (result) {
                if (result.ResultType == '@OperationResultType.Success')
                {
                    alert(result.Message);
                }
                else 
                {
                    alert(result.Message);
                }
            },
            // Ajax Request' de hata alınırsa
            error: function (xhr, ajaxOptions, thrownError) {
                
            }
        });

$.ajax({

// Request' in yapılacak URL bilgisi

url: 'Home/Save',

// Request için gönderilen parametreler Json tipinde gönderiliyor

data: {

'Name': $("#Name").val(),

'LastName': $("#LastName").val()

// Ajax işlem tipi belirleniyor GET & POST

type: "post",

// Request'in browser üzerinden cache'lenecek mi

cache: false,

// AjaxRequest başarılı şekilde sonuçlanırsa

success: function (result) {

if (result.ResultType == '@OperationResultType.Success')

{

alert(result.Message);

}

else

{

alert(result.Message);

}

// Ajax Request' de hata alınırsa

error: function (xhr, ajaxOptions, thrownError) {

}

});

cshtml



@model AuthorModel

@{
    ViewBag.Title = "Index";
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>

<h2>Index</h2>

<div>
    <div>
        @Html.Label("Name :")
        @Html.TextBoxFor(p=>p.Name)
    </div>
    <div>
        @Html.Label("last Name :")
        @Html.TextBoxFor(p => p.LastName)
    </div>   
    <div style="clear:both">
        <button type="button" id="btnSave">Save</button>
    </div>

</div>

<script type="text/javascript">

    $("#btnSave").click(function () {

        $.ajax({
            url: 'Home/Save',
            data: {
                'Name': $("#Name").val(),
                'LastName': $("#LastName").val()
            },
            type: "post",
            cache: false,
            success: function (result) {
                if (result.ResultType == '@OperationResultType.Success')
                {
                    alert(result.Message);
                }
                else 
                {
                    alert(result.Message);
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                
            }
        });
    });
    
</script>

@model AuthorModel

ViewBag.Title = "Index";

}

integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<h2>Index</h2>

<div>

@Html.Label("Name :")

@Html.TextBoxFor(p=>p.Name)

</div>

<div>

@Html.Label("last Name :")

@Html.TextBoxFor(p => p.LastName)

</div>

</div>

$("#btnSave").click(function () {

$.ajax({

url: 'Home/Save',

data: {

'Name': $("#Name").val(),

'LastName': $("#LastName").val()

type: "post",

cache: false,

success: function (result) {

if (result.ResultType == '@OperationResultType.Success')

{

alert(result.Message);

}

else

{

alert(result.Message);

}

error: function (xhr, ajaxOptions, thrownError) {

}

});

</script>

Controller



 public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public JsonResult Save(AuthorModel author)
        {

            OperationResult opResult = new OperationResult();

            try
            {
                // kayıt işlemi yap

                opResult.ResultType = OperationResultType.Success;
                opResult.Message = "İşlem Başarılı bir şekilde tamamlandı";

            }
            catch (Exception)
            {
                opResult.ResultType = OperationResultType.Fail;
                opResult.Message = "Bir hata oluştu.";
            }

            return Json(opResult, JsonRequestBehavior.AllowGet);
        }
    }

public class HomeController : Controller

{

[HttpGet]

public ActionResult Index()

{

return View();

}

[HttpPost]

public JsonResult Save(AuthorModel author)

{

OperationResult opResult = new OperationResult();

try

{

// kayıt işlemi yap

opResult.ResultType = OperationResultType.Success;

opResult.Message = "İşlem Başarılı bir şekilde tamamlandı";

}

catch (Exception)

{

opResult.ResultType = OperationResultType.Fail;

opResult.Message = "Bir hata oluştu.";

}

return Json(opResult, JsonRequestBehavior.AllowGet);

}

Konunun özetine bakacak olursak ,
Ajax ile web sayfalarımız üzerinden server ‘ a POST işlemi gerçekleştirdik. Server taraflı dönüşümüz için bir standart belirledik.Dikkat ettiyseniz Controller metodundan geriye json obje dönüşü yapıyoruz ve script tarafında dönüşümüzü yine obje olarak ele alıyoruz. Bu sayede karmaşıklığı azaltıp okunabilirlik ve yönetilebilirliği arttırmış olduk.

Ajax mvc