ASP. net mvc using UpdatePanel

I believe everyone knows about UpdatePanel in ASP. NET AJAX. Unfortunately, the birth of the ASP. NET MVC Framework "destroys" a large number of PostBack-based controls. The first thing to do is UpdatePanel. Without PostBack, UpdatePanel loses all its functions. It is even better to bind some controls, at least they can be used for display. After sighing for UpdatePanel, we began to miss the advantages of UpdatePanel: "Transparent ". With the help of UpdatePanel, AJAX operations are almost completely transparent to developers. We only need to wrap the content that requires AJAX updates with UpdatePanel. Everything is so elegant.
Can we save UpdatePanel in ASP. net mvc? Maybe yes, but it is more like an "impossible task ". I am not the legendary atango, so it seems more feasible to customize an AJAX solution for ASP. NET MVC. Although we will not demand the perfection of a new thing from its birth, even if it is just a prototype, it must strictly abide by the following principles:

◆ Do not destroy the Protocol (collaboration, responsibilities, etc.) in MVC)

◆ Transparent to developers as much as possible Nikhil Kothari once proposed his AJAX solution under ASP. net mvc framework. If you do not know his practice, I will summarize it here first. Nikhil extends the Controller to support an Ajax operation, so we can write the following code in the Code:

Public class TaskListController: AjaxController {
...
Public void CompleteTask (int taskID ){
If (String. IsNullOrEmpty (Request. Form ["deleteTask"]) = false ){
InvokeAction ("DeleteTask ");
Return;
}

Task task = _ taskDB. GetTask (taskID );
If (task! = Null ){
_ TaskDB. CompleteTask (task );
}

If (IsAjaxRequest ){
If (task! = Null ){
RenderPartial ("TaskView", task );
}
}
Else {
RedirectToAction ("List ");
}
}
...
}

Like AjaxController, Nikhil also provides some extension methods for ViewPage and ViewControl. Therefore, we can see the following code in View (List. aspx:

<Div id = "taskList">
<% Foreach (Task in Tasks) {%>
<Div>
<% This. RenderPartial ("TaskView", task); %>
</Div>
<% }%>
</Div>

Both View and Controller have calls to the RenderPartiel method. Their function is to output an HTML code generated by "Partial Template" to the client. In the default configuration of ASP. net mvc, the Partial Template is User Control. In the Partial Template of TaskView, we can see some auxiliary methods:

<Div id = "taskItem <% = Task. ID %> <span style =" color: #800000; ">" class = "taskPanel">
<% Ajax. Initialize (); %>
<% This. RenderBeginAjaxForm (
Url. Action ("CompleteTask "),
New {
Update = "taskItem" + Task. ID,
UpdateType = "replace ",
Completed = "endUpdateTask"}); %>

<Input type = "hidden" name = "taskID" value = "<% = Task. ID %>"/>
<Input type = "submit" class = "completeButton" name = "completeTask" value = "Done! "/>
<Input type = "submit" class = "deleteButton" name = "deleteTask" value = "Delete"/>
<Span> <% = Html. Encode (Task. Name) %> </span>

<% This. RenderEndForm (); %>
<% Ajax. RenderScripts (); %>
</Div>
These auxiliary methods are used to generate tags and scripts that trigger AJAX updates. When you click the submit button between the tags generated by RenderBeginAjaxForm and RenderEndForm, the webpage sends an AJAX request to the server, and the server Action finally outputs the HTML generated by a Partial Template through the RenderPartial method.

The HTML output by the server end will be replaced or added to an element of the page. This forms an AJAX effect. This solution looks cool in some aspects, especially the generated code can be added to an element, not just as an UpdatePanel replacement, for example, Nikhil uses this feature in his example to implement an add function. However, it seems that this solution is not ideal if we use the previously proposed principles.

The reason is simple, because it is not transparent.

Some people also commented that the logic in the Controller should not be processed differently based on the AJAX request or not (the Nikhil Solution uses RenderPartial to replace RenderView for AJAX operation output ), therefore, this solution undermines the role of MVC. I don't think so, but I hope to do this, because doing so means absolute transparency. Absolute transparency means that the Controller has completely handed over the AJAX decision of an application to the client, which is ideal because AJAX is completely a concept of a presentation layer. The UpdatePanel in ASP. net ajax performs well in this aspect (although it is far from perfect). Therefore, I finally decided to develop a component similar to UpdatePanel for ASP. NET MVC. Fortunately, ASP. net mvc uses the WebForm page as the view template by default. Under this powerful model, it does not seem very difficult to build such an AJAX solution.

I name this control MvcAjaxPanel. The biggest difference between MvcAjaxPanel and UpdatePanel is that the latter receives PostBack, while the former only receives normal HTTP requests. Post "Back" means that after the Post, the original Page is returned, and ASP. net mvc requests are usually directed to different pages. Therefore, how to update content across pages is the primary solution of MvcAjaxPanel. Finally, I chose to specify an UpdateAreaID for each MvcAjaxPanel.

<Mvc: MvcAjaxPanel runat = "server" ID = "mvcAjaxPanel" UpdateAreaID = "Header">
...
</Mvc: MvcAjaxPanel>

When a page sends an AJAX request to the server, the UpdateAreaID information in the page is attached, and the server Action does not realize this, therefore, a view template is still specified according to the common logic and HTML is output. However, if the MvcAjaxPanel in the View template finds that this request is actually an agreed AJAX request (note that only the View component realizes that this is a request nature ), the new method is used to replace the standard output. In this case, the template will find the MvcAjaxPanel with the same attribute value based on the UpdateAreaID passed by the client and output the content selectively. On the client, the corresponding JavaScript code will receive data from the server and update the corresponding area on the page.

Obviously, MvcAjaxPanel has many similarities with UpdatePanel, and is transparent to some extent. In addition, compared with the Nikhil solution, a very important advantage is that multiple regions in the page can be updated at a time-in fact, this is one of the characteristics of UpdatePanel. In addition, this method of transparency to the Controller has a natural feature, that is, the ability to easily switch pages in browsers that do not support AJAX.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page