After generating the ASP.net MVC framework, the jquery script has been included, and the related environment settings can be read in my another article: asp.net mvc instance. Here, we still use the environment in the instance. jquery scripts are already visible in the scripts folder in the generated frame.
We created a function in TestModel.cs to get the JSON data and still use the Tets table, which contains two fields: ID and name.
Copy Code code as follows:
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, in simple terms, is using data in the form of a key-value array. The default option is then to create a controller with only one method for the resulting controller: Index (). We'll create another method for the jquery call. The completed code is as follows: JQueryController.cs. Note: In MVC2.0, jquery is prohibited from invoking server data by default, so you must add access rights to your code: Jsonrequestbehavior.allowget.
Copy Code code as follows:
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, on Index (), press the default option to generate a view, you can see the generated code in Views/jquery: Index.aspx, the generated code is very simple, we insert the script code, complete the following:
Copy Code code 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>
<div id= "Query" ><%= html.textbox ("Textsearch")%> <a "#" href= "id=" > 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, in the text box, enter "T", press "search", the page is not refreshed in the case of the query to display the data, the following figure:
In addition, in AJAX development, you can also use Ajax's basic function $.ajax for debugging, and you can print error messages when errors occur. For example, the above call can be debugged with the following code:
Copy Code code as follows:
<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:handle Data,
Error:handleerr
});
});
});
</script>
