驗證錯誤消息未顯示在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"); 請參考這里 。

1.在_ShareView部分視圖中向表單添加id ：

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

2.將驗證文件_ValidationScriptsPartial.cshtml引入主頁（Index.cshtml），並使用不_ValidationScriptsPartial.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>
}