Modal의 가변 크기 목록

Question

내 MVC 애플리케이션의 요구 사항은 은행 거래를 저장하는 것입니다.

트랜잭션 개체는 트랜잭션 행을 포함합니다.

트랜잭션 개체는 하나 이상의 트랜잭션 행을 가질 수 있습니다. 트랜잭션 행의 값은 합계로 트랜잭션의 총량이됩니다.

사용자가 새 트랜잭션을 만들면 추가 단추가있는 하나의 트랜잭션 줄이 표시됩니다. 사용자가 추가를 클릭하면 다른 추가 버튼과 함께 새로운 거래 행이 나타납니다. 따라서 원하는만큼 줄을 추가 할 수 있습니다.

보기로 보내는 모델에는 목록 선 속성이 있으며 기본적으로 하나의 행이 추가되어 있습니다.

나는 10 개의 라인을 추가 할 예정이었습니다 (10 개 ... 99 %의 시간은 없었을 것입니다. 하나만 있습니다). 그리고 나서보기에 은선이 있습니다. 그러나 이것은 더러운 것처럼 보입니다. 추가 버튼을 클릭 할 때 내 목록 <에 아이템을 추가하는 클라이언트 쪽에서 이것을 처리 할 수있는 방법이 있습니까?

현재 사기 코드 :

<div class="form-group"> 
    <label for="cmbCategory0" class="col-lg-1 control-label">Category:</label> 
    <div class="col-lg-3"> 
     @Html.DropDownListFor(x => x.Transaction.TransactionLines[0].CategoryId, 
            new SelectList(Model.TransactionReferences.Categories, "Value", "Text", Model.Transaction.TransactionLines[0].CategoryId), "Select one", 
            new { @onchange = "populateSubCategory(0)", @class = "cmbCategory0 form-control" }) 
    </div> 
    <div class="col-lg-3"> 
     @Html.DropDownListFor(x => x.Transaction.TransactionLines[0].SubCategoryId, 
            new SelectList(Model.TransactionReferences.SubCategories, "Value", "Text", Model.Transaction.TransactionLines[0].SubCategoryId), "Select one", 
            new { @class = "cmbSubCategory0 form-control" }) 
    </div> 
    <div class="col-lg-2"> 
     @Html.DropDownListFor(x => x.Transaction.TransactionLines[0].CostCentreId, 
            new SelectList(Model.TransactionReferences.CostCentres, "Value", "Text", Model.Transaction.TransactionLines[0].CostCentreId), "None", 
            new { @class = "cmbCostCentre0 form-control" }) 
    </div> 
    <label for="txtAmount0" class="col-lg-1 control-label">Amount:</label> 
    <div class="col-lg-1"> 
     @Html.TextBoxFor(x => x.Transaction.TransactionLines[0].Amount, new { @class = "txtAmount form-control input-money", @placeholder = "Amount", @type = "number", @min = 0, @step = "any" }) 
    </div> 
    <div class="col-lg-1"> 
     <a class="btn btn-info btnadd0" onclick="showSplit(0)">Add</a> 
    </div> 

</div> 


<div class="form-group row1 hide"> 
    <label for="cmbCategory1" class="col-lg-1 control-label">Category:</label> 
    <div class="col-lg-3"> 
     @Html.DropDownListFor(x => x.Transaction.TransactionLines[1].CategoryId, 
     new SelectList(Model.TransactionReferences.Categories, "Value", "Text", Model.Transaction.TransactionLines[1].CategoryId), "Select one", 
            new { @onchange = "populateSubCategory(1)", @class = "cmbCategory1 form-control" }) 
    </div> 
    <div class="col-lg-3"> 
     @Html.DropDownListFor(x => x.Transaction.TransactionLines[1].SubCategoryId, 
     new SelectList(Model.TransactionReferences.SubCategories, "Value", "Text", Model.Transaction.TransactionLines[1].SubCategoryId), "Select one", 
            new { @class = "cmbSubCategory1 form-control" }) 
    </div> 
    <div class="col-lg-2"> 
     @Html.DropDownListFor(x => x.Transaction.TransactionLines[1].CostCentreId, 
     new SelectList(Model.TransactionReferences.CostCentres, "Value", "Text", Model.Transaction.TransactionLines[1].CostCentreId), "None", 
            new { @class = "cmbCostCentre1 form-control" }) 
    </div> 
    <label for="txtAmount" class="col-lg-1 control-label">Amount:</label> 
    <div class="col-lg-1"> 
     @Html.TextBoxFor(x => x.Transaction.TransactionLines[1].Amount, new { @class = "txtAmount form-control input-money", @placeholder = "Amount", @type = "number", @min = 0, @step = "any" }) 
    </div> 
    <div class="col-lg-1"> 
     <a class="btn btn-info btnadd1" onclick="showSplit(1)">Add</a> 
    </div> 

</div> 

Answer 1

확인합니다.

선에 대한 PartialView를 만들고 컨트롤러에 PartialView 결과로 반환하는 메서드가 있습니다. 보기에서 @ Ajax.Action() 도우미를 사용하여 컨트롤러에서 부분 뷰를 반환하는 작업의 이름을 지정하면서 링크를 생성합니다.

실제 코드와 뷰의 스 니펫이 없으면 더 구체적인 것은 아니지만 그것은 광범위한 스트로크입니다.