Question

我正在尝试找出最佳的方式来显示可以在应用程序的所有页面中显示的一般错误消息。执行表单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>

Answer 1

在_Layout.cshtml中创建div

$input

在onclick事件上具有ValidateButton（）函数的局部视图中的按钮

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

jQuery

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

控制器

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

别忘了添加JQuery库

Answer 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();
}

当在Asp.Net Core Razor View中出现POST错误时显示错误？

2 个答案: