Discussion on programming technology supported by ASP. net mvc Framework built-in AJAX

Traditional ASP. NET Web Forms is based on Web pages that contain both the presentation layer and background code. net ajax, especially the server-side controls of this framework, are not as radiant as they should have been. As a result, many ASP. NET developers who follow the AJAX fashion just place some UpdatePanel controls to ASP. NET pages to enable their programs to implement 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 I use the Team System version) 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 the 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 an instance program at a certain time of operation. 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 there is no content just 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 has been used! ";} Else {return" can use this name! ";}}}

Note that 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 above programming 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 a Request similar to the following:

POST /Home/ExamineTextBox HTTP/1.1Referer: http://localhost.:45210/HomeContent-Type: application/x-www-form-urlencoded; charset=utf-8Accept-Encoding: gzip, deflateHost: localhost.:45210Content-Length: 28Connection: Keep-AlivePragma: no-cachetextBox1=dude&__MVCAJAX=true

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

HTTP/1.1 200 OKServer: ASP.NET Development Server/9.0.0.0Cache-Control: privateContent-Type: text/html; charset=utf-8Content-Length: 39Connection: 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 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 in 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＞

In addition, please note that the above script file MicrosoftMvcAjax. js is the latest provided by the framework, and it and several other script files) are 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, it is rare to collect articles about the built-in Ajax support for ASP. net mvc framework from the Internet.