Use jquery to easily implement Ajax instance code

After the ASP. net mvc framework is generated, the jquery script is included. For environment settings, see my other article. Article : ASP. net mvc instance. Here, we still use the environment in the instance. You can see the jquery script in the scripts folder of the generated framework.
Create a function in testmodel. CS to obtain JSON data. The TETS table is still used and contains two fields: ID and name. CopyCode The Code is 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 short, is data in the form of a key-value array. Then, create a controller by default. The generated controller has only one method: Index (). Create another method for jquery to call. The completed Code is as follows: jquerycontroller. CS. Note: In mvc2.0, jquery is prohibited from calling server data by default. Therefore, you must add the access permission jsonrequestbehavior. allowget in the code.Copy codeThe Code is 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 );
}
}
}

Right-click index () and generate a view based on the default options. You can view the generated code in views/jquery: Index. aspx: The generated code is very simple. We can insert the script code as follows: Copy code The Code is 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 instances </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, and press "Search" to display the queried data without refreshing the page, for example:

In addition, in Ajax development, you can use the basic Ajax function $. Ajax for debugging. When an error occurs, you can print the error message. For example, you can use the following code to debug the above call:Copy codeThe Code is 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: handledata,
error: handleerr
});
}< br>