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

Question

I would like to have this error modal window appear if there are issues or errors that need to be displayed to the user after calling the SaveDailyCriteria action. I need the partial view to be rendered within the view where the SaveDailyCriteria action call is made. With the code that I currently have below, the return PartialView("_ErrorsModal", notification) gets called but is never displayed on my main view.

Controller

[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);
    }
}

Main View

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

@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

You can achieve this various ways, one option:

• In your controller post method, return a json when it passes and the partial when it fails.
• Within your jquery $.ajax post check for json and proceed otherwise render the result to your modal

In your case, the json returned on pass would indicate the url of the view to redirect to (not the view itself otherwise there's no way to know if it's a new view or the partial error). eg

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

and your javascript to:

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

the alternative is to always return json but render the _ErrorsModal (on error) or View (on success) within the controller to a string and add that string as a json property. IMO better to let the MVC pipeline handle rendering to HTML so recommend the above approach.