Sangat mudah untuk menggunakan jQuery dalam arsitektur MVC asp.net, dan bahkan lebih mudah lagi menggunakan jQuery untuk mengimplementasikan Ajax. Setelah membuat kerangka Asp.Net MVC, skrip jQuery telah disertakan. Untuk pengaturan lingkungan terkait, silakan merujuk ke artikel saya yang lain: Contoh Asp.Net MVC. Di sini, kita masih mengandalkan lingkungan dalam hal ini. Script jQuery sudah dapat dilihat di folder Scripts pada framework yang dihasilkan.
Kita membuat fungsi di TestModel.cs untuk mendapatkan data Json, masih menggunakan tabel Tets yang berisi dua field: Id dan Name.
//JsonDataArray public static Array GetJsonArray(String name) { Array data = null; coba { data = (dari c di testDb.test di mana c.name.Contains(name) pilih new { c.id, c.name }). ToArray(); }catch(ArgumentNullException ae) {} mengembalikan data;
Data Json, sederhananya, adalah data dalam bentuk array Key-Value. Kemudian buat pengontrol sesuai dengan opsi default. Pengontrol yang dihasilkan hanya memiliki satu metode: Indeks(). Kami membuat metode lain untuk dipanggil jQuery. Kode lengkapnya adalah sebagai berikut: JQueryController.cs. Catatan: jQuery dilarang memanggil data server secara default di MVC2.0, jadi Anda harus menambahkan izin akses pada kode: JsonRequestBehavior.AllowGet.
menggunakan Sistem;menggunakan System.Collections.Generic;menggunakan System.Linq;menggunakan System.Web;menggunakan System.Web.Mvc;menggunakan MvcWeb.Models; namespace MvcWeb.Controllers{ public class JQueryController : Controller { // // DAPATKAN: / JQuery/ publik ActionResult Index() { return View(); } public JsonResult FindByName(string nama) { return Json(TestModel.GetJsonArray(nama), JsonRequestBehavior.AllowGet);
Kemudian klik kanan pada Index() dan gunakan opsi default untuk menghasilkan tampilan. Anda dapat melihat kode yang dihasilkan di Views/JQuery: Index.aspx. Kode yang dihasilkan sangat sederhana. Kami kemudian memasukkan kode Script dan menyelesaikannya sebagai berikut:
<%@ Judul Halaman="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="Content1" ContentPlaceHolderID= "TitleContent" runat="server"> JQuery </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script src="../../Scripts/jquery -1.4.1.js" type="text/javascript"></script> <script bahasa="Javascript" type="text/javascript"> $(document).ready(function() { $('#updater ').hide(); $('#dataHead').hide(); $('#linkFind').klik(fungsi(acara) { event.preventDefault(); $('#dataHead').show( ); $('#updater').show(); $.getJSON('/JQuery/FindByName/', { nama: $('#textSearch')[0].nilai }, fungsi(data) { $( '#testList > div').remove(); $.each(data, function(i, item) { $('#testList').append('<div>' + item.id + ' ' + item. nama + '</div>'); </h2>Gunakan jQuery untuk mengimplementasikan instance Ajax</h2 > <div id="query"><%= Html.TextBox("textSearch") %> <a href="#" id="linkFind">Penelusuran</a> class ="update" id="updater"> Memuat... </span></div> <div id="dataHead" >Nama ID</div> <div id=" daftar tes "></div> </asp:Isi>
Jalankan proyek, masukkan "t" di kotak teks, tekan "Cari", dan data yang ditanyakan akan ditampilkan tanpa menyegarkan halaman, seperti yang ditunjukkan di bawah ini:
Selain itu, dalam pengembangan Ajax, Anda juga dapat menggunakan fungsi dasar Ajax $.ajax untuk debugging. Ketika terjadi kesalahan, Anda dapat mencetak informasi kesalahan. Misalnya, panggilan di atas dapat di-debug dengan kode berikut:
<skrip bahasa="javascript" type="teks/javascript"> $(dokumen).siap(fungsi() { $('#linkFind').klik(fungsi(acara) { acara.preventDefault(); var handleData = function(data) { alert("sukses:" + data); } var handleErr = function(e) { alert(e.responseText } $.ajax({ ketik: "dapatkan", url: "/Jquery/FindByName ", data: "nama=t", keberhasilan: handleData, kesalahan: handleErr }); }); }); </script>
-