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:

Code
Public ActionResult ActionLinkTest ()
{
Return View ();
}
Public string Hello (string name)
{
Return "Hello:" + name;
}

2. ajaxOptions important options

Attribute type description
If this option is specified for Confirm string, a confirmation window will pop up when you click the link.

If this option is specified for LoadingElementId string, When you click the link, the css of the content of the specified id label is changed to the display status.
If UpdateTargetId string specifies this option, 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:

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:

Public string Hello (string name)
{
Return "Hello:" + name;
}
Public ActionResult BeginFormTest ()
{
Return View ();
}

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page