モデルが有効でない場合、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セレクタ#data-ajax-update（フォームタグとその内容）の結果の内容をサーバーから返されたレスポンスとともに返すように指定しています（data-ajax-mode="replace"）。