.Net 페이지 부분 업데이트 로 인 한 사고

최근 에 이전에 만 든 모듈 을 수정 하고 새로운 기능 을 추가 합 니 다.정리 해 보 니 중 용 률 이 낮 고 대부분 다시 써 야 한 다 는 것 을 알 게 되 었 다.기능 에 부분 업데이트 가 사용 되 었 고 모든 정 리 를 통 해 부분 업데이트 의 해결 방안 과 개선 을 실현 했다. 
제 가 접촉 한 프로젝트 개발 은 대부분이 Asp.net WebForm 으로 개 발 된 것 입 니 다.자 연 스 럽 게 UpdatePanel 을 사용 할 것 입 니 다.좋 은 점 은 개발 이 빠 르 고 편리 하 다 는 것 입 니 다.물론 발생 하 는 문제 도 많 습 니 다.그 다음 에 Ajax 는 일반 처리 프로그램 과 협조 하여 비동기 요청 업 데 이 트 를 실현 합 니 다.마지막 으로 제3자 바 인 딩 플러그 인 을 이용 하여 Ajax 요청 을 최적화 하 는 것 입 니 다. 
1.업데이트 패 널 
업데이트 가 필요 한 모듈 을 UpdatePanel 의 ContentTemplate 에 넣 으 면 지역 내 리 턴 은 전체 페이지 를 새로 고치 지 않 습 니 다.그리고 응답 하 는 내용 도 UpdatePanel 에서 업 데 이 트 된 내용 일 뿐 입 니 다.
 조회

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
   <div style="margin: 8px 0px;">
   <asp:TextBox ID="tbKey" runat="server" CssClass="form-control"></asp:TextBox>&nbsp;<asp:Button ID="btnQuery" runat="server" Text="  " CssClass="btn-box btn-submit-box" OnClick="btnQuery_Click" />
   </div>
   <table class="data-table">
   <tr>
    <th>ID</th>
    <th>  </th>
    <th>  </th>
    <th>  </th>
    <th>    </th>
    <th>  </th>
    <th>  </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> 

UpdatePanel 을 사용 하면 비동기 요청 코드 를 쓰 지 않 아 도 부분 업 데 이 트 를 실현 할 수 있 지만 성능 은 어느 정도 영향 을 미 칠 수 있 고 유연성,중용 성 이 높 지 않다.
2.Ajxa 와 일반 처리 프로그램
 먼저 일반 처리 프로그램 을 새로 만 들 고 조회 파 라 메 터 를 받 으 며 조회 후의 직원 정 보 를 되 돌려 주 며 기본적으로 모든 정 보 를 되 돌려 줍 니 다.
 조회 
p>

Ajax 를 사용 하여 유연성 이 높 지만 html 코드 의 조합 이 좀 번 거 롭 습 니 다.물론 개선 할 수 있 는 여러 가지 방법 이 있 습 니 다.계속해서 소개 하 겠 습 니 다.

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'>      ，       </td></tr>";
   $("#ajaxtable").append(html);
   }
   else {
   alert(data.info);
   }
  },
  error: function (XMLHttpRequest, textStatus, errorThrown) {
   alert("    ，     ！");
  }
  });
 } 

3.Avalonjs 개선 코드 조합
 Angularjs 도 많이 사용 되 지만 너무 커서 일반 개발 에 적합 한 Avalonjs 를 찾 을 수 있 습 니 다.
 나 는 이전에 블 로그 에서 이런 질문 을 한 적 이 있다.jquery 데이터 양 방향 연결 플러그 인 이 있 는 지,더러 운 검사 가 있 는 지.다만 여러분 과 토론 할 뿐 저 는 DataSet js 플러그 인 을 본 적 이 있 습 니 다.모든 데 이 터 는 json 형식 으로 연 결 된 DataSet 입 니 다.DataSet 자체 가 더러 운 검 사 를 실현 하고 나머지 컨트롤 은 해당 하 는 DataSet 의 특정한 속성 을 연결 합 니 다.바 인 딩 컨트롤 값 이 바 뀌 면 전체 json 이 아 닌 DataSet 에서 변 경 된 데 이 터 를 가 져 올 수 있 습 니 다.거의 Angularjs 라 고 대답 했다.기본 적 인 양 방향 연결 이기 때문에 더러 운 검 사 는 스스로 이 루어 져 야 한다. 
Avalonjs 를 사용 하여 먼저 js 파일 을 도입 한 다음 controller 를 정의 합 니 다.
 조회

 <div ms-controller="avalonCtrl">
  <div style="margin: 8px 0px;">
  <input type="text" class="form-control" ms-duplex="key" />
  &nbsp;
  <input type="button" value="  " ms-click="query" class="btn-box btn-submit-box" />
  </div>
  <table class="data-table">
  <tr>
   <th>ID</th>
   <th>  </th>
   <th>  </th>
   <th>  </th>
   <th>    </th>
   <th>  </th>
   <th>  </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 = 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("    ，     ！");
   }
  });
  }
 }); 

마지막 으로 더러 운 검사 로 돌아 갑 니 다.이것 을 편집 가능 한 표 로 개선 하면 어떤 줄 이 수정 되 었 는 지 어떻게 감청 합 니까?저장 할 때 전체 표 데 이 터 를 제출 하지 말고 수 정 된 줄 데 이 터 를 제출 해 야 합 니까?

본문 코드:다운로드 하 다.
 본문 주소:http://www.cnblogs.com/liuxiaobo93/p/5593393.html
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.