É muito fácil usar jQuery na arquitetura MVC do asp.net e é ainda mais simples usar jQuery para implementar Ajax. Depois de gerar a estrutura Asp.Net MVC, o script jQuery foi incluído. Para configurações de ambiente relacionadas, consulte meu outro artigo: Exemplo Asp.Net MVC. Aqui, ainda contamos com o ambiente da instância. O script jQuery já pode ser visto na pasta Scripts do framework gerado.
Criamos uma função em TestModel.cs para obter dados Json, ainda utilizando a tabela Tets, que contém dois campos: Id e Name.
//JsonDataArray public static Array GetJsonArray (String name) { Array data = null; try { data = (de c em testDb.test onde c.name.Contains (name) selecione novo { c.id, c.name }). ToArray(); }catch(ArgumentNullException ae) {} retornar dados }
Os dados JSON, simplesmente, são dados na forma de matriz de valor-chave. Em seguida, crie um controlador de acordo com as opções padrão. O controlador gerado possui apenas um método: Index(). Criamos outro método para o jQuery chamar. O código concluído é o seguinte: JQueryController.cs. Observação: o jQuery é proibido de chamar dados do servidor por padrão no MVC2.0, portanto você deve adicionar permissões de acesso no código: JsonRequestBehavior.AllowGet.
usando System;usando System.Collections.Generic;usando System.Linq;usando System.Web;usando System.Web.Mvc;usando MvcWeb.Models;usando namespace MvcWeb.Controllers{ public class JQueryController : Controller { // // GET: / JQuery/ public ActionResult Index() { return View() } public JsonResult FindByName(string nome) { return Json(TestModel.GetJsonArray(nome), JsonRequestBehavior.AllowGet);
Em seguida, clique com o botão direito em Index() e use as opções padrão para gerar uma visualização. Você pode ver o código gerado em Views/JQuery: Index.aspx. O código gerado é muito simples. segue:
<%@ 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(); '#testList > div').remove(); $.each(data, function(i, item) { $('#testList').append('<div>' + item.id + ' ' + item. name + '</div>'); > <div id="query"><%= Html.TextBox("textSearch") %> <a href="#" id="linkFind">Pesquisar</a> class ="update" id="updater"> Carregando... </span></div> <div id="dataHead" >Nome do ID</div> <div id=" testList "></div> </asp:Content>
Execute o projeto, digite “t” na caixa de texto, pressione “Pesquisar”, e os dados consultados serão exibidos sem atualizar a página, conforme mostrado abaixo:
Além disso, no desenvolvimento Ajax, você também pode usar a função básica Ajax $.ajax para depuração. Quando ocorre um erro, você pode imprimir informações de erro. Por exemplo, a chamada acima pode ser depurada com o seguinte código:
<script language="javascript" type="text/javascript"> $(document).ready(function() { $('#linkFind').click(function(event) { event.preventDefault(); var handleData = function(data) { alert("sucesso:" + dados } var handleErr = function(e) { alert(e.responseText } $.ajax({ type: "get", url: "/Jquery/FindByName); ", dados: "nome=t", sucesso: handleData, erro: handleErr }); }); }); </script>
-