من السهل جدًا استخدام jQuery في بنية MVC لـ asp.net، كما أنه من الأسهل استخدام jQuery لتنفيذ Ajax. بعد إنشاء إطار عمل Asp.Net MVC، تم تضمين البرنامج النصي jQuery للتعرف على إعدادات البيئة ذات الصلة، يرجى الرجوع إلى مقالتي الأخرى: مثال Asp.Net MVC. وهنا، ما زلنا نعتمد على البيئة في المثيل. يمكن بالفعل رؤية البرنامج النصي jQuery في مجلد البرامج النصية في الإطار الذي تم إنشاؤه.
قمنا بإنشاء دالة في TestModel.cs للحصول على بيانات Json، مع الاستمرار في استخدام جدول Tets، الذي يحتوي على حقلين: المعرف والاسم.
//JsonDataArray public static Array GetJsonArray(String name) { Array data = null; حاول { data = (من c في testDb.test حيث c.name.Contains(name) حدد new { c.id, c.name }). ToArray(); }catch(ArgumentNullException ae) {} إرجاع البيانات };
بيانات Json، ببساطة، هي بيانات في شكل مصفوفة ذات قيمة أساسية. ثم قم بإنشاء وحدة تحكم وفقًا للخيارات الافتراضية. وحدة التحكم التي تم إنشاؤها لها طريقة واحدة فقط: Index(). نقوم بإنشاء طريقة أخرى للاتصال بـ jQuery. الكود المكتمل هو كما يلي: JQueryController.cs. ملاحظة: يُمنع jQuery من استدعاء بيانات الخادم افتراضيًا في MVC2.0، لذلك يجب عليك إضافة أذونات الوصول في الكود: JsonRequestBehavior.AllowGet.
باستخدام System;باستخدام System.Collections.Generic;باستخدام System.Linq;باستخدام System.Web;باستخدام System.Web.Mvc;باستخدام MvcWeb.Models; JQuery/ public ActionResult Index() { return View(); } public JsonResult FindByName(string name) { return Json(TestModel.GetJsonArray(name), JsonRequestBehavior.AllowGet);
ثم انقر بزر الماوس الأيمن على Index() واستخدم الخيارات الافتراضية لإنشاء طريقة عرض. يمكنك رؤية الكود الذي تم إنشاؤه في Views/JQuery: Index.aspx. ثم نقوم بإدخال كود البرنامج النصي وإكماله يلي:
<%@ عنوان الصفحة = "" 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 language="Javascript" type="text/javascript"> $(document).ready(function() { $('#updater) ').hide(); $('#dataHead').hide(); $('#linkFind').click(function(event) { events.preventDefault(); $('#dataHead').show( ); $('#updater').show(); $.getJSON('/JQuery/FindByName/', { name: $('#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</h2 > <div id="query"><%= Html.TextBox("textSearch") %> <a href="#" id="linkFind">بحث</a> class ="update" id="updater"> جارٍ التحميل... </span></div> <div id="dataHead" >اسم المعرف</div> <div id=" قائمة الاختبار "></div> </asp:Content>
قم بتشغيل المشروع، أدخل "t" في مربع النص، ثم اضغط على "بحث"، وسيتم عرض البيانات التي تم الاستعلام عنها دون تحديث الصفحة، كما هو موضح أدناه:
بالإضافة إلى ذلك، في تطوير Ajax، يمكنك أيضًا استخدام وظيفة Ajax الأساسية $.ajax لتصحيح الأخطاء. عند حدوث خطأ، يمكنك طباعة معلومات الخطأ. على سبيل المثال، يمكن تصحيح الاستدعاء أعلاه باستخدام الكود التالي:
<script language="javascript" type="text/javascript"> $(document).ready(function() { $('#linkFind').click(function(event) { events.preventDefault(); var HandleData = function(data) { تنبيه ("success:" + data } var HandleErr = function(e) { تنبيه (e.responseText } $.ajax({ type: "get"، url: "/Jquery/FindByName)؛ "، البيانات: "name=t"، النجاح: HandleData، الخطأ: HandleErr }); }); }); </script>
-