Asp.Net Core 2 MVC 部分视图中未显示验证错误消息

Question

我有一个包含“工作簿”标题列表的索引页面，每个工作簿都有一个“共享”按钮。当按下按钮时，会出现一个引导模型（即对话框），其中显示工作簿的标题和一个允许用户输入共享电子邮件地址的文本区域。

当用户按下“共享”按钮时，我正在调用一个 javascript 函数，该函数调用一个控制器操作，该操作返回一个包含模态对话框的局部视图，其中包含一个表单。问题是在按下提交按钮（即“共享”）后，没有向用户显示验证错误，我不知道为什么会这样。谁能提供一些想法，好吗？

这是我的主 (index.cshtml) 页面：

@model DNAAnalysisCore.Models.WorkBookModel
@{
}

@section BodyFill
{
    <script type="text/javascript">

        function showSharingView(title) {
            var url = "@Url.Action("ShowShareDialog", "Home")" + "?workbookTitle=" + encodeURI(title);
            $('#shareFormContainer').load(url,
                function() {
                    $('#shareFormModal').modal("show");
                });
        }

        function hideSharingView() {
            $('#shareFormModal').modal("hide");
        }

    </script>

    <div id="shareFormContainer" >
       <!--PLACEHOLDER FOR SHARE DIALOG -->
    </div>

    <div class="workbook-container">
        <table class="table">
            <tbody>
            @foreach (var workbook in Model.Workbooks)
            {
                <tr>
                    <td>@Html.ActionLink(workbook.Name, "Open", "OpenAnalytics", new {id = Model.Id, workbook = workbook.Name})</td>
                    <td>
                        <button title="Share" class="share-button" onclick='showSharingView("@workbook.Name")'>&nbsp;</button>
                    </td>
                </tr>
            }
            </tbody>
        </table>
    </div>
}

那是我的控制器：

public class HomeController : Controller
{
    [HttpGet]
    public IActionResult ShowShareDialog(string workbookTitle)
    {
        var shareModel = new ShareModel
        {
            Title = workbookTitle
        };

        return PartialView("_ShareView", shareModel);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult ShareWorkbook(string emails, string title)
    {
        var share = new ShareModel
        {
            Emails = emails
        };

        // TODO EMAIL THE SHARED WORKBOOK using the 'title' of the workbook and the 'email' string value

        // return no content to avoid page refresh
        return NoContent();
    }
}

这是我的局部视图/模式对话框 (_ShareView)：

@using DNAAnalysisCore.Resources
@model DNAAnalysisCore.Models.ShareModel

<!-- Modal -->
<div class="modal fade" id="shareFormModal" role="dialog">
    <div class="modal-dialog modal-md">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Share Workbook - @Model.Title</h4>

            </div>

            @using (Html.BeginForm("ShareWorkbook", "Home", FormMethod.Post))
            {
            <div class="modal-body">

                <label>@BaseLanguage.Share_workbook_Instruction_text</label>
                <div class="form-group">
                    <textarea class="form-control" asp-for="Emails" rows="4" cols="50" placeholder="@BaseLanguage.ShareDialogPlaceholder"></textarea>
                    @* TODO add client-side validation using jquery.validate.unobtrusive.js. See US268276 *@
                    <span asp-validation-for="Emails" class="text-danger"></span>
                </div>

                <input asp-for="Title" />
            </div>
            <div class="modal-footer">
                <button type="submit" onclick="hideSharingView()" class="btn btn-primary">Share</button>
                <button id="btnCancelDialog" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
            }

        </div>
    </div>
</div>


@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

这是我的ShareModel：

public class ShareModel
{
    [HiddenInput]
    public string Title { get; set; }
    [Required]
    public string Emails { get; set; }
}

Answer 1

页面加载时表单没有添加到页面中，不显眼的验证不会捡起来。一个简单的解决方案是使用$.validator.unobtrusive.parse("#id-of-the-form");。参考here。

1.在_ShareView部分视图中将id添加到您的表单中：

@using (Html.BeginForm("ShareWorkbook", "Home", FormMethod.Post,new { @id="partialform"}))

2.将验证文件_ValidationScriptsPartial.cshtml引入主页面（Index.cshtml）并手动注册表单以进行不显眼的验证。

@section Scripts
{
@await Html.PartialAsync("_ValidationScriptsPartial")
<script type="text/javascript">

    function showSharingView(title) {
        var url = "@Url.Action("ShowShareDialog", "Home")" + "?workbookTitle=" + encodeURI(title);
        $('#shareFormContainer').load(url,
            function() {
                $('#shareFormModal').modal("show");
                $.validator.unobtrusive.parse("#partialform");
            });
    }
    function hideSharingView() {
        $('#shareFormModal').modal("hide");
    }
</script>
}