Es muy fácil usar jQuery en la arquitectura MVC de asp.net, y es aún más sencillo usar jQuery para implementar Ajax. Después de generar el marco Asp.Net MVC, se incluye el script jQuery. Para conocer la configuración del entorno relacionada, consulte mi otro artículo: Ejemplo de Asp.Net MVC. Aquí, todavía confiamos en el entorno de la instancia. El script jQuery ya se puede ver en la carpeta Scripts del marco generado.
Creamos una función en TestModel.cs para obtener datos Json, aún usando la tabla Tets, que contiene dos campos: Id y Nombre.
//JsonDataArray public static Array GetJsonArray(String name) { Array data = null; try { data = (desde c en testDb.test donde c.name.Contains(name) select new { c.id, c.name }). ToArray(); }catch(ArgumentNullException ae) {} devolver datos }
Los datos Json, en pocas palabras, son datos en forma de matriz clave-valor. Luego cree un controlador de acuerdo con las opciones predeterminadas. El controlador generado tiene un solo método: Index(). Creamos otro método para que jQuery lo llame. El código completo es el siguiente: JQueryController.cs. Nota: jQuery tiene prohibido llamar a los datos del servidor de forma predeterminada en MVC2.0, por lo que debe agregar permisos de acceso en el código: JsonRequestBehavior.AllowGet.
usando System;usando System.Collections.Generic;usando System.Linq;usando System.Web;usando System.Web.Mvc;usando MvcWeb.Models; espacio de nombres MvcWeb.Controllers{ clase pública JQueryController: Controlador { // // GET: / JQuery/ public ActionResult Index() { return View(); public JsonResult FindByName(nombre de cadena) { return Json(TestModel.GetJsonArray(nombre), JsonRequestBehavior.AllowGet);
Luego haga clic derecho en Index() y use las opciones predeterminadas para generar una vista. Puede ver el código generado en Vistas/JQuery: Index.aspx. Luego insertamos el código del script y lo completamos. sigue:
<%@ Título de la página="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="Content1" ContentPlaceHolderID= "TitleContent" runat="servidor"> JQuery </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="servidor"> <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(función(evento) { event.preventDefault(); $('#dataHead').show( ); $('#actualizador').show(); $.getJSON('/JQuery/FindByName/', { nombre: $('#textSearch')[0].valor }, función(datos) { $( '#testList > div').remove(); $.each(data, function(i, item) { $('#testList').append('<div>' + item.id + ' ' + item. nombre + '</div>'); } }); $('#updater').hide() } }); > <div id="query"><%= Html.TextBox("textSearch") %> <a href="#" id="linkFind">Buscar</a> class ="update" id="updater"> Cargando... </span></div> <div id="dataHead" >Nombre de ID</div> <div id=" lista de pruebas "></div> </asp:Contenido>
Ejecute el proyecto, ingrese "t" en el cuadro de texto, presione "Buscar" y los datos consultados se mostrarán sin actualizar la página, como se muestra a continuación:
Además, en el desarrollo de Ajax, también puede utilizar la función básica de Ajax $.ajax para depurar. Cuando ocurre un error, puede imprimir información del error. Por ejemplo, la llamada anterior se puede depurar con el siguiente código:
<script language="javascript" type="text/javascript"> $(document).ready(function() { $('#linkFind').click(function(event) { event.preventDefault(); var handleData = función(datos) { alerta("éxito:" + datos); var handleErr = función(e) { alerta(e.responseText } $.ajax({ tipo: "obtener", url: "/Jquery/FindByName); ", datos: "nombre=t", éxito: handleData, error: handleErr }); }); }); </script>
-