It is very easy to use jQuery in the MVC architecture of asp.net, and it is even simpler to use jQuery to implement Ajax. After generating the Asp.Net MVC framework, the jQuery script has been included. For related environment settings, please refer to my other article: Asp.Net MVC Example. Here, we still rely on the environment in the instance. The jQuery script can already be seen in the Scripts folder in the generated framework.
We create a function in TestModel.cs to obtain Json data, still using the Tets table, which contains two fields: Id and Name.
//JsonDataArray public static 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 data, simply put, is data in the form of Key-Value array. Then create a controller according to the default options. The generated controller has only one method: Index(). We create another method for jQuery to call. The completed code is as follows: JQueryController.cs. Note: jQuery is prohibited from calling server data by default in MVC2.0, so you must add access permissions in the code: 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); } }}
Then right-click on Index() and use the default options to generate a view. You can see the generated code in Views/JQuery: Index.aspx. The generated code is very simple. We then insert the Script code and complete it as follows:
<%@ 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>Use jQuery to implement Ajax instance</h2> <div id="query"><%= Html.TextBox("textSearch") %> <a href="#" id="linkFind">Search</a> <span class ="update" id="updater"> Loading... </span></div> <div id="dataHead" >ID Name</div> <div id="testList "></div> </asp:Content>
Run the project, enter "t" in the text box, press "Search", and the queried data will be displayed without refreshing the page, as shown below:
In addition, in Ajax development, you can also use the basic Ajax function $.ajax for debugging. When an error occurs, you can print error information. For example, the above call can be debugged with the following code:
<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 ", data: "name=t", success: handleData, error: handleErr }); }); }); </script>
-