在 Asp.Net Core Razor 视图中出现 POST 错误时显示错误？答案

【问题标题】：Show an error when POST errors out in Asp.Net Core Razor View?在 Asp.Net Core Razor 视图中出现 POST 错误时显示错误？
【发布时间】：2019-09-26 03:11:40
【问题描述】：

我正在尝试找出显示通用错误消息的最佳方式，该错误消息可以显示在我的应用程序的所有页面中。执行表单 POST 请求时应显示错误视图。

为了让错误视图随处可用，我将它放在 _Layout.cshtml 中，但我不太确定当我从表单提交 POST 请求时如何显示它。

注意：解决方案不应强制页面刷新（即应该是异步的）。

现在我正在使用TempData 来存储和显示消息

这是我的 _Layout.cshtml

<!DOCTYPE html>
...
<body>
@if (TempData["SystemError"] != null)
{
    <div>@TempData["SystemError"]</div>
}

@RenderSection("BodyFill", false)
@RenderBody()
...
@RenderSection("Scripts", required: false)
</body>
</html>

这是我的控制器操作：

[HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult ShareWorkbook(string emails, string title, string id, string queryBuilderId)
    {
        var emailStrArr = Regex.Split(emails, Constants.SplitPattern).ToList();

        var workbookShareModel = new WorkbookShareModel
        {
            Id = id,
            QueryBuilderId = queryBuilderId,
            Title = title,
            Emails = emailStrArr
        };

        // check to see if the 'WorkbookShareModel' is valid (takes into account its property DataAnnotation)
        if (TryValidateModel(workbookShareModel))
        {
            try
            {
                ShareWorkbook(workbookShareModel);
            }
            catch (Exception e)
            {
                //Todo -- Exception handling
                TempData["SystemError"] = Res.System_Error_Message;
            }
        }

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

那是表单（它在加载到 index.cshtml 的局部视图中）

@using DNAAnalysisCore.Resources
@model DNAAnalysisCore.Models.WorkbookShareModel
@* Partial view that contains the 'Share Workbook dialog' modal *@

<!-- Modal -->
<div onclick="activateShareButtons()" 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, new { @id = "partialform" }))
            {
                <div class="modal-body">

                ...

                <div class="modal-footer">
                    <button onclick="hideDialog()" type="submit" class="btn btn-primary">Share</button>
                    <button onclick="activateShareButtons()" id="btnCancelDialog" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            }

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

【问题讨论】：

可以通过JQuery Ajax来实现。为错误消息 div 分配一个 ID 属性，并使用 JQuery $("#divid").html("Error message") 设置消息
@Golda 感谢您的评论。但是，我不确定当控制器的操作方法出现异常时如何显示消息

标签： c# ajax asp.net-core razor

【解决方案1】：

在_Layout.cshtml中创建一个div

<div id="messageDiv"></div>

部分视图中的按钮在 onclick 事件中具有 ValidateButton() 函数

<button onclick="ValidateButton()" id="btnCancelDialog" type="button" class="btn btn-default">Validate</button>

jQuery

function ValidateButton() {
   // If you have any parameter
    var obj ={
        parm: "1"
    };

    $.ajax({
        url: '/Home/ValidationProcess',
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        data: JSON.stringify(obj),
        cache: false,
        success: function (result) {
            $("#messageDiv").html(result);
        },
        error: function (xhr, status, error) {
            alert("Error");
        }
    });
}

控制器

public string ValidationProcess(string parm)
{
    // Do something

    return "Message";
}

不要忘记添加 JQuery 库

【讨论】：

感谢您的回答，戈尔达。我设法想出了另一个不使用 IQuery 的解决方案，在我的情况下它更简单一些。我会在下面发布。

【解决方案2】：

我设法使用不显眼的 Ajax html 找到了解决方案（这个堆栈溢出问题帮助了我 - link）。我将原来的 Html.BeginForm（同步）转换为异步调用，在执行请求时刷新 div：

<form id = "partialform" asp-action="ShareWorkbook" asp-controller="Home" method="post" data-ajax="true" data-ajax-update="divEmp">
<div class="modal-body">
    ...
    <div class="modal-footer">
        <button onclick="hideDialog()" type="submit" class="btn btn-primary">Share</button>
        <button onclick="activateShareButtons()" id="btnCancelDialog" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    </div>
</div>
</form>

_Layout.cshtml：

...
<body>
<div id="divEmp">
    @if (TempData["error"] != null)
    {
        <p>@TempData["error"]</p>
    }
</div>
@RenderSection("BodyFill", false)
@RenderBody()
...

控制器：

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult ShareWorkbook(string emails, string title, string id, string queryBuilderId)
{
    ...

    TempData["error"] = "TEST ERROR MESSAGE";
    // return no content to avoid page refresh
    return NoContent();
}

【讨论】：