Reflection on partial update of. Net pages, partial triggering of. net pages

Reflection on partial update of. Net pages, partial triggering of. net pages

Recently added a new function to the previous module. After sorting out, we can find that the reuse rate is very low. Most of the items still need to be rewritten. Partial update is used in the function. All the solutions and improvements to achieve partial update are sorted all the way.

Most of my project development projects are developed based on Asp.net WebForm and will naturally use UpdatePanel. The advantage is that the development is fast and convenient, and of course there are a lot of problems. Then Ajax and general processing programs work together to implement asynchronous request updates. The third-party binding plug-in is used to optimize Ajax requests. 

I. UpdatePanel
Add the module to the UpdatePanel ContentTemplate. The response content is only the updated content in UpdatePanel.
For example, query

<Asp: UpdatePanel ID = "UpdatePanel1" runat = "server"> <ContentTemplate> <div style = "margin: 8px 0px;"> <asp: textBox ID = "tbKey" runat = "server" CssClass = "form-control"> </asp: TextBox> <asp: button ID = "btnQuery" runat = "server" Text = "query" CssClass = "btn-box btn-submit-box" OnClick = "btnQuery_Click"/> </div> <table class = "data-table"> <tr> <th> ID </th> <th> name </th> <th> age </th> <th> address </th> <th> Employment date </th> <th> Department </th> <th> salary </th> </tr> <asp: repeater ID = "RepeaterEmp" runat = "server"> <ItemTemplate> <tr> <td> <% # Eval ("ID ") %> </td> <% # Eval ("Name") %> </td> <% # Eval ("Age ") %> </td> <% # Eval ("Address") %> </td> <% # Eval ("JoinDate ") %> </td> <% # Eval ("Department") %> </td> <% # Eval ("Salary ") %> </td> </tr> </ItemTemplate> </asp: Repeater> </table> </ContentTemplate> </asp: UpdatePanel>

Using UpdatePanel can implement local update without writing any code for asynchronous requests. However, the performance may be affected, and the flexibility and reusability are not high.

2. Ajxa and general processing programs
First, create a general processing program, receive query parameters, and return the queried employee information. By default, all information is returned.
For example, query

P>

Ajax queries are highly flexible, but html code splicing is annoying. Of course there are many ways to improve. Next we will continue to introduce it.

Function ajaxquery () {$. ajax ({url: "/DataService/getEmployee. ashx ", type:" GET ", cache: false, data: {key: $ (" # ajaxkey "). val ()}, dataType: "json", success: function (data, textStatus) {if (data. code = "OK") {$ ("# ajaxtable tr. row "). remove (); var html = ""; for (var I = 0; I <data. res. length; I ++) {html + = "<tr class = 'row'> <td>" + data. res [I]. ID + "</td> <td>" + data. res [I]. name + "</td> <td>" + Data. res [I]. age + "</td> <td>" + data. res [I]. address + "</td> <td>" + data. res [I]. joinDate + "</td> <td>" + data. res [I]. department + "</td> <td>" + data. res [I]. salary + "</td> </tr>"} if (html = "") html + = "<tr class = 'row'> <td colspan = '7'> no records exist. Please improve the query conditions </td> </tr> "; $ ("# ajaxtable "). append (html) ;}else {alert (data.info) ;}, error: function (XMLHttpRequest, textStatus, errorThrown) {alert ("Network busy , Please refresh the page! ");}});}

3. Avalonjs improved code Splicing
Angularjs is also widely used, but it is too large. All of them find Avalonjs suitable for general development.
I previously asked a question in my blog: Is there any jquery data two-way binding plug-in with dirty checking. I just discussed it with you. I have seen a DataSet js plug-in. All data is bound to DataSet in json format. DataSet itself implements dirty check, and other controls are bound to a certain attribute of the corresponding DataSet. As long as the value of a bound control changes, you can obtain only changed data (rather than the entire json) from DataSet ). The answer is almost Angularjs. They are also basically two-way bindings, so the dirty check should be implemented by yourself.
Use Avalonjs to first introduce the js file and then define the controller
For example, query

<Div ms-controller = "avalonCtrl"> <div style = "margin: 8px 0px; "> <input type =" text "class =" form-control "ms-duplex =" key "/> <input type =" button "value =" query "ms-click = "query" class = "btn-box btn-submit-box"/> </div> <table class = "data-table"> <tr> <th> ID </th> <th> name </th> <th> age </th> <th> address </th> <th> Employment date </th> <th> Department </th> <th> salary </th> </tr> <tr ms-repeat-emp = "emps"> <td >{{ emp. ID }}</td> <td >{{ emp. name }}</td> <td >{{ emp. age }}</td> <td >{{ emp. address }}</td> <td >{{ emp. joinDate }}</td> <td >{{ emp. department }}</td> <td >{{ emp. salary }}</td> </tr> </table> </div>

Var vm = aveon. define ({$ id: "avalonCtrl", emps: [], key: "", query: function () {$. ajax ({url: "/DataService/getEmployee. ashx ", type:" GET ", cache: false, data: {key: vm. key}, dataType: "json", success: function (data, textStatus) {if (data. code = "OK") {vm. emps = data. res ;}else {alert (data.info) ;}, error: function (XMLHttpRequest, textStatus, errorThrown) {alert ("Network busy, please refresh the page! ");}});}});

Finally, return to the dirty check: if this is improved to an editable table, how can I monitor which rows have been modified? When saving, I should not submit the whole table data, but should I submit the modified row data?

Code: Download
Address: http://www.cnblogs.com/liuxiaobo93/p/5593393.html

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.