Ajax에서 Validationsummary에 오류 메시지 표시

Question

목표 :
입력을 기반으로 오류를 검색하는 경우 웹 페이지를 새로 고치지 않고 Ajax와 관련하여 ValidationSummary에 표시되어야합니다.

문제 :
나는 그것을 만들려고 노력했지만 잘 작동하지 않습니다.

어떤 부분이 누락 되었습니까?

감사합니다.

정보 :
* 일부 웹 페이지를 찾았지만 정확하게 제 목적에 부합하지 않습니다. 내가 ASP.net의 MVC를 사용하고 있습니다 *

@model WebApplication1.Controllers.PersonnelModel 

@{ 
    ViewBag.Title = "Ajax"; 
} 

<h2>Ajax</h2> 



<h2>AjaxViewModel</h2> 
@using (Html.BeginForm("HtmlViewModel", "Home", null)) 
{ 
    @Html.ValidationSummary(true) 

    <fieldset> 
     <legend>PersonnelModel</legend> 
     <div class="editor-label"> 
      @Html.LabelFor(model => model.UserName) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.UserName) 
      @Html.ValidationMessageFor(model => model.UserName) 
     </div> 
     <div class="editor-label"> 
      @Html.LabelFor(model => model.MailAdress) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.MailAdress) 
      @Html.ValidationMessageFor(model => model.MailAdress) 
     </div> 
    </fieldset> 
    <p> 
     <input type="submit" value="Html Form Action" /> 
    </p> 
} 

<br/> 
<br /> 




<h2>AjaxViewModel</h2> 
@using (Ajax.BeginForm("AjaxViewModel", "Home", new AjaxOptions { UpdateTargetId = "result" })) 
{ 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <legend>PersonnelModel</legend> 

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

     <div class="editor-label"> 
      @Html.LabelFor(model => model.MailAdress) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.MailAdress) 
      @Html.ValidationMessageFor(model => model.MailAdress) 
     </div> 
    </fieldset> 
    <p> 
     <input type="submit" value="Ajax Form Action" /> 
    </p> 
} 



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/jquery-ajax-unobtrusive@3.2.4/jquery.unobtrusive-ajax.min.js"></script> 

---

using System; 
using System.Collections.Generic; 
using System.ComponentModel.DataAnnotations; 
using System.Linq; 
using System.Threading.Tasks; 
using System.Web; 
using System.Web.Mvc; 
using System.Web.Security; 

namespace WebApplication1.Controllers 
{ 
    public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      return View(); 
     } 


     [HttpPost] 
     public ActionResult HtmlViewModel(PersonnelModel Pmodel) 
     { 
      return Content("Hi " + Pmodel.UserName + ", Thanks for the details, a mail will be sent to " + Pmodel.MailAdress + " with all the login details.", "text/html"); 
     } 


     [HttpPost] 
     public ActionResult AjaxViewModel(PersonnelModel Pmodel) 
     { 
      /* 
      ModelState.AddModelError("", "login is fail"); 
      return View("Index", Pmodel); 
      */ 

      return Content("Hi " + Pmodel.UserName + ", Thanks for the details, a mail will be sent to " + Pmodel.MailAdress + " with all the login details.", "text/html"); 
     } 

    } 



    public class PersonnelModel 
    { 
     [Required(ErrorMessage = "UserName Required.")] 
     public string UserName { get; set; } 

     [Required(ErrorMessage = "Email id Required.")] 
     public string MailAdress { get; set; } 
    } 

} 

Answer 1

편집 - 2017년 3월 11일이

이 부분 뷰를 생성 할 수있는 쉬운 방법이 있습니다 양식의 경우 Form.cshtml으로 전화하고 양식에 필요한 마크 업을 해당 페이지로 이동하십시오. 아약스 양식의 경우 data-ajax-mode 속성 값을 replace 및 data-ajax-update 값을 동일한 양식의 ID로 설정하십시오.

당신이 Ajax.BeginForm 도우미 메서드를 사용하는 경우, 이것은 당신이 작업 방법, 지금 간단한 전화를, 당신의 기본보기에 지금이 부분보기

@model PersonnelModel 
<h2>My form below</h2> 
@Html.Partial("Form",Model) 

을

@model PersonnelModel 
@using (Ajax.BeginForm("Create", "Home", 
    new AjaxOptions { UpdateTargetId = "myform", 
           InsertionMode = InsertionMode.Replace },new { id="myform"})) 
{ 
    @Html.ValidationSummary("", true) 

    @Html.TextBoxFor(f => f.UserName) 
    @Html.ValidationMessageFor(model => model.UserName) 

    @Html.TextBoxFor(f => f.MailAdress) 
    @Html.ValidationMessageFor(model => model.MailAdress) 

    <input type="Submit" id="submit" value="Submit" class="btn btn-default" />  
} 

을 수행하는 방법이다 모델 상태 유효성 검사가 실패하면 부분 뷰를 반환합니다. (때문에 양식 및 모델 상태 유효성 검사가 실패 제출할 때

public ActionResult Create(PersonnelModel model) 
{ 
    if (ModelState.IsValid) 
    { 
     // to do : Save 
    } 
    if (Request.IsAjaxRequest()) 
    { 
     return PartialView("Form",model); 
    } 
    return View(model); 
} 

지금, 액션 메소드 코드 (검증 헬퍼에 의해 생성 된) 검증 오류 메시지와 부분 뷰 결과를 반환하고 jquery.unobtrusive-ajax.js 라이브러리 코드를 대체합니다 jquery selector #data-ajax-update (양식 태그와 내부 내용) 결과의 내용을 서버에서 다시 응답과 함께 지정하여 data-ajax-mode="replace"으로 지정했습니다.

이렇게해야합니다. (아래)

---

면도칼보기가 실행됩니다 때 Html.ValidationSummary 메소드가 실행됩니다 예전 방식에 비해 적은 클라이언트 측 코드. 정상적인 양식 게시물 (아약스가 아닌)을 수행하는 경우, 모델 유효성 검사가 실패하고 (예 : 코드를 작성한다고 가정 할 때) 면도기보기 코드가 실행되고 ValidationSummary 메서드가 유효성 검사 오류를 읽으면 작업 메서드는 일반적으로 동일한보기로 돌아갑니다 모델 상태 사전에서 추출하여 오류 메시지를 렌더링합니다.

당신이 Ajax.BeginForm 도우미 메서드를 사용하면 도우미가 일부 추가 데이터 양식에 속성 및만큼 당신이 jquery.unobtrusive-ajax.min.js 스크립트 파일을 포함 것처럼, 형태가 납치 될 것이다 제출하고 아약스 양식 대신에 제출 할 것 생성합니다.

모델 유효성 검사 메시지를 렌더링하려는 경우 모델 유효성 검사 오류를 명시 적으로 읽고이를 클라이언트 측 코드가 읽고 UI에 표시 할 수있는 JSON 응답으로 반환해야합니다. 보기에 지금

[HttpPost] 
public ActionResult Index(PersonnelModel model) 
{ 
    if (ModelState.IsValid) 
    { 
     return Json(new {status = "success", message= "Thanks for the details"}); 
    } 
    else 
    { 
    var errors = new List<string>(); 
    foreach (var modelStateVal in ViewData.ModelState.Values) 
    { 
     errors.AddRange(modelStateVal.Errors.Select(error => error.ErrorMessage)); 
    } 
    return Json(new {status = "validationerror", errors = errors}); 
    } 
} 

, 당신은 응답 JSON에게 내가이 과부하로 @Html.ValidationSummary 방법을 사용

@using (Ajax.BeginForm("Index", "Home", new AjaxOptions { OnSuccess = "OnSuccess", })) 
{ 
    @Html.ValidationSummary("", true) 
    @Html.TextBoxFor(model => model.MailAdress) 

    <!--Your other form input elements--> 
    <input type="submit" value="Html Form Action" /> 
} 

주를 처리하기 위해 양식을 시작하기 전에 아약스의 성공 핸들러를 가지고 있는지 확인하고 빈 문자열을 전달 최초의 param로서. 이 클래스는 항상 validation-summary-valid 클래스의 ul 요소를 렌더링합니다.

이제 OnSuccess 함수를 만들고 응답을 확인하고 응답에 상태 속성이 있고 값이 validationerror인지 확인하십시오. 그렇다면 오류 컬렉션을 반복하고 오류가있는 새로운 li 요소를 추가하십시오.

function OnSuccess(response) { 
    var $summaryUl = $(".validation-summary-valid").find("ul"); 
    $summaryUl.empty(); 

    if (response.status === 'validationerror') { 
     $.each(response.errors, 
      function(a, b) { 
       $summaryUl.append($("<li>").text(b)); 
      }); 
    } else { 
     alert(response.message); 
    } 
}