当模型无效时，返回到视图内部的部分视图，并使用asp.net核心显示错误消息 [英] When model is not valid, return to partial view inside a view, with error message using asp.net core

问题描述

我有一个模态助推器.我想显示对boostrap模态的验证错误.但是，当我将模型留空并单击提交"按钮时，它只是被视为独立页面.

I´ve got a modal boostrap. I want to show the error of validation on boostrap modal. But when I leave the model empty and click on submit button Its just viewed as a standalone page.

局部视图:

  @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>

我在索引视图的顶部使用此库:

i use this libraries at top of index view:

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

并在索引视图的底部使用:

and use at the bottom of index view:

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

book-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; }
}

我的代码如上所示.如何在模态局部视图中显示验证错误?

My code is shown above. How can i show validation error in modal partial view ?

推荐答案

您可以将表单的 Id 设置为表单的data-ajax-update属性值，该属性值已被邻接.当从ajax调用接收到结果时，此值将用作jQuery选择器.

You can set the Id of form as the data-ajax-update property value of the form , which is ajaxified. This value will be used as the jQuery selector when the result is received from the ajax call.

@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的结果的内容(窗体标记及其内部内容)，响应是从服务器返回的.

Now when you submit the form and model state validation fails, the action method code will return the partial view result with the validation error messages (generated by the validation helpers) and the jquery.unobtrusive-ajax.js library code will replace (because we specified that with data-ajax-mode="replace") the content of the result of the jquery selector #data-ajax-update (the form tag and it's inner contents) with the response coming back from the server.

这篇关于当模型无效时，返回到视图内部的部分视图，并使用asp.net核心显示错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！