Ajax-based MVC solution in. Net Environment

Nowadays, more and more people are trying to use Ajax-based Web development. However, Ajax is not very convenient in the. Net environment.

　　1. Problem background

Now, more and more people are trying to use Ajax-based Web development. in the. Net environment, Ajax is not very convenient, which may be caused by the following reasons:

· Because Ajax is based on the nature of javascript, developers must have a good understanding of javascript. At least, its javascript capability is sufficient to update pages with callback returned content, therefore, the development threshold increases to a certain extent.

· When developing based on the Ajax mechanism and based on the postback method, asp.net uses the background logic code (Model), aspx page (View), and aspx. the MVC Architecture composed of cs (Controller) actually fails. When callback returns data, it either parses the returned content using javascript on the client side for updates, alternatively, you must construct a relatively complete html code on the server side, and then directly set the constructed html to a page object by javascript. Obviously, as a result, A lot of code is required to implement the simplest callback function, and it is relatively messy code, even in the coming asp. net2.0 still cannot solve this problem effectively

　　2. Purpose of this Article

This article aims to fully benefit the existing asp.net features and ajax features, and proposes an MVC solution for ajax-based web development in the asp.net environment to achieve the following purposes:

· Clear MVC Architecture for Ajax in Asp. Net Environment

· Reduce the programmer's dependence on excessive javascript code to lower programming barriers

· Flexible support for common development methods in ajax Mode

　　3. Problem Analysis

How can we achieve the above objectives?

1) xmlhttprequest should be well encapsulated to make the call method simpler;

2) try to construct the updated data on the server side, but avoid manual construction of the data returned each time. Therefore, you can think of using UserControl as "View ", corresponding by ascx. cs files are used as "Controller". The MVC format is clear;

　　4. Problem Solving

Based on the above ideas, I implemented the following group of class libraries to simplify the process:

Code Analysis:

1) first, on the client side, AjaxHelper. js encapsulates xmlhttprequest and provides

Serialize to a format such as param1 = v1? M2 = v2 &... format for post parameters;

Updater (ajaxTemplate, output, params, onComplete) functions are used to implement One callback call.

AjaxTemplate (required): Specifies the UserControl path for executing the required functions.

Output (optional): Fill in the reference or ID value of the specified tag for the returned data

Params (optional): in the format of param1 = v1? M2 = v2 &... the post Parameter

OnComplete (optional): a callback function that can be used for special processing of returned data. The function format is function (str). str is the returned data.

SerializeForm (form) function for serialization

Form: it can be a reference to a specified value or an ID value.

2) on the server side, the Ajax. aspx file encapsulates the call to the UserControl specified by the client ajaxTemplate. Other specific logical functions are implemented in the specific UserControl and its ascx. cs;

3) in this way, when executing a callback operation, programmers only need to reference AjaxHelper on the page. javascript, and call it at the specified position through javascript: Updater (ajaxTemplate, output, params, onComplete). If you need to submit a form, you can call javascript: serializeForm (form) serializes the form and transmits it to params. Of course, you can also manually construct params and specify that the returned data is processed by setting the output application page or using onComplete customization.

4) The full use of UserControl means that the original web server controls and data binding mechanisms of asp.net can be fully utilized. In this way, the structure of returned data has been greatly simplified, in ascx. in cs, Request. form [ParamName] can access the params passed in to the client, and then access the logic code to obtain the source data.

　　5. Example

<