AJAX Panels with ASP. NET MVC

AJAX Panels with ASP. NET MVC

Address: http://www.singingeels.com/Articles/AJAX_Panels_with_ASPNET_MVC.aspx

Author: Timothy Khouri

Translation: Anders Liu

Abstract: ASP. net mvc Preview 4 provides some AJAX support to adapt to the essence of MVC design patterns. This article shows you how to make it incredibly simple to use "delay loading AJAX panel" in ASP. net mvc.

ASP. net mvc Preview 4 provides some AJAX support to adapt to the essence of the MVC design pattern. This article shows you how to make it incredibly simple to use "delay loading AJAX panel" in ASP. net mvc.

First, the question of "ASP. net ajax"

Because "Web Froms" (traditional ASP. NET) is based on the "page" that contains both the presentation layer and the background code, so ASP. net ajax is not as brilliant as it should have been. Many ASP. NET developers entering the AJAX field simply place some "UpdatePanel" to the page to make it "seem" to support AJAX. In fact, this only prevents the page from being "blinking", while the page is still completely re-sent and must go through the lifecycle of the page.

This does not mean that these problems are the responsibility of ASP. net ajax, but are caused by the need to use different AJAX attitudes. To be fair, there are better ASP. net ajax options than UpdatePanel controls. Including:

• Page Methods -- directly call the method in the background Code (on the server.
• Web Services -- call methods in the Web Services of an application.

The two options are "better" than UpdatePanel. You only need to present a part of HTML to the client without reloading the entire page. But they are "bad" when you need to use JavaScript to implement all the presentation logic (this is terrible without being said or known ).

Mvc ajax gives you a transfer

If you can obtain the same ASP. NET rendering capability as using UpdatePanel,AndAll the code can be separated, and the performance is the same as accessing Web Services. Are you not surprised? Come on, thank you for the essence of the MVC design pattern-and thank you for ASP. net mvc-you can!

Let's take a look at the problem of creating the "delayed loading" AJAX panel in the real world. Suppose we have a Web application for publishing some huge reports to the client. If AJAX is not used, the overall loading time of the page is increased for each report. Therefore, we will asynchronously request each report (using AJAX). Yes, the page itself can be loaded immediately, and each report will be displayed after running.

We will add four "reports" to the page ". Each report must run for 3 to 5 seconds. Therefore, if we use traditional Web Forms, the page will be loaded for 12 to 20 seconds. But with MVC, we can reduce the loading time to 5 seconds, and the page looks pretty.

Note:

Important. The performance gains mentioned above are limited by some factors. You must consider that the server must process all these requests, which will degrade the final result. In addition, many browsers only allow two concurrent downloads. Therefore, for the above example, the time saved will be reduced by about 50%.

Use Ajax. Form

MVC Preview 4 adds some methods for all MVC pages and MVC user controls in the "this. Ajax" field. The "Ajax. Form" method is similar to the "Html. Form" method, but it adds JavaScript to help ensure that requests can be sent asynchronously. In addition, an HTML element can be defined for the returned results.

For example, if you want to POST operations such as "send mail, in addition, you want the server to put the text like "Your email has been sent" in the <div> where the ID is "resultDiv". You need to do this:

<P> <! -- Your form elements here... --> </p> <p>

The above code generates the following <form> tag:

<Br/> <p>

As we mentioned earlier, this is very similar to "Html. form generated by the form method, but you can also clearly see that the onsubmit method is replaced with AJAX to send requests, and you can also see that the "resultDiv" parameter is passed to the server.

The server will receive the request as usual, and it will send the data of the request as usual. This magic occurs inside ASP. net mvc. The response sent from the server will be placed in our <div>, and the rest of the page will not change.

This is true. AJAX is very simple. However, you must also note that this form is submitted only when the user explicitly clicks the submit button (<input type = "submit">, it will contact the server. To solve this problem, we need to add a line of JavaScript to enable it to automatically submit forms and request reports asynchronously. I also made some minor changes to the "Form" method and added an html id attribute so that I can access it in JavaScript.

Now our new code looks like this:

<P>

Prompt

If I call the "Sys. Mvc. AsyncForm. handleSubmit" method directly, the code above can be simpler. But I chose to let MVC create a form for me and access it through JavaScript. So if the JavaScript method changes in the future, I can still use it.

Check the results!

Using the above method, coupled with the "loading gif" I obtained from the Internet, we have such a page that can dynamically (and asynchronously) Load reports, it is immediately displayed to the user when it is available. The following are the final results:

Here is the source code of the above project. Remember, this project was compiled and compiled in ASP. net mvc Preview 4. It may be outdated when you download it ):

Download the source code: SingingEels_MVC_Asyncronous_AJAX_Panels.zip.