클라이언트에서 생성 된 레코드에 대해 내장 유효성 검사 사용

Question

사용자가 자바 스크립트 템플릿을 사용하여 클라이언트의 많은 레코드에 1을 추가 할 수있는 ASP.NET MVC4 응용 프로그램이 있습니다. 그것은 잘 작동하고 올바른 명명 규칙을 사용하여, 모델 바인딩은 작업 메서드에 대한 개체의 원하는 컬렉션으로 게시물 데이터를 올바르게 변환됩니다.

제 질문은,이 방법을 사용하여 추가 된 레코드에 대해 내장 된 MVC 유효성 검사를 사용하는 방법이 있습니까? 내 모델에 데이터 주석 속성을 추가했지만 클라이언트에서 새 레코드 각각에 대해 html을 생성하기 때문에 일반적으로 프로세스 작업을 수행하는 html 헬퍼를 사용할 수 없습니다.

명백히 클라이언트 측 유효성 검사를 직접 추가하고 서버에서 데이터 주석의 유효성을 검사 할 수는 있지만 이러한 유형의 접근을 위해 내장 된 유효성 검사 스택을 활용할 수있는 방법이 있는지 궁금합니다. 내 모든 유효성 검사 논리를 서버에 유지합니다.

예를 들어

Answer 1

: 보기는 두 가지 형태가 있습니다. 유치원 1 및 형식 2를

Form1에 두 부분이 있습니다.

첫 번째 부분 : 두 개의 텍스트 상자와 만들기 단추와 저장 단추가 있습니다.

두 번째 부분은 입니다.

그래서 두 개의 텍스트 상자를 채우고 유효성 검사를 통과하지 못하면 만들기 버튼을 누르면 오류 메시지가 표시됩니다. 유효성 검사를 통과하면 값을에 삽입하고 값을 form2에 삽입하십시오.

[HttpPost] 작업 Create 매개 변수 목록 모델이 있습니다.

Save (저장) 버튼을 누르면 form2의 값이 컨트롤러 모델에서 List 모델로 매핑됩니다.

모델

public class HomeModel 
{ 
    [Required] 
    public string Name { get; set; } 

    [Required] 
    public string Number { get; set; } 
} 

컨트롤러 :

[HttpPost] 
    public ActionResult Create(List<HomeModel> models) 
    { 
     // TODO: Add insert logic here 
    }  

보기 :

@model MvcApplication1.Models.HomeModel 
@{ 
    ViewBag.Title = "Create"; 
} 

<h2>Create</h2> 

@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { id = "form1" })) 
{ 
@Html.ValidationSummary(true) 

<fieldset> 
    <legend>HomeModel</legend> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.Name) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Name) 
     @Html.ValidationMessageFor(model => model.Name) 
    </div> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.Number) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Number) 
     @Html.ValidationMessageFor(model => model.Number) 
    </div> 

    <p> 
     <input type="submit" value="Create" id="btnCreate" /> 
     <input type="button" value="Save" id="btnSave" /> 
    </p> 
</fieldset> 
<table id="tb"></table> 
} 

<div id="FormInfo" style="display: none;"> 
    <form action="/Home/Create" id="form2" method="post"></form> 
</div> 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
    <script type="text/javascript"> 
     $(function() { 
      $("#form1").submit(function() { 
       var ErrorLength = $(".field-validation-error").length; 
       if (ErrorLength <= 0) { 
        var nameValue = $("#Name").val(); 
        var numberValue = $("#Number").val(); 
        InsertToForm2(nameValue, numberValue); 
        InsertToTable(nameValue, numberValue); 
       } 
       return false; 
      }); 

      $("#btnSave").click(function() { 
       $("#form2").submit(); 
      }); 
     }); 

     function InsertToForm2(nameValue, numberValue) { 
      var inputCount = $("#form2 input").length/2; 
      var combineHTML = "<input type='text' name='models[" + inputCount + "].Name' value='" + nameValue + "' /> "; 
      combineHTML += "<input type='text' name='models[" + inputCount + "].Number' value='" + numberValue + "'/> "; 
      $("#form2").append(combineHTML); 
     } 

     function InsertToTable(nameValue, numberValue) { 
      var combineHTML = "<tr><td>" + nameValue + "</td><td>" + numberValue + "</td></tr>"; 
      $("#tb").append(combineHTML); 
     } 
    </script> 
} 

Example Download