ASP.NET MVC에서 모달 바인딩 지원을위한 jQuery로 html 테이블 업데이트

Question

지금 사용자는 JQuery로 버튼을 클릭합니다. 매번 새로운 양식을 동적으로 추가합니다. JQuery 또는 C#에서 인덱스를 업데이트 할 수있는 방법이 필요하므로 다음과 같은 형식이 있습니다. html은 ASP.NET MVC의 사용자 정의 컨트롤에서 만들어집니다. 인덱스에 문자열을 사용하려했지만 모델 바인딩을 제대로 수행하지 않았습니다. 나는 다음과 같은 블로그 link text

// Jquery that handles user click event of the button 
// Jquery that handles user click event of the button 
// Jquery that handles user click event of the button 

    $(".addDetail").click(function() { 
    if ($("#rateFormContainer").css("display")!= "none") { 
     $.ajax({ 
      url: "/Rates/NewRateDetail/", 
      cache: false, 
      success: function(html) { 

       $("#rdContainer").append(html); 
      } 
     }); 
     $("#rateDetailMsg").empty()     
     } 
    }); 

// The end result of the view, what I want to do 
// The end result of the view, what I want to do 
// The end result of the view, what I want to do 
// Update the Index to 0 for this element 
<input type="hidden" value="0" name="RateDetail.Index" id="RateDetail_Index"> 
<input type="text" value="" name="RateDetail[0].EffectiveDate" id="RateDetail[0]_EffectiveDate"> 

// Update the Index to 1 for this element 
<input type="hidden" value="1" name="RateDetail.Index" id="RateDetail_Index"> 
<input type="text" value="" name="RateDetail[1].EffectiveDate" id="RateDetail[1]_EffectiveDate"> 

// Update the Index to 2 for this element 
<input type="hidden" value="2" name="RateDetail.Index" id="RateDetail_Index"> 
<input type="text" value="" name="RateDetail[2].EffectiveDate" id="RateDetail[2]_EffectiveDate"> 

// Use JQuery to update all items to correct indexes on sumbmit 
<input type="submit" class="prettyButton" value="Submit"> 


// ASP.NET MVC user control code 
// ASP.NET MVC user control code 
// ASP.NET MVC user control code 
// ASP.NET MVC user control code 

<%=Html.Hidden(Resources.RSINET.RateDetailIndex, "0")%> 

<table class="prettyForm"> 
<thead> 
    <th colspan="2">Add Rate Details</th> 
</thead> 
<tr> 
    <td>Effective Date</td> 
    <td><%=Html.TextBox(Resources.RSINET.RateDetailBrace + "0" + Resources.RSINET.BraceEffectiveDate)%> <a href="javascript:NewCal('RateDetail[<%="0"%>].EffectiveDate','mmddyyyy')"><img src="../../Content/Images/cal.gif" width="16" height="16" border="0" alt="Pick a date"/></a></td> 
</tr> 
<tr> 
    <td>Expiration Date</td> 
    <td><%=Html.TextBox(Resources.RSINET.RateDetailBrace + "0" + Resources.RSINET.BraceExpirationDate)%> <a href="javascript:NewCal('RateDetail[<%="0"%>].ExpirationDate','mmddyyyy')"><img src="../../Content/Images/cal.gif" width="16" height="16" border="0" alt="Pick a date"/></a></td> 
</tr> 
<tr> 
    <td>Condition Type</td> 
    <td><%=Html.DropDownList(Resources.RSINET.RateDetailBrace + "0" + Resources.RSINET.BraceConditionType, ViewData.Model.CondT, "Choose Option")%></td> 
</tr> 
<tr> 
    <td>Condition Value</td><td><%=Html.TextBox(Resources.RSINET.RateDetailBrace + "0" + Resources.RSINET.BraceConditionValue)%></td> 
</tr> 
<tr> 
    <td>Rate</td><td><%=Html.TextBox(Resources.RSINET.RateDetailBrace + "0" + Resources.RSINET.BraceRate)%> </td> 
</tr> 
<tr> 
    <td>Unit</td><td><%=Html.DropDownList(Resources.RSINET.RateDetailBrace + "0" + Resources.RSINET.BraceUnit, ViewData.Model.Unit, "Choose Option")%></td> 
</tr> 
<tr> 
    <td>Status</td> 
    <td><%=Html.DropDownList(Resources.RSINET.RateDetailBrace + "0" + Resources.RSINET.BraceActiveItem, ViewData.Model.Active, "Choose Option")%></td> 
</tr> 


</table> 

Answer 1

편집을 게시 읽고 : 여기 당신이 필요하다고 생각 자바 스크립트 코드입니다. 이 경우 "/ Rages/NewRateDetail"이 <table class="prettyForm">의 다른 복사본을 반환한다고 가정합니다. 아래의 완전한 HTML 형식의 독립 실행 형 예제를 참조하십시오.

$(".addDetail").click(function() { 
if ($("#rateFormContainer").css("display")!= "none") { 
    $.ajax({ 
     url: "/Rates/NewRateDetail/", 
     cache: false, 
     success: function(html) { 

      $("#rdContainer").append(html); 

       $("#rdContainer table.prettyForm").each(function(i, el) { 

        $("input,select,textarea", el).each(function(j,formEl) { 
         $(formEl) 
          .attr("name", $(formEl).attr("name").replace(/\[\d\]/, "["+ i +"]")) 
          .attr("id", $(formEl).attr("id").replace(/\[\d\]/, "["+ i +"]")); 
        }); 
       }); 

     } 
    }); 
    $("#rateDetailMsg").empty()     
    } 
}); 

'추가'버튼을 클릭 할 때마다 전체 'prettyForm'테이블을 복사하는 코드입니다. 그런 다음 각 테이블을 반복하고 해당 루프의 현재 인덱스에 해당하는 id 및 name 특성을 업데이트합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#add").click(function(e) { 
       e.preventDefault();    

       $("table.prettyForm:first").clone().insertBefore(this); 

       $("table.prettyForm").each(function(i, el) { 

        $("input,select,textarea", el).each(function(j,formEl) { 
         $(formEl) 
          .attr("name", $(formEl).attr("name").replace(/\[\d\]/, "["+ i +"]")) 
          .attr("id", $(formEl).attr("id").replace(/\[\d\]/, "["+ i +"]")); 
        }); 
       }); 

       return false; 
      }) 
     }); 
    </script> 
</head> 

<body> 
    <table class="prettyForm"> 
     <thead> 
      <th colspan="2"> 
      Add Rate Details 
      <input type="hidden" value="0" name="RateDetail.Index" id="RateDetail_Index"> 
      </th> 
     </thead> 
     <tr> 
      <td>Effective Date</td> 
      <td><input type="text" value="" name="RateDetail[0].EffectiveDate" id="RateDetail[0]_EffectiveDate"></td> 
     </tr> 
     <tr> 
      <td>Expiration Date</td> 
      <td><input type="text" value="" name="RateDetail[0].ExpirationDate" id="RateDetail[0]_ExpirationDate"></td> 
     </tr> 
     <tr> 
      <td>Status</td> 
      <td><select name="RateDetail[0].Status" id="RateDetail[0].Status"></select></td> 
     </tr> 
    </table> 
    <button id="add">Add Form</button> 
</body> 
</html>