Melakukan panggilan Ajax Sederhana ke pengontrol di asp.net mvc

109

Saya mencoba untuk memulai dengan panggilan ASP.NET MVC Ajax.

Pengontrol:

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

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

Melihat:

<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>

Saya hanya perlu mencetak peringatan dengan metode pengontrol mengembalikan data. Kode di atas hanya mencetak "chamara" pada pandangan saya. Peringatan tidak aktif.

MEMPERBARUI

Saya memodifikasi pengontrol saya seperti di bawah ini dan mulai bekerja. Saya tidak memiliki ide yang jelas mengapa ini berhasil sekarang. Seseorang tolong jelaskan. Parameter "a" tidak terkait. Saya menambahkannya karena saya tidak dapat menambahkan dua metode dengan nama metode dan parameter yang sama. Saya pikir ini mungkin bukan solusi tetapi berhasil

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

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

— chamara
sumber

mengembalikan string yang diformat json {"name":"chamara"}. kemudian coba baca sebagaidata['name']

— Raab

1

Hapus pustaka jQuery kedua dari tampilan. Kode Anda harus berfungsi sebagaimana mestinya. Saya pikir kesalahan skrip mungkin terjadi dan mencegah peringatan muncul.

— Terence

23

Setelah pembaruan Anda selesai,

yang pertama memanggil tindakan FirstAjax dengan permintaan HttpGet default dan membuat tampilan Html kosong. (Sebelumnya Anda tidak memilikinya)
nanti saat memuat elemen DOM dari tampilan itu, panggilan Ajax Anda diaktifkan dan menampilkan peringatan.

Sebelumnya Anda hanya mengembalikan JSON ke browser tanpa merender HTML apa pun. Sekarang ia memiliki tampilan HTML yang dirender di mana ia bisa mendapatkan Data JSON Anda.

Anda tidak dapat langsung merender JSON sebagai data biasa, bukan HTML.

— asb
sumber

52

Hapus atribut data karena Anda POSTINGbukan siapa-siapa ke server (Pengontrol Anda tidak mengharapkan parameter apa pun).

Dan dalam Metode AJAX Anda, Anda dapat menggunakan Razordan menggunakan @Url.Actiondaripada string statis:

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

Dari pembaruan Anda:

$.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
sumber

3

@ chamara - maaf, hapus HttpPost (Anda tidak memposting apa pun ke server sehingga akan menjadi atribut yang berlebihan) dan pengontrol tidak akan terkena. Hapus juga "type: POST" dalam fungsi AJAX seperti yang telah saya taburkan.

— Darren

18

Gunakan Razor untuk mengubah URL Anda secara dinamis dengan memanggil tindakan Anda seperti ini:

$.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
sumber

Parameter untuk Url.Action terbalik dalam jawaban ini, itu adalah Url.Action (actionName, controllerName)

— xd6_

1

Bukan penggemar ini, ini mendorong penggabungan tampilan dan javascript, tapi eh, nama pengguna diperiksa?

— Halter

@Halter UX meningkat secara masif saat Anda tidak memaksa pengguna untuk mengalihkan pada setiap tindakan. Dan ada banyak hal yang terjadi di sisi klien yang seharusnya tidak dipedulikan oleh sisi server.

— Kolob Canyon

@Kolobanyon kamu 100% benar. Komentar saya lebih mengacu pada rendering url dengan pisau cukur di javascript, ini erat pasangan javascript Anda dengan tampilan (cshtml). Itu jawaban yang bagus, tetapi untuk memperbaiki penggandengan yang erat, Anda mungkin dapat membuang url ke atribut data di chstml dan membacanya di javascript. Maaf bila membingungkan!

— Halter

5

Hal pertama yang tidak perlu memiliki dua versi perpustakaan jquery yang berbeda dalam satu halaman, "1.9.1" atau "2.0.0" sudah cukup untuk membuat panggilan ajax berfungsi ..

Ini kode pengontrol Anda:

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

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

Seperti inilah tampilan Anda seharusnya:

<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
sumber

5

Jika Anda hanya perlu menekan Metode C # di Panggilan Ajax Anda, Anda hanya perlu melewatkan dua jenis materi dan url jika permintaan Anda diterima maka Anda hanya perlu menentukan url saja. silakan ikuti kode di bawah ini berfungsi dengan baik.

C # Kode:

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

Kode Skrip Java jika Dapatkan Permintaan

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

Kode Java Script jika Kirim Permintaan dan juga [HttpGet] ke [HttpPost]

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

Catatan: Jika Anda FirstAjax di pengontrol yang sama di mana Pengontrol Tampilan Anda maka tidak perlu nama Pengontrol di url. Sukaurl: 'FirstAjax',

— Muhammad Asad
sumber

4

Ini untuk pertanyaan UPDATE Anda.

Karena Anda tidak dapat memiliki dua metode dengan nama dan tanda tangan yang sama, Anda harus menggunakan atribut ActionName:

MEMPERBARUI:

[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();
}

Dan silakan lihat tautan ini untuk referensi lebih lanjut tentang bagaimana metode menjadi tindakan. Referensi yang sangat bagus.

— RGR
sumber

1

Melihat;

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

Metode Pengontrol;

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

— oyenigun.dll
sumber

0

alih-alih url: serviceURL, digunakan

url: '<%= serviceURL%>',

dan apakah Anda meneruskan 2 parameter ke successFunc?

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

— swapneel
sumber

0

Tambahkan "JsonValueProviderFactory" di global.asax:

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

— Yashh
sumber

apa itu JsonValueProviderFactory?

— Kiquenet