Asp.net mvc'de denetleyiciye basit bir Ajax çağrısı yapma

109

ASP.NET MVC Ajax çağrılarına başlamaya çalışıyorum.

Denetleyici:

public class AjaxTestController : Controller
{
    //
    // GET: /AjaxTest/
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }   
}

Görünüm:

<head runat="server">
    <title>FirstAjax</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var serviceURL = '/AjaxTest/FirstAjax';

            $.ajax({
                type: "POST",
                url: serviceURL,
                data: param = "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: successFunc,
                error: errorFunc
            });

            function successFunc(data, status) {     
                alert(data);
            }

            function errorFunc() {
                alert('error');
            }
        });
    </script>
</head>

Verileri döndüren denetleyici yöntemiyle bir uyarı yazdırmam gerekiyor. Yukarıdaki kod sadece benim görüşüme "chamara" yazdırın. Bir alarm ateşlemiyor.

GÜNCELLEME

Denetleyicimi aşağıdaki gibi değiştirdim ve çalışmaya başladı. Şimdi neden işe yaradığına dair net bir fikrim yok. Lütfen biri açıklasın. "A" parametresi ilişkili değil ekledim çünkü aynı metot adı ve parametreleri ile iki metot ekleyemiyorum. Bunun çözüm olmayabileceğini düşünüyorum ama çalışıyor

public class AjaxTestController : Controller
    {
        //
        // GET: /AjaxTest/
        [HttpGet]
        public ActionResult FirstAjax()
        {
            return View();
        }

        [HttpPost]
        public ActionResult FirstAjax(string a)
        {
            return Json("chamara", JsonRequestBehavior.AllowGet);
        }
    }

— Chamara
kaynak

json biçimli dizeyi döndür {"name":"chamara"}. daha sonra şu şekilde okumaya çalışındata['name']

— Raab

1

Görünümden ikinci jQuery kitaplığını kaldırın. Kodunuz olduğu gibi çalışmalıdır. Sanırım bir komut dosyası hatası oluşuyor ve uyarının görünmesini engelliyor olabilir.

— Terence

23

Yaptığınız güncellemeden sonra,

ilk olarak FirstAjax eylemini varsayılan HttpGet isteğiyle çağırır ve boş Html görünümünü oluşturur. (Daha önce sahip değildin)
daha sonra bu görünümün DOM öğelerinin yüklenmesi üzerine Ajax çağrınız ateşlenir ve uyarı görüntüler.

Daha önce JSON'u tarayıcıya HTML oluşturmadan döndürüyordunuz. Artık JSON Verilerinizi alabileceği bir HTML görünümü var.

JSON'u HTML değil düz verilerini doğrudan işleyemezsiniz.

— asb
kaynak

52

Veri özniteliğini değilken kaldırın POSTINGSunucu şey (Denetleyiciniz herhangi bir parametre beklemiyor).

Ve AJAX Metodunuzda statik bir dize yerine kullanabilir Razorve kullanabilirsiniz @Url.Action:

$.ajax({
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: successFunc,
    error: errorFunc
});

Güncellemenizden:

$.ajax({
    type: "POST",
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    data: { a: "testing" },
    dataType: "json",
    success: function() { alert('Success'); },
    error: errorFunc
});

— Darren
kaynak

3

@chamara - üzgünüm, HttpPost'u kaldırın (sunucuya herhangi bir şey göndermiyorsunuz, böylece gereksiz bir öznitelik olacak) ve denetleyici vurulmayacak. Ayrıca AJAX işlevindeki "type: POST" u size eklediğim gibi kaldırın.

— Darren

18

Eyleminizi şöyle çağırarak URL'nizi dinamik olarak değiştirmek için bir Razor kullanın:

$.ajax({
    type: "POST",
    url: '@Url.Action("ActionName", "ControllerName")',
    contentType: "application/json; charset=utf-8",
    data: { data: "yourdata" },
    dataType: "json",
    success: function(recData) { alert('Success'); },
    error: function() { alert('A error'); }
});

— gdmanandamohon
kaynak

Url.Action için parametreler bu cevapta geriye dönüktür, bu Url.Action (actionName, controllerName)

— xd6_

1

Bunun hayranı değil, görünüm ve javascript'in birleştirilmesini teşvik ediyor, ama uh, kullanıcı adı kontrol ediyor?

— Halter

@Halter UX, kullanıcıyı her eylemde yeniden yönlendirmeye zorlamadığınızda büyük ölçüde gelişir. Ve istemci tarafında sunucu tarafının umursamaması gereken birçok şey var.

— Kolob Canyon

@KolobCanyon% 100 haklısın. Yorumum daha çok javascript'te javascript ile url'nin oluşturulmasına atıfta bulunuyor, bu javascript'inizi görünümle (cshtml) sıkı bir şekilde birleştiriyor. Bu iyi bir cevap, ancak sıkı bağlantıyı düzeltmek için url'yi chstml'deki bir veri özniteliğine atabilir ve javascript'te okuyabilirsiniz. Karışıklık için özür dilerim!

— Halter

5

İlk olarak, bir sayfada jquery kitaplıklarının iki farklı sürümüne gerek yoktur, ajax çağrılarının çalışması için "1.9.1" veya "2.0.0" yeterlidir.

İşte denetleyici kodunuz:

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FirstAjax(string a)
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }

Görüşünüz şöyle görünmeli:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    var a = "Test";
    $.ajax({
        url: "../../Home/FirstAjax",
        type: "GET",
        data: { a : a },
        success: function (response) {
            alert(response);
        },
        error: function (response) {
            alert(response);
        }
    });
});
</script>

— Lokesh_Ram
kaynak

5

Ajax Çağrınızda sadece C # Yöntemi'ne basmanız gerekiyorsa, yalnızca iki konu türünü ve url'yi iletmeniz gerekir, eğer isteğiniz alınırsa, yalnızca url'yi belirtmeniz gerekir. lütfen aşağıdaki kodu takip edin, sorunsuz çalışıyor.

C # Kodu:

    [HttpGet]
    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }

İstek Alınırsa Java Komut Dosyası Kodu

    $.ajax({
        url: 'home/FirstAjax',
        success: function(responce){ alert(responce.data)},
        error: function(responce){ alert(responce.data)}
    });

İstek Gönder ise Java Komut Dosyası Kodu ve ayrıca [HttpGet] [HttpPost] 'a

        $.ajax({
            url: 'home/FirstAjax',
            type:'POST',
            success: function(responce){ alert(responce)},
            error: function(responce){ alert(responce)}
        });

Not: FirstAjax, View Controller'ınızın bulunduğu aynı kontrol cihazındaysa, url'de Controller adına gerek yoktur. sevmekurl: 'FirstAjax',

— Muhammed Esed
kaynak

4

UPDATE sorunuz için.

Aynı ada ve imzaya sahip iki yönteme sahip olamayacağınız için ActionName özelliğini kullanmanız gerekir:

GÜNCELLEME:

[HttpGet]
public ActionResult FirstAjax()
{
    Some Code--Some Code---Some Code
    return View();
}

[HttpPost]
[ActionName("FirstAjax")]
public ActionResult FirstAjaxPost()
{
    Some Code--Some Code---Some Code
    return View();
}

Ve bir yöntemin nasıl bir eyleme dönüştüğüne dair daha fazla referans için lütfen bu bağlantıya bakın . Yine de çok iyi referans.

— RGR
kaynak

1

Görünüm;

 $.ajax({
        type: 'GET',
        cache: false,
        url: '/Login/Method',
        dataType: 'json',
        data: {  },
        error: function () {
        },
        success: function (result) {
            alert("success")
        }
    });

Kontrolör Yöntemi;

 public JsonResult Method()
 {
   return Json(new JsonResult()
      {
         Data = "Result"
      }, JsonRequestBehavior.AllowGet);
 }

— oyenigun
kaynak

0

url: serviceURL, kullanmak yerine

url: '<%= serviceURL%>',

ve successFunc'a 2 parametre aktarıyor musunuz?

function successFunc(data)
 {
   alert(data);
 }

— swapneel
kaynak

0

Global.asax içine "JsonValueProviderFactory" ekleyin:

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}

— Yashh
kaynak

JsonValueProviderFactory nedir?

— Kiquenet