如何从 MVC 控制器将部分视图错误模式渲染到另一个视图中？

Question

如果在调用 SaveDailyCriteria 操作后需要向用户显示问题或错误，我希望显示此错误模式窗口。我需要在进行 SaveDailyCriteria 操作调用的视图中呈现部分视图。使用下面我目前拥有的代码，return PartialView("_ErrorsModal", notification) 被调用但从未显示在我的主视图上。

控制器

[HttpPost]
public ActionResult SaveDailyCriteria(Daily report, string EnteredCriteriaName)
{
    var criteria = report.ConvertToCriteria(report);
    criteria.CriteriaName = EnteredCriteriaName;
    var dr = new ReportDaily();
    var nameExists = dr.DoesCriteriaNameAlreadyExist(criteria);
    if (dr.SaveReportCriteria(criteria, nameExists, out Notification notification) == false)
    {
        return PartialView("_ErrorsModal", notification);
    }
    else {
        return View(report);
    }
}

主视图

@model Company.Areas.Reports.Models.Daily
@using Company.TaxCollection.Reports;
@{
    ViewData["Title"] = "Daily Report";
}

<h1>@ViewData["Title"]</h1>
<br />

@using (Html.BeginForm("DailySubmit", "Reports", FormMethod.Post, new { id = "reportForm", @class = "report-form col-9" }))
{
...
...
<div id="saveModal" 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">Save Criteria</h4>
                <button type="button" class="close" data-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label>Enter the name to save as:</label><input type="text" id="savedReportName" name="EnteredCriteriaName" class="form-control" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="saveSubmit" data-dismiss="modal">Save</button>
            </div>
        </div>

    </div>
</div>
}
<script>
$(document).ready(function () {
    var dataType = 'application/x-www-form-urlencoded; charset=utf-8';
    $(function () {
        $('#saveSubmit').on('click', function (evt) {
            var data = $('form').serialize();
            //Ajax form post
            $.ajax({
                type: 'POST',
                data: data,
                contentType: dataType,
                url: '@Url.Action("SaveDailyCriteria", "Reports")',
                success: function (data) {
                    console.log(data);
                    if (data.success) {
                        //window.location.href = data;
                    } else {
                        //window.location.href = data;
                    }
                }
            });
        });
    });
});
</script>

_ErrorsModal 部分视图

@model Company.NotificationPattern.Notification
<!-- 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">Warning</h4>
                <button type="button" class="close" data-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                @if (Model.HasErrors || Model.HasWarnings) {
                    <p>@Model.GetConcatenatedErrorMessage(Environment.NewLine + Environment.NewLine)</p>
                }
            </div>
            <div class="modal-footer">
                <button type="button" id="modalConfirm" class="btn btn-primary" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以通过多种方式实现这一目标，一种选择：

• 在您的控制器 post 方法中，当它通过时返回一个 json，当它失败时返回一个部分。
• 在您的 jquery $.ajax 后检查 json 并继续，否则将结果呈现给您的模态

在您的情况下，传递时返回的 json 将指示要重定向到的视图的 url（不是视图本身，否则无法知道它是新视图还是部分错误）。例如

if (save() == false)
{
    return PartialView("_ErrorsModal", notification);
}
else {
    return Json({ 
        success = true, 
        url = this.Url.Action("SaveDailyCriteria", new { reportId = report.ReportId }
    });
}

和你的 javascript 到：

$.ajax({
    type: 'POST',
    ...
    success: function (data) {
        if (data.success) 
            window.location.href = data.url;
        else
            $("#modalId").html(data);
    }
});

另一种方法是始终返回 json，但将控制器内的 _ErrorsModal（错误时）或 View（成功时）渲染到字符串并将该字符串添加为 json 属性。 IMO 最好让 MVC 管道处理渲染到 HTML，所以推荐上述方法。