การใช้ jQuery ในสถาปัตยกรรม MVC ของ asp.net นั้นง่ายมาก และการใช้ jQuery เพื่อนำ Ajax ไปใช้ยังง่ายกว่าอีกด้วย หลังจากสร้างเฟรมเวิร์ก Asp.Net MVC แล้ว สคริปต์ jQuery ก็ถูกรวมไว้ด้วย สำหรับการตั้งค่าสภาพแวดล้อมที่เกี่ยวข้อง โปรดดูบทความอื่น ๆ ของฉัน: ตัวอย่าง Asp.Net MVC ในกรณีนี้ เรายังคงพึ่งพาสภาพแวดล้อมในอินสแตนซ์ สคริปต์ jQuery สามารถมองเห็นได้ในโฟลเดอร์สคริปต์ในกรอบงานที่สร้างขึ้น
เราสร้างฟังก์ชันใน TestModel.cs เพื่อรับข้อมูล Json โดยยังคงใช้ตาราง Tets ซึ่งมีสองฟิลด์: Id และ Name
//JsonDataArray สาธารณะอาร์เรย์คงที่ GetJsonArray (ชื่อสตริง) { ข้อมูลอาร์เรย์ = null; ลอง { data = (จาก c ใน testDb.test โดยที่ c.name.Contains (ชื่อ) เลือกใหม่ { c.id, c.name }) ToArray(); }จับ(ArgumentNullException ae) {} ส่งคืนข้อมูล }
ข้อมูล Json พูดง่ายๆ คือข้อมูลในรูปแบบของอาร์เรย์คีย์-ค่า จากนั้นสร้างคอนโทรลเลอร์ตามตัวเลือกเริ่มต้น คอนโทรลเลอร์ที่สร้างขึ้นมีเพียงวิธีเดียวเท่านั้น: Index() เราสร้างวิธีการอื่นเพื่อให้ jQuery โทร รหัสที่เสร็จสมบูรณ์มีดังนี้: JQueryController.cs หมายเหตุ: jQuery ถูกห้ามไม่ให้เรียกข้อมูลเซิร์ฟเวอร์ตามค่าเริ่มต้นใน MVC2.0 ดังนั้นคุณต้องเพิ่มสิทธิ์การเข้าถึงในโค้ด: JsonRequestBehavior.AllowGet
การใช้ระบบ; การใช้ System.Collections.Generic; การใช้ System.Linq; การใช้ System.Web; การใช้ System.Web.Mvc; การใช้ MvcWeb.Models; เนมสเปซ MvcWeb.Controllers { คลาสสาธารณะ JQueryController : ตัวควบคุม { // // GET: / JQuery/ ดัชนี ActionResult สาธารณะ () { return View (); } สาธารณะ JsonResult FindByName (ชื่อสตริง) { return Json (TestModel.GetJsonArray (ชื่อ), JsonRequestBehavior.AllowGet);
จากนั้นคลิกขวาที่ Index() และใช้ตัวเลือกเริ่มต้นเพื่อสร้างมุมมอง คุณสามารถดูโค้ดที่สร้างขึ้นใน Views/JQuery: Index.aspx โค้ดที่สร้างขึ้นนั้นง่ายมาก จากนั้นเราจะแทรกโค้ดสคริปต์และดำเนินการให้เป็น ดังต่อไปนี้:
<%@ ชื่อหน้า = "" ภาษา = "C#" MasterPageFile = "~/Views/Shared/Site.Master" สืบทอด = "System.Web.Mvc.ViewPage" %> <asp:Content ID = "Content1" ContentPlaceHolderID= "TitleContent" runat="เซิร์ฟเวอร์"> JQuery </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script src="../../Scripts/jquery -1.4.1.js" type="text/javascript"></script> <script language="Javascript" type="text/javascript"> $(document).ready(function() { $('#updater ').hide(); $('#dataHead').hide(); $('#linkFind').click(function(event) { event.preventDefault(); $('#dataHead').show( ); $('#updater').show(); $.getJSON('/JQuery/FindByName/', { ชื่อ: $('#textSearch')[0].value }, function(data) { $( '#testList > div').remove(); $.each(data, function(i, item) { $('#testList').append('<div>' + item.id + ' ' + item. name + '</div>'); $('#updater').hide(); }); </script> <h2>ใช้ jQuery เพื่อใช้งาน Ajax > <div id="query"><%= Html.TextBox("textSearch") %> <a href="#" id="linkFind">ค้นหา</a> class ="update" id="updater"> กำลังโหลด... </span></div> <div id="dataHead" >ชื่อ ID</div> <div id=" รายการทดสอบ "></div> </asp:เนื้อหา>
เรียกใช้โครงการ ป้อน "t" ในกล่องข้อความ กด "ค้นหา" และข้อมูลที่สอบถามจะปรากฏขึ้นโดยไม่ต้องรีเฟรชหน้า ดังที่แสดงด้านล่าง:
นอกจากนี้ ในการพัฒนา Ajax คุณยังสามารถใช้ฟังก์ชัน Ajax พื้นฐาน $.ajax สำหรับการดีบักได้ เมื่อเกิดข้อผิดพลาด คุณสามารถพิมพ์ข้อมูลข้อผิดพลาดได้ ตัวอย่างเช่น การเรียกข้างต้นสามารถดีบักได้ด้วยรหัสต่อไปนี้:
<script language="javascript" type="text/javascript"> $(document).ready(function() { $('#linkFind').click(function(event) { event.preventDefault(); var handleData = function(data) { alert("success:" + data); } var handleErr = function(e) { alert(e.responseText); } $.ajax({ ประเภท: "get", url: "/Jquery/FindByName ", ข้อมูล: "name=t", ความสำเร็จ: handleData, ข้อผิดพลาด: handleErr }); }); }); </script>
-