Es ist sehr einfach, jQuery in der MVC-Architektur von asp.net zu verwenden, und es ist noch einfacher, jQuery zum Implementieren von Ajax zu verwenden. Nach der Generierung des Asp.Net MVC-Frameworks wurde das jQuery-Skript eingefügt. Informationen zu zugehörigen Umgebungseinstellungen finden Sie in meinem anderen Artikel: Asp.Net MVC-Beispiel. Hier verlassen wir uns immer noch auf die Umgebung in der Instanz. Das jQuery-Skript ist bereits im Ordner „Scripts“ im generierten Framework zu sehen.
Wir erstellen eine Funktion in TestModel.cs, um JSON-Daten abzurufen, wobei wir weiterhin die Tets-Tabelle verwenden, die zwei Felder enthält: Id und Name.
//JsonDataArray öffentliches statisches Array GetJsonArray(String name) { Array data = null; try { data = (from c in testDb.test where c.name.Contains(name) select new { c.id, c.name }). ToArray(); }catch(ArgumentNullException ae) {} return data }
Json-Daten sind, einfach ausgedrückt, Daten in Form eines Schlüsselwert-Arrays. Erstellen Sie dann einen Controller gemäß den Standardoptionen. Der generierte Controller verfügt nur über eine Methode: Index(). Wir erstellen eine weitere Methode zum Aufrufen von jQuery. Der fertige Code lautet wie folgt: JQueryController.cs. Hinweis: In MVC2.0 ist es jQuery standardmäßig untersagt, Serverdaten aufzurufen. Sie müssen daher Zugriffsberechtigungen im Code hinzufügen: JsonRequestBehavior.AllowGet.
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using MvcWeb.Models; namespace MvcWeb.Controllers{ public class JQueryController : Controller { // // GET: / JQuery/ public ActionResult Index() { return View(); } public JsonResult FindByName(string name) { return Json(TestModel.GetJsonArray(name), JsonRequestBehavior.AllowGet);
Klicken Sie dann mit der rechten Maustaste auf Index() und verwenden Sie die Standardoptionen, um eine Ansicht zu erstellen. Sie können den generierten Code in Views/JQuery sehen. Der generierte Code ist dann sehr einfach folgt:
<%@ 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( }); > <div id="query"><%= Html.TextBox("textSearch") %> <a href="#" id="linkFind">Suchen</a> class ="update" id="updater"> Laden... </span></div> <div id="dataHead" >ID-Name</div> <div id=" testList "></div> </asp:Content>
Führen Sie das Projekt aus, geben Sie „t“ in das Textfeld ein, klicken Sie auf „Suchen“ und die abgefragten Daten werden angezeigt, ohne die Seite zu aktualisieren, wie unten gezeigt:
Darüber hinaus können Sie in der Ajax-Entwicklung auch die grundlegende Ajax-Funktion $.ajax zum Debuggen verwenden. Wenn ein Fehler auftritt, können Sie Fehlerinformationen drucken. Der obige Aufruf kann beispielsweise mit dem folgenden Code debuggt werden:
<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 ", Daten: "name=t", Erfolg: handleData, Fehler: handleErr }); }); }); </script>
-