Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about how to view the MVC scheme based on Ajax in the .net environment. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Nowadays, more and more people are trying to develop brushless Web based on Ajax. However, it is not very convenient to apply Ajax in .net environment, which may be caused by the following reasons:

◆ because of the nature of Ajax based on javascript, developers must have a good understanding of javascript. At the very least, its javascript capability is sufficient to update the content returned by callback to the page, so the threshold of development has been raised to a certain extent.

When ◆ is developed based on Ajax mechanism, under the original postback-based mode, the MVC framework of asp.net composed of background logic code (Model), aspx page (View) and aspx.cs (Controller) actually fails. When callback returns data, either javascript is used to parse the returned content on the client side to achieve the update, or a relatively complete html code must be constructed on the server side, and then the constructed html is directly set to a page object by javascript. Obviously, in order to implement the simplest callback function, it takes a lot of code, and it is relatively messy, and even in the coming asp.net2.0, the problem will not be solved effectively.

2. Purpose

In order to fully benefit the characteristics of existing asp.net and ajax, a MVC scheme for ajax-based web development in asp.net environment is proposed to achieve the following main purposes:

Clear MVC architecture for Ajax in ◆ Asp.Net environment

◆ reduces programmers' dependence on too much javascript coding to lower the programming threshold

◆ flexibly supports common development methods under ajax mode.

3. Problem analysis.

How to achieve the above main goals?

(1) it is necessary to better encapsulate the xmlhttprequest to make the calling mode easier.

(2) try to construct the updated data on the server side, but also avoid manually constructing the returned data every time. Therefore, you can think of making full use of UserControl, with UserControl as the "View" and the corresponding ascx.cs file as the "Controller". The MVC is also relatively clear.

4. Problem solving

Based on the above ideas, I have 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 a

Serialize into the shape of param1=v1?m2=v2&... Formal parameters for post

Updater (ajaxTemplate, output, params, onComplete) function, which is used to implement a callback call

AjaxTemplate (required): specify the UserControl path to perform the required function

Output (optional): fill in the reference or ID value of the specified tag that returns the data

Params (optional): shaped like param1=v1?m2=v2&... The post parameter of

OnComplete (optional): 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: can be a reference or ID value to the specified

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

(3) in this way, when executing a callback, the programmer only needs to reference AjaxHelper.js on the page and call it through _ javascript:Updater (ajaxTemplate, output, params, onComplete) at the specified location. If you need to submit a certain form, you can call _ javascript:SerializeForm (form) to serialize the form and pass it to params. Of course, you can also manually construct params, and specify that the returned data will be processed by setting the page of the output application or customized by onComplete.

(4) due to the full use of UserControl, it means that the original web server-side controls and data binding mechanism of asp.net can be fully utilized. In fact, the construction of returned data has been greatly simplified. In ascx.cs, through Request.Form [ParamName], you can access the params passed in by client, and then access the logic code to get the source data.

5. Examples

Examples included in the source code to achieve a simple non-refresh access to the blog park home page content to a textarea function, see the source code for details!

Some sample source code:

Default.aspx

< %@ Page language="c#" Codebehind="Default.aspx.cs" AutoEventWireup="false" Inherits="CN.Teddy.AjaxHelper.WebForm1" %>

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

< HTML>

< HEAD>

< title>

WebForm1

< /title>

< meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">

< meta name="CODE_LANGUAGE" Content="C#">

< meta name="vs_defaultClientScript" content="JavaScript">

< meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

< script type="text/javascript" language="javascript" src="js/AjaxHelper.js">

< /HEAD>

< body>

< form id="Form1" method="post" runat="server">

< div id="view2">

Loading

< /div>

< script type="text/javascript">

Updater ('AjaxTemplate/GetPageSrc',' view2', 'url= http://www.cnblogs.com');

< /script>

< /form>

< /body>

< /HTML>

AjaxHelper.js Summary:

Var AjaxHelperUrl = new String ("Ajax.aspx"); var Updater = function (ajaxTemplate, output, params, onComplete) {if (typeof output = = 'string') {output = $(output);} new Ajax.Request (' Ajax.aspx', {onComplete: function (transport) {if (output! = null) {output [XSS _ clean] = FormatContent (transport.responseText);} if (onComplete! = null) {onComplete (FormatContent (transport.responseText)}}, parameters: params +'& AjaxTemplate=' + ajaxTemplate}) } var SerializeForm = function (form) {return Form.serialize (form);} var FormatContent = function (str) {var content = new String (str); var prefix = new String ("

< !--AjaxContent-->

Content=content.substring (content.indexOf (prefix, 0) + prefix.length,content.length-9); return content;} UserControl GetPageSrc.ascx.cs Summary: private void Page_Load (object sender, System.EventArgs e) {lbUrl.Text = Request.Form ["url"]; System.Net.WebClient client = new System.Net.WebClient (); client.Headers.Add ("User-Agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)") Try {txtPageSource.Text = new System.IO.StreamReader (client.OpenRead (lbUrl.Text), System.Text.Encoding.UTF8). ReadToEnd ();} catch (Exception ex) {throw ex;}} this is what the editor shares with you about the Ajax-based MVC solution in the .net environment. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.