동적으로 텍스트 상자 추가 및 asp.net mvc

Question

의 데이터베이스에 값 저장 동적으로 추가 단추를 클릭하여 텍스트 상자를 추가하고 텍스트 상자를 삭제하고 마지막으로 텍스트 상자에서 목록 값을 저장할 수 있습니다. 내 모델 클래스 I는 .cshtml 코드를 알고 싶어

public class CustModel 
{ 
    public List<Cust> CustList { get; set; } 
} 

public class Cust 
{ 
    public string Name { get; set; } 
} 
My controller class 


public class HomeController : Controller 
    { 
     private DB _entities; 

     public HomeController() 
     { 
      _entities = new DbEntities(); 
     } 

     public ActionResult Index() 
     { 
       return View(_customers); 

     } 
     [HttpPost] 
     public ActionResult Index(CustModel model) 
     { 
       // save to the database 
       return View(); 

     } 
    } 

. 또는 목록 항목을 데이터베이스에 제출하는 다른 제안. 여기

Answer 1

내가 그것을 할 것입니다 방법은 다음 CustModel에서

, 나는를 IEnumerable 속성을 변경합니다. 나는 Cust를 위해 EditorTemplate을 사용할 것이고 이것은 여분의 반복을 절약 할 것이다.

public class CustModel 
{ 
    public IEnumerable<Cust> CustList { get; set; } 
} 

내 Index.cshtml보기 새, 나는 다음 양식에 내가 Custlist를 들어, 버튼 새로운 CUST을 추가 @Html.EditorFor 있고, 강력한 형식의 모델을 선언 한 버튼이 제출 간단하고 JQuery와 스크립트를 추가 할 수 달라질 수있다 Cust. jquery에서 모델 바인더가 올바르게 선택할 수 있도록 컨트롤 배열을 생성합니다.

내보기/홈 폴더에 EditorTemplates 폴더를 추가 커스트의 뷰 추가 한

@model MvcApplication2.Models.CustModel 

@{ 
    ViewBag.Title = "Home Page"; 
} 


@using (Html.BeginForm()) { 
    <fieldset> 
     <legend></legend> 
     <div id="divcust"> 
      @Html.EditorFor(m=>m.CustList) 
     </div> 
     <input id="btnAdd" type="button" value="Add Cust" onclick="AddCust();" /> 
     <br /> 
     <br /> 
     <input type="submit" value="Submit" /> 
    </fieldset> 
} 
<script> 
    function AddCust() { 
     var m = $('#divcust input:last-child').attr('name'); 
     var index = 0; 
     if (m != null && m.length > 0) { 
      index = m.split('CustList[')[1].replace('].Name', ''); 
      index++; 
     } 

     var html = '<label for=\"CustList_' + index + '__Name\">Name</label>' + 
      '<input id=\"CustList_' + index + '__Name\" class=\"text-box single-line\"' + 
      ' type=\"text\" value=\"\" name=\"CustList[' + index + '].Name\">'; 
     $('#divcust').append(html); 


    }; 
</script> 

Index.cshtml :

Cust.cshtml

@model MvcApplication2.Models.Cust 

@Html.LabelFor(m=>m.Name) 
@Html.EditorFor(m=>m.Name) 

을

모든 것이 잘 작동합니다. 새 Cust를 추가하고 저장할 수 있습니다.

내가 삭제 기능을 추가하려는 경우 , 내 컨트롤 배열의 무결성을 유지하도록주의해야합니다.