Use of the Ajax. actionlink () method

 

The first sentence is written in this way: programmers are hard-pressed and will write blog posts in addition to development! Ah, today I will discuss with you the use of the Ajax auxiliary method actionlink. If there are some bad or wrong places, please be sure to throw bricks and be accurate, forget it!

1. Introduce JS files: Ajax-assisted methods depend on non-intrusive Javascript. The so-called non-intrusive JavaScript means that HTML does not contain any JavaScript code. To use the Ajax auxiliary method, you must reference the relevant JS file. As follows:

First introduce JQ: <SCRIPT src = ".../scripts/jquery-1.7.1.min.js" type = "text/JavaScript"> </SCRIPT>

Next, introduce JS files related to Ajax: <SCRIPT src = ".../scripts/jquery. unobtrusive-ajax.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = ".../scripts/jquery. unobtrusive-ajax.min.js" type = "text/JavaScript"> </SCRIPT>

For Ajax-related JS files, find them in the script folder of the project!

2. After these JS files are introduced, we can call Ajax in the view. the actionlink () method is used. In this declaration, the view I use here is the razor view, that is, the cshtml file!

In the index view, we can access the actionlink method through Ajax attributes. Let's look at the Code directly! Xi ~ _~

@ Ajax. actionlink ("Click here", "hello", "home", new {name = ""}, new ajaxoptions {updatetargetid = "mydiv2", httpmethod = "get ", insertionmode = insertionmode. replace}, new {Title = "Click me to implement Asynchronization! "})

 

<Div id ="Mydiv2">
@ * Used to asynchronously load returned results *@
</Div>

 

Parameter annotation: Click here refers to the text to be displayed by the link.

The action in the hello constructor is the name of the called operation.

Controller in the home constructor refers to the name of the Controller called by the asynchronous operation.

In the new {name = ""} constructor, routevalues indicates that the passed parameter name is: the value of name is:

New ajaxoptions {...} corresponds to the ajaxoptions In the constructor. Here we will detail the parameter ajaxoptions.

Ajaxoptions is a significant difference between HTML and Ajax methods. This parameter specifies the method for sending the request and the method for processing the results returned by the server. The following describes the meaning of each attribute.

I. updatetargetid = "mydiv2" refers to the container ID used to receive the results returned by the server.

2. httpmethod = "get". We all know that data is requested in get mode.

3. insertionmode = insertionmode. Replace specifies the method used to update data on the specified updatetargetid element. There are three methods: "insertafter", "insertbefore", or "replace ". The default value is replace.

New {Title = "Click me to implement Asynchronization! "} Indicates that htmlattributes is not interpreted.

 

3. Based on the above parsing, find the home controller and add the action named hello. The Code is as follows:

 

[Httpget]

Public String Hello (string name)

{

 

Return "Hello:" + name;

}

Finally, run the program and click "Click here". The following message is displayed in the container with the ID of mydiv2: Hello: Tianji Wolong.

In fact, implementing the Ajax. actionlink () method is very simple. Through the above example, I believe everyone knows how to use Ajax. actionlink () method to implement Asynchronization.

Finally, I will summarize the above knowledge (just summarize the usage of the attribute corresponding to the ajaxoptions parameter. Other methods are similar to the HTML auxiliary methods. Learn by yourself .)

 

Other attributes can be specified in ajaxoptions:

 

Confirm	It is equivalent to return confirm (MSG) in Javascript. When you click this link, the message to be confirmed is displayed.
Httpmethod	Specify to use get or post to send HTTP requests
Insertmode	You can use either of the following methods to update data on the specified updatetargetid element: "insertafter", "insertbefore", or "replace ". The default value is replace.
Loadingelementduration	Time when the loading element is displayed
Loadingelementid	You can specify the loading element displayed during the HTTP request.
Onbegin	JavaScript method executed before the HTTP request
Oncomplete	Method executed at the end of the HTTP request
Onfailure	Method executed when an HTTP request fails
Onsuccess	Method executed when the HTTP request is successful
Updatetargetid	Page elements updated by HTTP requests
URL	HTTP request URL