当模型无效时，return 到视图内的部分视图，并使用 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>

我在索引视图顶部使用这个库：

jquery.unobtrusive-ajax.min.js
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

可以将表格的Id设置为表格的data-ajax-update属性值，即ajax化。当从 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>

现在，当您提交表单和模型状态验证失败时，操作方法代码将 return 带有验证错误消息（由验证助手生成）和 jquery.unobtrusive-ajax.js 的部分视图结果库代码将用从服务器。

当模型无效时，return 到视图内的部分视图，并使用 asp.net 核心显示错误消息

When model is not valid, return to partial view inside a view, with error message using asp.net core

asp.net

asp.net-mvc

asp.net-ajax

modal-dialog

partial-views