如何打开引导模式窗口弹出窗口而不是在新窗口中打开它？

Question

我试图在用户提交表单时弹出一个模式窗口，列出所有验证错误。使用我当前的代码，该窗口将作为一个全新的视图而不是模式窗口打开。如何让这个窗口与表单的视图重叠，而不是打开一个全新的视图？

控制器

[HttpPost]
public IActionResult Daily(Daily dailyReport)
{
    var dr = new ReportDaily();
    var rc = new ReportDailyCriteria();
    dr.Preview(rc, IntPtr.Zero, out Notification notification);
    if (notification.HasErrors) {
        var error = new Errors();
        string errorString = notification.GetConcatenatedErrorMessage(Environment.NewLine + Environment.NewLine);
        error.ErrorList = errorString;
        return PartialView("_ErrorsModal", error);
    }
    return View(dailyReport);
}

局部视图

@model Test.Areas.Reports.Models.Errors
<!-- Modal -->
<div id="errorsModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title float-left">Error List</h4>
                <button type="button" class="close" data-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label>Errors: @Model.ErrorList</label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
            </div>
        </div>

    </div>
</div>

Answer 1

1. 据我了解，您将表单作为完整回发发布到控制器操作。相反，您需要将其作为 ajax 帖子发送，这将使您能够灵活地处理回复。
2. 我建议在初始页面加载时呈现您的模式，然后在从控制器接收结果时仅使用JSON。它将消除响应的复杂解析逻辑（确定它是部分视图还是其他适当的进一步操作）。

所以在主视图上渲染你的局部视图（从局部视图中删除 Errors: @Model.ErrorList 并将标签留空，因为你不再需要它了）：

@Html.Partial("_ErrorsModal")

将返回 Json 的控制器操作：

    [HttpPost]  
    public IActionResult Daily(Daily dailyReport)  
    {  
        var dr = new ReportDaily();
        var rc = new ReportDailyCriteria();
        dr.Preview(rc, IntPtr.Zero, out Notification notification);
        if (notification.HasErrors) 
        {
            return Json(new
            {
                success = false,
                message = notification.GetConcatenatedErrorMessage(Environment.NewLine + Environment.NewLine)
            });
        }

        return Json(new { success = true });
    }

当您发布表单时您的ajax 电话：

    $.ajax({
        type: 'POST',
        data: JSON.stringify($('#your_form_id').serializeArray().reduce(function(m,o){ m[o.name] = o.value; return m;}, {})),
        url: 'http://your_website/your_controller/Daily',
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            if(data.success){
                //your actions when validation successful...
            } else {
                $('#errorsModal .modal-body label').html(data.message);
                $('#errorsModal').modal('toggle');
            }
        }
    });