모델이 유효하지 않은 경우 asp.net 코어를 사용하는 오류 메시지와 함께보기 내에서 부분보기로 돌아갑니다.

Question

모달 부스트랩이 있습니다. 내가 boostrap 모달에 대한 유효성 검사의 오류를 보여주고 싶습니다. 그러나 모델을 비워두고 제출 버튼을 클릭하면 독립형 페이지로 보입니다.

부분보기 :

@model WebApplication1.Models.Book 

<form asp-controller="Home" asp-action="AddBook" 
    data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#frmaddbook"> 

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
    <h4 class="modal-title" id="myModalLabel">Header of Modal</h4> 
</div> 

<div class="modal-body form-horizontal" id="frmaddbook "> 

    <span class="alert-danger"> 
     @Html.ValidationSummary() 
    </span> 

    <div class="row"> 
     <div class="form-group"> 
      <label asp-for="BookName" class="col-lg-3 col-sm-3 control-label"></label> 
      <div class="col-lg-6"> 
       <input asp-for="BookName" class="form-control" /> 
       <span asp-validation-for="BookName" class="text-danger"></span> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label asp-for="BookDescription" class="col-lg-3 col-sm-3 control-label"></label> 
      <div class="col-lg-6"> 
       <input asp-for="BookDescription" class="form-control" /> 
       <span asp-validation-for="BookDescription" class="text-danger"></span> 
      </div> 
     </div> 
    </div> 
</div> 


<div class="modal-footer"> 
    <input type="submit" class="btn btn-primary" value="Submit" /> 
</div> 

색인보기 :

<div class="panel panel-primary"> 
<div class="panel-body"> 
    <div class="btn-group"> 
     <a class="btn btn-primary marginbutoon" id="showBookgroup" data-toggle="modal" asp-action="AddBook" 
      data-target="#modal-book"> 
      <i class="glyphicon glyphicon-plus"></i> 
      Add Book 
     </a> 
    </div> 
</div> 

나는 인덱스 뷰의 상단에이 라이브러리를 사용

1. -jquery.unobtrusive ajax.min.js
2. jquery.validate.unobtrusive.min.js

과에서 사용 인덱스보기 하단 :

<script src="~/js/book-index.js"></script> 

책하는 index.js :

(function ($) { 
function Home() { 
    var $this = this; 

    function initilizeModel() { 
     $("#modal-book").on('loaded.bs.modal', function (e) { 

     }).on('hidden.bs.modal', function (e) { 
      $(this).removeData('bs.modal'); 
     }); 
    } 
    $this.init = function() { 
     initilizeModel(); 
    } 
} 
$(function() { 
    var self = new Home(); 
    self.init(); 
}) 

} (jQuery를))

컨트롤러 :

 [HttpGet] 
    public IActionResult AddBook() 
    { 
     var b = new Book(); 

     return PartialView("_AddBook", b); 
    } 



    [HttpPost] 
    [ValidateAntiForgeryToken] 
    //[HandleError]//not in core 
    public IActionResult AddBook(Book model) 
    { 
     if (ModelState.IsValid) 
     { 
      return RedirectToAction("Index"); 
     } 

     return PartialView("_AddBook", model); 
    } 

모델 :

public class Book 
{ 

    [Key] 
    public int BookId { get; set; } 

    [Display(Name = "Book Name :")] 
    [Required(ErrorMessage = "Enter Book Name Please ")] 
    public string BookName { get; set; } 


    [Display(Name = "Book Description")] 
    [Required(ErrorMessage = "Enter Book Description Please ")] 

    public string BookDescription { get; set; } 
} 

내 코드는 위와 같이된다. 모달 부분 뷰에서 유효성 검사 오류를 표시하려면 어떻게해야합니까?

Answer 1

양식의 data-ajax-update 속성 값으로 Id을 설정할 수 있습니다.이 값은 ajaxified입니다. 이 값은 ajax 호출에서 결과를 수신 할 때 jQuery 선택기로 사용됩니다. (때문에 양식 및 모델 상태 유효성 검사가 실패 제출할 때

@model Book 
<form asp-controller="Home" asp-action="AddBook" id="myform" 
     data-ajax="true" data-ajax-method="POST" 
           data-ajax-mode="replace" data-ajax-update="#myform"> 

    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     <h4 class="modal-title" id="myModalLabel">Add Book</h4> 
    </div> 

    <div class="modal-body form-horizontal" id="frmaddbook "> 

     <span class="alert-danger"> 
      @Html.ValidationSummary() 
     </span> 

     <div class="row"> 
      <div class="form-group"> 
       <label asp-for="BookName" class="col-sm-3 control-label"></label> 
       <div class="col-lg-6"> 
        <input asp-for="BookName" class="form-control" /> 
        <span asp-validation-for="BookName" class="text-danger"></span> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <input type="submit" class="btn btn-primary" value="Submit" /> 
    </div> 
</form> 

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