在模态中加载分部视图时发生错误时重定向到错误页面

Redirect to error page when an error occurs while loading a partial view in a modal

本文关键字：错误 重定向 模态 加载 视图      更新时间：2023-09-26

我想知道在弹出窗口加载部分视图时发生错误时是否可以重定向到错误页面。我正在从 API 的部分视图上显示一些数据。

我的 js 代码

@section Scripts {
    <script>
        $(document).ready(function () {
            $.ajaxSetup({ cache: false });
            $("a[data-modal]").on("click", function (e) {
                $('#myModalContent').load(this.href, function () {
                    $('#myModal').modal({
                        keyboard: true
                    }, 'show');
                });
                return false;
            });
        });
    </script>
}

现在，它会在弹出窗口中显示错误页面。它应该重定向到另一个页面。

编辑

错误捕获的实现

网络配置

<httpErrors errorMode="Custom" existingResponse="Replace">
   <remove statusCode="403" subStatusCode="-1" />
   <remove statusCode="404" subStatusCode="-1" />
   <remove statusCode="500" subStatusCode="-1" />
   <error statusCode="403" path="/Error/Index/403" responseMode="ExecuteURL"/>
   <error statusCode="404" path="/Error/Index/404" responseMode="ExecuteURL"/>
   <error statusCode="500" path="/Error/Index/500" responseMode="ExecuteURL"/>
</httpErrors>

错误控制器

  public ActionResult Index(int id = 500)
        {
            var model = new ErrorPageViewModel();
            model.ErrorCode = id;
            switch (id)
            {
                case 403:
                case 404:
                    model.ErrorHeader = "Page not Found!";
                    break;
                default:
                    model.ErrorHeader = "Oops, something went wrong!";
                    break;
            }
            return View(model);
        }

.load()函数回调可以采用其他参数，这些参数可以让您知道请求是否成功并采取相应的操作：

$('#myModalContent').load(this.href, function (response, status, xhr) {
    if (status == 'error') {
        // oops some error occurred => redirect the user to your error page
        window.location.href = '/error500';
    } else {
        $('#myModal').modal({
            keyboard: true
        }, 'show');
    }
});
相关文章：