. NET page local update raises the Ponder

Recently, in modifying a previously made module, add a new feature. Collation of the next found that the reuse rate is very low, most of the things still need to be re-written. Functions used in the local update, all the way to achieve a partial update of the solution and improvement.

Most of the projects I contacted were developed with ASP. WebForm, which naturally uses the UpdatePanel, the advantage is the development is quick and convenient, of course, the problem is also a lot of. The Ajax and generic handlers are then implemented to implement asynchronous request updates. Finally, the third-party binding plugin is used to optimize the AJAX request.

First, UpdatePanel

The module that needs to be updated is placed in the UpdatePanel ContentTemplate, and the postback within the zone will not refresh the entire page. And the content of the response is only the content of UpdatePanel.

such as: Query

<asp:updatepanel id= "UpdatePanel1" runat= "Server" > <ContentTemplate> <p 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 "/> </p> <tab    Le class= "data-table" > <tr> <th>ID</th> <th> name </th> <th> age </th>   <th> Address </th> <th> Entry date </th> <th> Department </th> <th> Salary </th> </tr> <asp:repeater id= "repeateremp" runat= "Server" > <ItemTemplate> <tr> <td><% #Eval ("ID"     )%></td> <td><% #Eval ("Name")%></td> <td><% #Eval ("Age")%></td> <td><% #Eval ("Address")%></td> <td><% #Eval ("Joindate")%></td> <td><%  #Eval ("Department")%></td>   <td><% #Eval ("Salary")%></td> </tr> </ItemTemplate> </asp:Repeater> </ Table> </ContentTemplate> </asp:UpdatePanel>

The

uses UpdatePanel to implement local updates without writing any asynchronous requests, but performance has some impact and is less flexible and reusable.

2.Ajxa and general handlers

first create a new generic handler, receive query parameters, return the employee information after the query, and return all information by default.

such as: Query

p>




Using AJAX query flexibility is high, but the HTML code splicing a bit annoying, of course, there are many ways to improve. Continue with the introduction below.

function Ajaxquery () {$.ajax ({url: "/dataservice/getemployee.ashx", type: "GET", Cache:false, data: {key: $ ("#aja Xkey "). Val ()}, DataType:" JSON ", success:function (data, Textstatus) {if (Data.code = =" OK ") {$ (" #ajaxtable TR.R   ow "). Remove ();   var html = ""; for (var i = 0; i < data.res.length; i++) {html + = "<tr class= ' Row ' ><td>" + data.res[i].id + "&LT;/TD&G T;<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 record, please improve   Query conditions </td></tr> ";   $ ("#ajaxtable"). Append (HTML);   } else {alert (data.info); }}, Error:function (XMLHttpRequest, Textstatus, Errorthrown) {alert ("The network is busy, please refresh the page!")  "); }  }); }

Third, Avalonjs improved code stitching

Angularjs used more, but too large, all find a more suitable for the general development of the AVALONJS.

I asked a question in the Bo before: there is no jquery data bidirectional binding plug-ins, dirty check. Just to discuss with you, I have seen a DataSet JS plugin, all the data in the form of JSON binding dataset,dataset itself to implement dirty checks, the rest of the controls are bound to a property of the corresponding dataset. As long as the value of a bound control changes, you can get only the changed data from the dataset (not the entire JSON). The answer is almost angularjs. It is also the basic two-way binding, so dirty check is to be implemented by itself.

Use AVALONJS to first introduce the JS file and then define the controller

such as: Query

<p ms-controller= "Avalonctrl" >  <p 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"/>  </p>  <table class= "data-table" >  < tr>   <th>ID</th>   <th> name </th>   <th> age </th>   <th> Address </th>   <th> Entry dates </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> </p>

var vm = avalon.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 ("The network is busy, please refresh the page!") ");   }  });  } });

Finally back to the dirty check: If this is improved into an editable table, how to listen to which rows are modified, save should not submit the entire table data, but should commit the modified row data?

The above is. NET page local update caused by the thinking of content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

