ASP. net mvc practice series 4-Ajax applications

ASP. net mvc supports Ajax and webform in some differences, without updatepanel, so for beginners in the initial application does not seem to be simple in webform, however, it is more flexible in actual use, but it does not increase much complexity compared with webform.

I. Helpers of ASP. NET MVC Ajax

For ASP. net mvc Ajax learning requires a focus on understanding Ajax. actionLink () and Ajax. beginForm () Helper, Ajax is System. web. mvc. in ViewPage, the returned type is AjaxHelper, and ASP. the View in. net mvc inherits from System. web. mvc. viewPage, so you can use the two Helper directly on the page.

1. Ajax. ActionLink (): enter a link address to the client, which is similar to Html. ActionLink (). When you click this link, you can call the method in Controller asynchronously.

The Ajax. ActionLink () method has many reloads. Here is an example of a commonly used overload:

Public static string ActionLink (this AjaxHelper ajaxHelper, string linkText, string actionName, object routeValues, AjaxOptions ajaxOptions );
LinkText: The text displayed on the client.

ActionName: indicates the Action name. By default, the current Controller is used.

RouteValues: The parameter that passes in to the Controller.

AjaxOptions: Configure some Ajax options. After reading the example below, we will explain the configuration options in detail.

Here is a simple example:

View:

<Script src = "<% = Url. Content ("~ /Scripts/MicrosoftAjax. js ") %>" type = "text/javascript"> </script>

<Script src = "<% = Url. Content ("~ /Scripts/MicrosoftMvcAjax. js ") %>" type = "text/javascript"> </script>

<% = Ajax. ActionLink ("test", "Hello", new {name = "Dita"}, new AjaxOptions {UpdateTargetId = "results"}) %>
<Div id = "results">
</Div>

Although the ASP. net mvc sctrpts already has an Ajax script, it still needs to be referenced on the page before it is used. Ajax. actionLink ("test", "Hello", new {name = "Dita"}, new AjaxOptions {UpdateTargetId = "results"}) indicates that the text displayed on the front-end page is test, when you click test, the "Hello" method in Controller is called. The parameter is "linear" and the returned content is displayed in the id = results label.

Controller:

{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
This. style. display = 'none'; document. getElementById ('Code _ Closed_Text_144923 '). style. display = 'none'; document. getElementById ('Code _ Open_Image_144923 '). style. display = 'inline'; document. getElementById ('Code _ Open_Text_144923 '). style. display = 'inline ';
}
}
}
}
}
}
}
} "Id =" Code_Closed_Image_144923 "style =" display: none "> {
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
This. style. display = 'none'; document. getElementById ('Code _ Open_Text_144923 '). style. display = 'none'; getElementById ('Code _ Closed_Image_144923 '). style. display = 'inline'; getElementById ('Code _ Closed_Text_144923 '). style. display = 'inline ';
}
}
}
}
}
}
}
} "Id =" Code_Open_Image_144923 "> Code
Public ActionResult ActionLinkTest ()
{
Return View ();
}
Public string Hello (string name)
{
Return "Hello:" + name;
}

 

2. ajaxOptions important options

Attribute	Type	Explanation
Confirm	String	If this option is specified, a confirmation window is displayed when you click the link.
LoadingElementId	String	If this option is specified, When you click the link, the css of the content of the specified id label is changed to the display status.
UpdateTargetId	String	If this option is specified, the returned value after the asynchronous call replaces this tag.

Confirm example: in View, type <% = Ajax. actionLink ("ConfirmTest", "Hello", new {name = "Dita"}, new AjaxOptions {Confirm = "are you sure", UpdateTargetId = "results"}) %>
When you click ConfirmTest, the following window is displayed:

LoadingElementId example:

View:

<% = Ajax. actionLink ("LoadingTest", "HelloSleep", new {name = "Dita"}, new AjaxOptions {LoadingElementId = "loading", UpdateTargetId = "results"}) %>
<Div id = "loading" style = "display: none">
Loading ......
</Div>
<Div id = "results">
</Div>

Controller:

{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
This. style. display = 'none'; document. getElementById ('Code _ Closed_Text_151531 '). style. display = 'none'; document. getElementById ('Code _ Open_Image_151531 '). style. display = 'inline'; document. getElementById ('Code _ Open_Text_151531 '). style. display = 'inline ';
}
}
}
}
}
}
}
} "Id =" Code_Closed_Image_151531 "style =" display: none "> {
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
This. style. display = 'none'; document. getElementById ('Code _ Open_Text_151531 '). style. display = 'none'; getElementById ('Code _ Closed_Image_151531 '). style. display = 'inline'; getElementById ('Code _ Closed_Text_151531 '). style. display = 'inline ';
}
}
}
}
}
}
}
} "Id =" Code_Open_Image_151531 "> Code
Public string HelloSleep (string name)
{
Thread. Sleep (2000 );
Return "Hello:" + name;
}

 

3. Ajax. BeginForm (): similar to Html. BeginForm (). When you press the submit button, the method in the Controller is called asynchronously.

View:

<% Using (Ajax. BeginForm ("Hello ",
New AjaxOptions {UpdateTargetId = "myResults "}))
{%>
<% = Html. TextBox ("name") %>
<Input type = "submit" value = "call"/>
<% }%>
<Div id = "myResults">
Returned results
</Div>

Controller:

{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
This. style. display = 'none'; document. getElementById ('Code _ Closed_Text_152505 '). style. display = 'none'; document. getElementById ('Code _ Open_Image_152505 '). style. display = 'inline'; document. getElementById ('Code _ Open_Text_152505 '). style. display = 'inline ';
}
}
}
}
}
}
}
} "Id =" Code_Closed_Image_152505 "style =" display: none "> {
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
This. style. display = 'none'; document. getElementById ('Code _ Open_Text_152505 '). style. display = 'none'; getElementById ('Code _ Closed_Image_152505 '). style. display = 'inline'; getElementById ('Code _ Closed_Text_152505 '). style. display = 'inline ';
}
}
}
}
}
}
}
} "Id =" Code_Open_Image_152505 "> Code
Public string Hello (string name)
{
Return "Hello:" + name;
}
Public ActionResult BeginFormTest ()
{
Return View ();
}

 

II. Specific cases:

1. query the news list

View (NewsShow) on the main display page ):

<Script src = "<% = Url. Content ("~ /Scripts/MicrosoftAjax. js ") %>" type = "text/javascript"> </script>

<Script src = "<% = Url. Content ("~ /Scripts/MicrosoftMvcAjax. js ") %>" type = "text/javascript"> </script>

<% Using (Ajax. BeginForm ("Search ",
New AjaxOptions {UpdateTargetId = "myResults", LoadingElementId = "loading "}))
{%>
<% = Html. TextBox ("title") %>
<Input type = "submit" value = "query"/>
<% }%>
<Div id = "myResults">
Returned results
</Div>
<Div id = "loading" style = "display: none">
Loading
</Div>

Create a Partial View (NewsList ):

<Table>
<Tr>
<Th>
Title
</Th>
<Th>
Content
</Th>
<Th>
Author
</Th>
<Th>
CreateTime
</Th>
<Th>
Country
</Th>
</Tr>
<% Foreach (var item in Model)
{%>
<Tr>
<Td>
<% = Html. Encode (item. id) %>
</Td>
<Td>
<% = Html. Encode (item. Title) %>
</Td>
<Td>
<% = Html. Encode (item. Content) %>
</Td>
<Td>
<% = Html. Encode (item. Author) %>
</Td>
<Td>
<% = Html. Encode (String. Format ("{0: g}", item. CreateTime) %>
</Td>
<Td>
<% = Html. Encode (item. Country) %>
</Td>
</Tr>
<% }%>
</Table>

Controller:

{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
This. style. display = 'none'; document. getElementById ('Code _ Closed_Text_154420 '). style. display = 'none'; document. getElementById ('Code _ Open_Image_154420 '). style. display = 'inline'; document. getElementById ('Code _ Open_Text_154420 '). style. display = 'inline ';
}
}
}
}
}
}
} "Id =" Code_Closed_Image_154420 "style =" display: none "> {
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
Function onclick ()
{
This. style. display = 'none'; document. getElementById ('Code _ Open_Text_154420 '). style. display = 'none'; getElementById ('Code _ Closed_Image_154420 '). style. display = 'inline'; getElementById ('Code _ Closed_Text_154420 '). style. display = 'inline ';
}
}
}
}
}
}
} "Id =" Code_Open_Image_154420 "> Code
Public ActionResult Search (string title)
{
NewsDataDataContext dc = new NewsDataDataContext ();
Return View ("NewsList", dc. News. Where (n => n. Title. Contains (title )));
}
Public ActionResult NewsShow ()
{
Return View ();
}

It should be noted that ajax return supports ActionResult, as long as this ActionResult is a View of the Partial type, it can be correctly displayed

Iii. Reference:

Professional ASP. net mvc 1.0

Pro ASP. net mvc Framework

Iv. Source Code