Question

我有一个模态的boostrap。我想在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属性值，该值是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库代码将替换（因为我们用data-ajax-mode="replace"指定了jquery选择器#data-ajax-update的结果内容（表单标记及其内部内容），响应从服务器返回。

当model无效时，返回视图内的部分视图，并使用asp.net core发送错误消息

1 个答案: