. Ajax based MVC scheme in NET environment (1)

Ajax

1, the problem background

Now, more and more people are trying to make web development without refreshing based on Ajax, but in the. NET environment, it is not very convenient to apply Ajax, which may be caused by some of the following reasons:

• Because Ajax is based on the nature of JavaScript, developers must be very knowledgeable about JavaScript, at least, its JavaScript ability to achieve the callback return content to the page update, so the threshold for the development of a certain degree of increase

• When development based on Ajax mechanism, the original based on postback mode, asp.net by the background logic code (MODEL), aspx page (View), Aspx.cs the MVC Framework (Controller) is actually invalidated when the callback returns data, either by parsing the returned content with JavaScript on the client side to implement the update, or by constructing the more complete HTML code on the server side. And then directly by JavaScript to set the constructed HTML to a Page object, it is obvious that, in order to achieve a simple callback function, a lot of code, and is relatively messy code, Even in the coming asp.net2.0, the problem is still not being solved effectively.

2. The purpose of this article

The purpose of this paper is to benefit the characteristics of the existing asp.net itself and Ajax features, and to propose an MVC scheme for Web development based on Ajax in the ASP.NET environment to achieve the following main purposes:

A clear MVC framework for Ajax in asp.net environments

• Reduce the programmer's reliance on excessive JavaScript coding to reduce the programming threshold

• Flexible support for common development methods in AJAX mode

3, problem analysis

How to achieve the above several main purposes?

1 to the XMLHttpRequest for better encapsulation, so that the way to invoke simpler;

2) As far as possible in the server to update the structure of the data, but also to avoid each return data are manually constructed, so, think of the full use of UserControl, by UserControl as "View", corresponding by the Ascx.cs file as " Controller ", this composition of MVC is also relatively clear;

　

4, Problem solving

Based on the above ideas, I implemented the following Group class library to simplify the process:

Source code and example download

Code Brief analysis:

1 first on the client side, Ajaxhelper.js encapsulates the XMLHttpRequest and provides an existing <form> serialization into the form of param1=v1&param2=v2& The parameters of the form for post;

Updater (ajaxtemplate, output, params, oncomplete) function to implement a callback call

Ajaxtemplate (required): Specifies the UserControl path to perform the required function

Output (optional): Fills the reference or ID value of the specified label for the returned data

params (optional): shaped like param1=v1&param2=v2& The Post parameters

OnComplete (optional): Callback functions that can be used for special handling of returned data, function format functions (str), and STR for returned data

Serializeform (form) function, for serialization <form>

Form: Can be a reference or ID value for the specified <form>

2) on the server side, The ajax.aspx file encapsulates the invocation of the UserControl specified by the client ajaxtemplate, and the rest of the specific logic functions are implemented within a specific UserControl and its ascx.cs;

3) in this way, when performing a callback, the programmer simply references ajaxhelper.js in the page and passes Javascript:updater (ajaxtemplate, Output, params, oncomplete), and if you need to commit a form, you can call Javascript:serializeform (form) to serialize the form and pass it to params, and of course you can manually construct params, and specifies that the returned data be processed by setting the page to which the output is applied, or through OnComplete customization.

4) due to the full use of UserControl means that the It is possible to make full use of ASP.net's original Web server-side controls and data-binding mechanisms, which in fact has largely simplified the construction of the return data, in Ascx.cs, through Request.form[paramname] Access to the client-side incoming params, and then access the logical code to get the source data.

 [2]   next