ASP.NET에서 반복적 인 Ajax 양식을 사용할 수 있습니까?

Question

X 번호가 Ajax 인 목록 페이지에서 사이트 일관성을위한 마스터 페이지 안에 있습니다.

튜토리얼 내가 ASP.NET Ajax에 걸쳐 있습니다. 내 <table></table> 레이아웃 주위에 <form><asp:ScriptManager ID="asm" runat="server"/></form>이 필요합니다. 나는 각각의 <tr></tr>이 그 자체로 형식이 될이 함수 (각 코드는 개별 Ajax 요소)라고 생각할 것이다. 따라서 코드에 특정한 액션은 해당 부분의 Ajax 비동기 포스트 백만 트리거합니다. 다음은 올바른 레이아웃이 어떻게 생겼는지 상상 한 내용입니다.

<table> 
    <thead> 
     <tr> 
      <th> 
       Code 
      </th> 
      <th> 
       Description 
      </th> 
      <th> 
       Document 
      </th> 
      <th> 
       Customer Contact Required for Resolution 
      </th> 
      <th> 
       Associate 
      </th> 
      <th> 
       Shareholder 
      </th> 
      <th> 
       Customer 
      </th> 
      <th> 
       Regulatory 
      </th> 
      <th> 
       Root Cause 
      </th> 
      <th> 
       Investor Requirements 
      </th> 
     </tr> 
    </thead> 

    <tbody> 
     <% foreach (var item in GetCodes()) 
     { %> 
      <tr> 
       <form><asp:ScriptManager ID="asm" runat="server"/> 
       <asp:UpdatePanel runat="server"> 
        <td><%=item.Code %></td><td>item.Description</td><td><%=item.Document %></td> 
        <td><asp:ListBox ID="lbAssociate" /></td> 
        <td><asp:ListBox ID="lbShareholder" /></td> 
        <td><asp:ListBox ID="lbCustomer" /></td> 
        <td><asp:ListBox ID="lbRegulatory" /></td> 
        <td><asp:dropdownlist ID="ddlRoot" /></td> 
        <td><asp:CheckBox 
         ID="_ckbAllInvestorRequirements" 
         runat="server" 
         Text="All" 
         onclick="AllInvestorClicked()" /> 
         <asp:CheckBoxList 
         ID="_cblInvestorRequirements" 
         runat="server"> 
         </asp:CheckBoxList></td> 
        <td><asp:Button ID="Submit" Text="Submit" runat="server" /></td> 
       </asp:UpdatePanel> 
       </form> 
      </tr> 
     <% } %> 
    </tbody> 
</table> 

반복 Ajax 미니 폼의 올바른 레이아웃입니까? XHTML이 <form> 인 <table>이라는 아이디어가 마음에 들지 않으므로 어떻게 내놓을 수 있습니까? 전체 테이블을 하나의 양식에 배치하면 단일 항목 대신 각 항목마다 모든 항목이 다시로드됩니다.

Answer 1

jQuery Ajax를 사용하여 페이지에서 직접 PageMethod를 호출했습니다. this 방법을 사용하면 <form> 또는 <asp:UpdatePanel>이 필요하지 않았습니다.

<script type="text/javascript"> 
//<![CDATA[ 
    function submitAjax(controls) { 
     //$("#ajaxResult").text("submitCalled:" + code); 
     function quoteOrNull(value) { 
      if (typeof value == "undefined" || value == null) 
       return "null"; 
      else 
       return "'" + value + "'"; 
     }; 
     var all = controls.All.attr('checked'); 
     var investors = []; 
     controls.Boxes.each(function(index,item) { 
      if (item.checked || all) 
       investors.push(item.value); 
     }); 
     var message = "{'code':'" + controls.Code 
       + "','associate':" + quoteOrNull(controls.Associate.val()) 
       + ",'shareholder':" + quoteOrNull(controls.Shareholder.val()) 
       + ",'customer':" + quoteOrNull(controls.Customer.val()) 
       + ",'regulatory':" + quoteOrNull(controls.Regulatory.val()) 
        + ",'rootCause':" +quoteOrNull(controls.Rootcause.val()) 
        + ",'investors':[" + investors +"]" 
       + "}"; 
     $.fn.wait = function(time, type) { 
      time = time || 1000; 
      type = type || "fx"; 
      return this.queue(type, function() { 
       var self = this; 
       setTimeout(function() { 
        $(self).dequeue(); 
       }, time); 
      }); 
     }; 

     $.ajax({ 
      type: "POST", 
      url: "List.aspx/Save", 
      data: message, //Get form values 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function(msg) { 

       var value = msg.d; 
       if (msg.d.HasError == false) { 
        $("#ajaxResult").text("Ajax success").removeClass("errormsg"); 
        controls.Row.addClass("complete"); 
        controls.Button.val("Edit"); 
        controls.Result.text("Success").removeClass("errormsg"); 
        controls.Result.show().wait(2000).fadeOut("slow"); 
        if (controls.Associate.val() && controls.Shareholder.val() && controls.Customer.val() 
         && controls.Regulatory.val()) { 
         var value = parseInt(controls.Associate.val(), 10) + parseInt(controls.Shareholder.val(), 10) 
         + parseInt(controls.Customer.val(), 10) 
         + parseInt(controls.Regulatory.val(), 10); 
         controls.Severity.text("Severity: " + (value/4)).fadeIn("slow"); 

        } 
        // else controls.Severity.text("Incomplete").fadeIn("slow").wait(1500).fadeOut("slow"); 
        function disable(item) { item.attr("disabled", "disabled"); } 
        disable(controls.Associate); 
        disable(controls.Shareholder); 
        disable(controls.Customer); 
        disable(controls.Regulatory); 
        disable(controls.Rootcause); 
        disable(controls.All); 
        disable(controls.Boxes); 
       } 
       else { 
        controls.Result.text("Creation failure:" + msg.d.ErrorMessage).addClass("errormsg").show(); 
        $("#ajaxResult").text("Ajax success, creation failure:" + msg.d.ErrorMessage).addClass("errormsg"); 
       } 

       // span.attr("style", "color:White"); 
       //span.text("Ajax success:" + msg.d).show().wait().fadeOut("slow"); 
      }, 
      error: function(request, textStatus, errorThrown) { 
       // var span = $(formSelector + " div.submit span"); 
       controls.Result.text("Ajax failure").addClass("errormsg").show().wait(3500).fadeOut("slow"); 
       $("#ajaxResult").text("Ajax failure:" + request.statusText).addClass("errormsg"); 
       // span.attr("style", "color:Red"); 
       // span.text("*" + request.statusText).show().wait().fadeOut("slow"); 

      } 
     }); 
    }; 
    //]]> 
</script> 

다음 버튼은 다음과 같습니다 제출

<input type="button" value="<%=defect.Assessment==null?"Save":"Edit" %>" name="submit" onclick="codeButton('<%=CurrentDefect.Code %>');" /> 

Answer 2

불행히도이 작업을 수행하려면 UpdatePanel에 전체 표를 포장해야합니다. 당신이 두렵다면 느려질 것입니다. 먼저 시도하십시오. UpdatePanels에서 새로 고침 빈도로 테이블을 래핑했을 때 항상 즐겁게 놀랐습니다.

당신이 찾고있는 기능을 제공하는 ASP.NET Dynamic Data을 살펴볼 수도 있습니다.

Answer 3

CSS-fu의 강도에 따라 양식 값 주위에 DIV 태그가있는 CSS를 사용하여 비슷한 레이아웃을 수행 할 수 있습니다.

<% foreach (var item in GetCodes()) 
    { %> 
<form> 
    <asp:ScriptManager ID="asm" runat="server"/> 
    <asp:UpdatePanel runat="server"> 
     <div id="Row"> 
     <div id="Associate"><asp:ListBox ID="lbAssociate" /></div> 
     <div id="Shareholder">... etc. 
    </div> 
    </asp:UpdatePanel> 
</form> 
<% } %> 

글로벌 UpdatePanel이 원하는 성능을 제공하지 않으면이 경로를 사용해보십시오.

Answer 4

페이지의 모든 섹션에서 고유 한 상태를 유지하려면 ISCriptControl 및 javascript WebRequests를 찾아야합니다. 업데이트 패널만큼 쉬운 것은 아니지만 사용자가 기하 급수적으로 빠르며 의도를 달성 할 수있게 해줍니다.

마스터 페이지에는 IScriptControl을 상속하는 많은 컨트롤이 있습니다. 이 작업을 올바르게 수행하면 모두 자신의 작은 독립적 인 세상이며, 사용자 데이터 등은 없습니다. IScriptControl을 올바르게 구현하고 해당 컨트롤의 dom 요소 중 하나에 연결된 모든 컨트롤에는 연결된 javascript 파일이 있습니다.

자바 스크립트 파일은 개체처럼 동작하며 개별 dom 요소에 연결됩니다. aspx 페이지에 javascript webrequests를 수행하여 해당 섹션에 대한 데이터를 보내고 검색 할 수 있으며 나머지 페이지는 염려 할 필요가 없습니다.

자바 스크립트 호출은 렌더링을 재정의 할 수 있으므로 요청 데이터를 처리 한 후에 필요한 부분 만 되돌려 보낼 수 있습니다.

그러면 서버에서 html을 다시 가져올 수 있고 그 indvidual dom 요소 만 업데이트 할 수 있습니다. 당신은 잡을 수있는 자바 스크립트 이벤트가 있기 때문에 데이터가 돌아 왔음을 알 수 있습니다.