Now, I have heard of jQuery and jQuery in ASP. net mvc is well supported, and it is said that vs2010 will also be integrated, so ASP. net mvc is certainly of great benefit to understand jQuery, so here are a few simple examples to explain jQuery in ASP.. net mvc.
I. jQuery references
For a new ASP. for the net mvc project, the scripts folder contains the jQuery js file, so we can directly reference it in the project. We can enter the following code in the View:
<Head runat = "server">
<Script src = "<% = Url. Content ("~ /Scripts/jquery-1.3.2.min.js ") %>"
Type = "text/javascript"> </script>
</Head>
Here, the min version removes spaces, comments, and modifies long file names. The download takes less time.
One of the major advantages of using jQuery in Vs is that it can use intelligent sensing. The jQuery team and Microsoft team jointly developed a js file for jQuery in vs to be intelligently aware, however, you must enter
<%/* %> <Script src = "~ /Scripts/jquery-1.3.2-vsdoc.js "> </script> <% */%>
However, when I tested this, I found that using this reference in a specific View would affect the SMART awareness of the Code in the View, but there would be no problem if I put it in the mastpage.
Ii. Ajax in jQuery:
1. jQuery. get (url, [data], [callback], [type])
UrlString: URL address of the page to be loaded
Data (optional) Map: The Key/value parameter to be sent, which can be obtained by the Request on the server side.
Callback (optional) Function: callback Function upon successful loading.
Type (optional) String: returned content format, xml, html, script, json, text, _ default.
Now we need to make an ajax request to query the list. The front-end view is:
<Script src = "<% = Url. Content ("~ /Scripts/jquery-1.3.2.min.js ") %>" type = "text/javascript"> </script>
<% = Html. TextBox ("search") %>
<Input type = "button" value = "query" id = "btnSearch"/>
<Div id = "results">
<% Html. RenderPartial ("NewsListPartial", Model); %>
</Div>
<Script language = "javascript" type = "text/javascript">
$ ("# BtnSearch"). click (function (){
$. Get ($ (this). attr ("href"), {title: $ ("# search"). attr ("value")}, function (response ){
$ ("# Results" response .html (response );
})
});
</Script>
The content in NewsListPartial. ascx is:
<% @ Control Language = "C #" Inherits = "System. Web. Mvc. ViewUserControl <IEnumerable <News>" %>
<Table>
<Tr>
<Th>
Author
</Th>
<Th>
Title
</Th>
<Th>
CreateTime
</Th>
</Tr>
<% Foreach (var item in Model) {%>
<Tr>
<Td>
<% = Html. Encode (item. Author) %>
</Td>
<Td>
<% = Html. Encode (item. Title) %>
</Td>
<Td>
<% = Html. Encode (String. Format ("{0: g}", item. CreateTime) %>
</Td>
</Tr>
<% }%>
</Table>
Controller:
Public ActionResult GetDemo (string title)
{
List <News> news = ListNews. GetList ();
If (Request. IsAjaxRequest ())
{
Return View ("NewsListPartial", news. Where (p => p. Title. Contains (title )));
}
Return View (news );
}
Let's focus on this sentence:
$. Get ($ (this). attr ("href"), {title: $ ("# search"). attr ("value")}, function (response ){
$ ("# Results" response .html (response );
})
$ (This). attr ("href"): Get the current link
{Title: $ ("# search"). attr ("value")}: The parameter passed when the url is called. This parameter is the value of TextBox.
Function (response ){
$ ("# Results" response .html (response );
}: This function is called after the ajax request is complete. This function replaces the div of id = results with the returned text content.
2. The usage of jQuery. post (url, [data], [callback], [type]) is similar to that of get.
Omitted (see source code)
3. jQuery. getJSON (url, [data], [callback]): loads JSON data through an http get request.
View:
<% = Html. TextBox ("NewsId") %>
<Input type = "button" id = "btnGet" value = "get news"/>
<Table>
<Tr>
<Td>
ID:
</Td>
<Td id = "ID">
</Td>
</Tr>
<Tr>
<Td>
Author:
</Td>
<Td id = "Author">
</Td>
</Tr>
<Tr>
<Td>
Title:
</Td>
<Td id = "Title">
</Td>
</Tr>
</Table>
<Script language = "javascript" type = "text/javascript">
$ ("# BtnGet"). click (function (){
$. GetJSON ($ (this). attr ("action"), {newsID: $ ("# NewsId"). attr ("value")}, function (news ){
$ ("# ID" pai.html (news. ID );
$ ("# Author" pai.html (news. Author );
$ ("# Title" pai.html (news. Title );
})
})
</Script>
Controller:
Public ActionResult JosnDemo (string newsID)
{
If (Request. IsAjaxRequest ())
{
Return new JsonResult
{
Data = ListNews. GetList (). First (p => p. ID. ToString () = newsID)
};
}
Else
Return View ();
}
4. load (url, [data], [callback]): load the remote HTML file code and insert it into the DOM.
In the following example, when the DropDownList changes, the list is changed based on the content in the DropDownList.
View:
<H2>
NewsList <% = Html. DropDownList ("Author") %>
<Div id = "results">
<% Html. RenderPartial ("NewsListPartial", Model); %>
</Div>
<Script language = "javascript" type = "text/javascript">
$ ("# Author"). change (function (){
Var selection = $ ("# Author"). val ();
$ ("# Results"). load ($ (this). attr ("href"), {author: selection });
})
</Script>
Controller:
Public ActionResult NewsList (string author)
{
List <News> news = ListNews. GetList ();
If (Request. IsAjaxRequest ())
{
If (! String. IsNullOrEmpty (author ))
{
News = news. Where (p => p. Author = author). ToList ();
}
Return View ("NewsListPartial", news );
}
Else
{
List <object> list = new List <object> ();
List. Add (new {author = "all", value = ""});
List. Add (new {author = "lfm1", value = "lfm1 "});
List. Add (new {author = "lfm2", value = "lfm2 "});
List. Add (new {author = "lfm3", value = "lfm3 "});
ViewData ["Author"] = new SelectList (list, "value", "author ");
Return View (news );
}
}
Iii. Reference:
Pro_asp_dot_net_mvc_framework
Professional ASP. net mvc 1.0
4. Download source code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
