Explore ASP.NET MVC framework built-in AJAX support programming technology

Traditional asp.net Web Forms are based on Web pages that contain both presentation and background code, so the ASP.net AJAX that follows, especially the server-side controls of the framework, are not as radiant as they should be. As a result, many of the ASP.net developers who follow Ajax fashion are simply asking the ASP. NET page, place some UpdatePanel controls at random to enable the program to achieve basic AJAX support. In fact, this only prevents the page from "flashing", and essentially the page still has a full postback, and it goes through the life cycle of the entire page. To eliminate complex technologies such as page postbacks and viewstate that ASP.net Web Forms relies on, Microsoft has launched another optional framework for ASP.NET application development-asp.net MVC. It is also based on the previous analysis, ASP.net mvc also added some AJAX support technology. However, the current ASP.net MVC framework has not yet released its official release, and there are still imperfections in many ways, especially with limited support for Ajax technologies. In this article, we'll use a simple example to discuss how to implement basic AJAX programming support with the ajax.form approach provided by the ASP.net MVC Preview 4 framework.

First, the introduction

If you look at the change information about each version of the ASP.net MVC framework, you'll notice a new set of objects, such as Ajaxhelper and Ajaxextensions, in the new version of the framework. By using these objects, you can add popular Ajax support to your asp.net MVC application. In addition, you can achieve the same goal with the help of the client JavaScript scripting framework, and with the help of open source engineering Mvccontrib It seems that you can achieve the same AJAX support.

In this article, we briefly discuss Ajax provided by the ASP.net MVC Preview 4 framework and analyze its basic AJAX support capabilities.

Second, the case analysis

(i) Create a sample asp.net MVC project

Start Visual Studio 2008 (I'm using the Team System version) to create a new ASP.net MVC project and name it Mvcbuiltinajax (Note: This example uses the current latest asp.net mvc Preview 4; And in this case we don't care whether or not to join the unit Test Support framework problem.

(ii) Modify the View page index.aspx

Please note that in this example we directly modify the View page index.aspx. We'll add a text box and a button control to this page. Our goal is to perform the form submission function when you click the button control. With this procedure, we will call back the server side and get the corresponding string, and this character content will be filled in Ajax to the DIV element next to the button control. Figure 1 shows a snapshot of the instance program at one of its run-time moments. In the figure, when we enter the string "John" in the text box, the background controller action method queries the existing data string, and if there is nothing just entered, the display "can use this name!" "Otherwise, show that the name has been used!" "The hint.

Now, let's take a look at the main elements involved in modifying the view index.aspx, as follows:

＜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 value of the Updatetargetid property that references the SPAN element. There are also a number of areas worth exploring about the use of ajaxoptions, which are discussed later.

If you further analyze the corresponding source code of the view page above the runtime, you will notice that the following paragraph corresponds 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="提交"/＞
　　　　 　　 ＜span id="result"/＞
　　　＜/form＞
　　 ＜ /p＞

As you can imagine, in the previous code, we could use the Sys.Mvc.AsyncForm.handleSubmit function directly, but the form above is more intuitive and easy to use.