Implémentez facilement Ajax avec jQuery

Auteur：Eve Cole Date de mise à jour：2010-08-16 18:28:27

Il est très simple d'utiliser jQuery dans l'architecture MVC d'asp.net, et il est encore plus simple d'utiliser jQuery pour implémenter Ajax. Après avoir généré le framework Asp.Net MVC, le script jQuery a été inclus Pour les paramètres d'environnement associés, veuillez vous référer à mon autre article : Exemple Asp.Net MVC. Ici, nous nous appuyons toujours sur l'environnement dans l'instance. Le script jQuery est déjà visible dans le dossier Scripts du framework généré.

Nous créons une fonction dans TestModel.cs pour obtenir des données Json, toujours en utilisant la table Tets, qui contient deux champs : Id et Name.

//JsonDataArray public static Array GetJsonArray(String name) { Array data = null; try { data = (à partir de c dans testDb.test où c.name.Contains(name) sélectionnez new { c.id, c.name }). ToArray(); }catch(ArgumentNullException ae) {} renvoie les données ;

Les données Json, en termes simples, sont des données sous la forme d'un tableau clé-valeur. Créez ensuite un contrôleur selon les options par défaut. Le contrôleur généré n'a qu'une seule méthode : Index(). Nous créons une autre méthode que jQuery doit appeler. Le code complété est le suivant : JQueryController.cs. Remarque : par défaut, il est interdit à jQuery d'appeler les données du serveur dans MVC2.0, vous devez donc ajouter des autorisations d'accès dans le code : JsonRequestBehavior.AllowGet.

en utilisant System; en utilisant System.Collections.Generic; en utilisant System.Linq; en utilisant System.Web; en utilisant System.Web.Mvc; en utilisant MvcWeb.Models; espace de noms MvcWeb.Controllers{ classe publique JQueryController : Contrôleur { // // GET : / JQuery/ public ActionResult Index() { return View(); } public JsonResult FindByName(string name) { return Json(TestModel.GetJsonArray(name), JsonRequestBehavior.AllowGet);

Cliquez ensuite avec le bouton droit sur Index() et utilisez les options par défaut pour générer une vue. Vous pouvez voir le code généré dans Views/JQuery : Index.aspx. Nous insérons ensuite le code du script et le complétons comme. suit :

<%@ 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 langage="Javascript" type="text/javascript"> $(document).ready(function() { $('#updater ').hide(); $('#dataHead').hide(); $('#linkFind').click(function(event) { event.preventDefault(); $('#dataHead').show( ); $('#updater').show(); $.getJSON('/JQuery/FindByName/', { nom : $('#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>Utiliser jQuery pour implémenter l'instance Ajax</h2); > <div id="query"><%= Html.TextBox("textSearch") %> <a href="#" id="linkFind">Recherche</a>    class ="update" id="updater"> Chargement en cours...   </span></div> <div id="dataHead" >Nom d'ID</div> <div id=" liste de tests "></div> </asp:Content>

Exécutez le projet, saisissez « t » dans la zone de texte, appuyez sur « Rechercher » et les données interrogées seront affichées sans actualiser la page, comme indiqué ci-dessous :

De plus, dans le développement Ajax, vous pouvez également utiliser la fonction Ajax de base $.ajax pour le débogage. Lorsqu'une erreur se produit, vous pouvez imprimer les informations sur l'erreur. Par exemple, l'appel ci-dessus peut être débogué avec le code suivant :