Asp.net Tutorial: ASP. net mvc Framework built-in Ajax support programming technology

Traditional ASP. NET web forms are based on both the presentation layer and the backgroundCodeASP. NET Ajax, especially the server-side controls of this framework, is not as radiant as they should have. As a result, many ASP. NET developers who follow the Ajax fashion just place some updatepanel controls to ASP. NET pages to make themProgramImplement basic Ajax support. In fact, this only prevents the page from being "blinking", and basically the page is completely re-sent and must go through the lifecycle of the page. To eliminate complex technologies such as page return and viewstate that ASP. NET web forms depend on, Microsoft has introduced another optional framework for ASP. NET application development-ASP. net mvc. Based on the previous analysis, ASP. net mvc has also added some Ajax support technologies. However, the current ASP. net mvc Framework has not yet released its official release version, and there are still many imperfections, especially the limited support for Ajax technology. In this article, we will use a simple example to discuss how to use the Ajax. Form method provided by the ASP. net mvc preview 4 framework to implement basic Ajax programming support.

I. Introduction

If you take a closer look at the changes related to resources in each version of the ASP. net mvc framework, you will notice that the new version of the Framework provides a set of new objects, such as ajaxhelper and ajaxextensions. With these objects, you can add popular Ajax support functions for your ASP. net mvc application. In addition, you can achieve the same purpose by using the client Javascript script framework jquery, and by using the open-source project mvccontrib, you seem to be able to achieve the same Ajax support.

In this article, we will briefly discuss Ajax provided by the ASP. Net MVC preview 4 framework and analyze the basic Ajax support functions provided by it.

Ii. instance analysis

(1) Create an example ASP. net mvc Project

Start Visual Studio 2008 (my team system version is used) to create a new ASP.. Net MVC project and name it mvcbuiltinajax (Note: This instance uses the latest ASP. net MVC preview 4; in this example, we are not concerned about whether to add the unit test support framework ).
(2) Modify view page index. aspx

Note that in this example, we directly modify the index. aspx of the view page. We will add a text box and a button control to this page. The purpose is to execute the form submission function when you click this button control. Through this process, we call back the server side and obtain the corresponding string, and the content of this character will be filled into the DIV element next to the button control in Ajax mode. Figure 1 shows a snapshot of a running time of the Instance program. In the figure, when we enter the string "Zhang San" in the text box, the background controller Action Method queries the existing data string. If no content has just been entered, the system displays "you can use this name! "; Otherwise, "this name is already in use!" is displayed !" .

Now, let's take a look at the main content involved in modifying View index. aspx, as shown below:

<Asp: Content ID = "indexcontent" contentplaceholderid = "maincontent" runat = "server">
<P>
<% Using (Ajax. Form ("examinetextbox", new ajaxoptions {updatetargetid = "resultdiv "}))
{%>
<% = Html. Textbox ("textbox1") %>
<Input type = "Submit" value = "button"/>
<Span id = "resultdiv"/>
<% }%>
</P>
</ASP: content>

Note the Ajax. Form help function used here and the updatetargetid attribute value that references the span element. The usage of ajaxoptions is worth looking at and will be discussed later.

If you further analyze the source code of the view page at the runtime, you will notice the following content corresponding to the above content:
<P>
<Form action = "/home/examinetextbox" onsubmit = "sys. MVC. asyncform. handlesubmit (this, {insertionmode: 0, updatetargetid: 'result'}); Return false; "> <input type =" text "name =" textbox1 "id =" textbox1 "value =" "/>
<Input type = "Submit" value = "Submit"/>
<Span id = "result"/>
</Form>
</P>

As you can imagine, in the previous code, we can also directly use the SYS. MVC. asyncform. handlesubmit function here, but the above form is more intuitive and easy to use.

(3) Add the Controller Action Method

Then, we add an action method examinetextbox in the home controller. The content is as follows:

public class homecontroller: controller
{
Public String examinetextbox (string textbox1)
{
string [] existingusers = {" scottgu "," scottha "," guyincognito "," Boris "};
If (existingusers. contains (username)
{
return" this name is already in use! ";
}
else
{
return" you can use this name! ";
}
}
}

Note: here the return method of examinetextbox returns a string instead of an actionresult type. In fact, the returned results of this string will be automatically packaged into a contentresult type. Therefore, you can also directly return a contentresult type. However, the preceding encoding makes the Function Format easier to understand
In addition, it is worth noting that the results returned by the above method are implemented through Ajax calls. Then, the result is quietly filled in the corresponding span tag. Start any of your HTTP interception tools at runtime, and you will see the following request content:

Post/home/examinetextbox HTTP/1.1
Referer: http: // localhost.: 45210/home
Content-Type: Application/X-WWW-form-urlencoded; charset = UTF-8
Accept-encoding: gzip, deflate
HOST: localhost.: 45210
Content-Length: 28
Connection: keep-alive
Pragma: No-Cache
Textbox1 = dude & __ mvcajax = true

Now let's take a look at the response results, as shown below:

HTTP/1.1 200 OK
Server: ASP. NET development server/9.0.0.0
Cache-control: Private
Content-Type: text/html; charset = UTF-8
Content-Length: 39
Connection: Close

Iii. About the script file microsoftmvcajax. Debug. js

Do you still remember that an updatetargetid occurs when Ajax. form is called in the previous form encoding? It points to the DIV element next to the button control (corresponding to its id value ). In fact, the content of this Div element is controlled by the script file microsoftmvcajax. Debug. js.

To further clarify the essence of the problem, we still track the content of the script file microsoftmvcajax. Debug. js to see the relevant code snippets, as shown below:

// Insert the result into the target Element
If (targetelement) {// if the target element exists
Switch (insertionmode ){
Case SYS. MVC. insertionmode. replace:
Targetelement. innerhtml = executor. get_responsedata ();
Break;
Case SYS. MVC. insertionmode. insertbefore:
Targetelement. innerhtml = executor. get_responsedata () + targetelement. innerhtml;
Break;
Case SYS. MVC. insertionmode. insertafter:
Targetelement. innerhtml = targetelement. innerhtml + executor. get_responsedata ();
Break;
}
}

4. Add the reference to the Ajax script to the master view.

Note: in ASP. net mvc programming (the latest version of preview 4), you must manually add the corresponding Ajax script library. In this example, I add them to the master view site. Master, as shown below:

<SCRIPT src = "/content/microsoftajax. Debug. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "/content/microsoftmvcajax. Debug. js" type = "text/JavaScript"> </SCRIPT>

Note that the preceding script file microsoftmvcajax. JS is provided by the Framework. It (and several other script files) is located in the content folder of the newly created MVC application.

V. Summary

Finally, remember that the project in this article is compiled and compiled under ASP. net mvc preview 4. From further analysis of several sets currently provided by ASP. net mvc, it is not difficult to see that the Ajax support currently provided by ASP. net mvc is very limited. Currently, the built-in Ajax support for ASP. net mvc framework is collected from the Internet.ArticleIt is also very rare