Очень легко использовать jQuery в архитектуре MVC asp.net, а еще проще использовать jQuery для реализации Ajax. После создания платформы Asp.Net MVC был включен сценарий jQuery. Соответствующие настройки среды см. в другой моей статье: Пример Asp.Net MVC. Здесь мы по-прежнему полагаемся на среду в экземпляре. Сценарий jQuery уже можно увидеть в папке Scripts созданной платформы.
Мы создаем функцию в TestModel.cs для получения данных Json, по-прежнему используя таблицу Tets, содержащую два поля: Id и Name.
//JsonDataArray public static Array GetJsonArray(String name) { Array data = null; try {data = (из c в testDb.test, где c.name.Contains(name) выберите новый {c.id, c.name}). ToArray(); }catch(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 { public class JQueryController : Controller { // // GET: / JQuery/ public ActionResult Index() { return View(); } public JsonResult FindByName (имя строки) { return Json (TestModel.GetJsonArray (name), JsonRequestBehavior.AllowGet } }};
Затем щелкните правой кнопкой мыши Index() и используйте параметры по умолчанию для создания представления. Вы можете увидеть сгенерированный код в Views/JQuery: Index.aspx. Затем мы вставляем код сценария и завершаем его. следует:
<%@ Page Title="" 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) { event.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" >ID Имя</div> <div id=" testList "></div> </asp:Content>
Запустите проект, введите «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({ type: "get", url: "/Jquery/FindByName); ", данные: "name=t", успех: handleData, ошибка: handleErr }); }); }); </script>
-