MVC4：发生错误时在视图中显示 jQuery 模型弹出窗口？答案

【问题标题】：MVC4: Display jQuery model popup in view when error occurred?MVC4：发生错误时在视图中显示 jQuery 模型弹出窗口？
【发布时间】：2013-07-24 14:28:53
【问题描述】：

我正在尝试在控制器中发生错误时显示 jQuery 模型弹出窗口，并在控制器尝试返回时显示相同的视图。

现在我正在研究Home/Index.cshtml 和控制器[HttpGet] Index() 控制器方法。如果 Index() 方法发生任何错误，则在视图 Index.cshtml 中显示 jQuery 弹出窗口。

我们该怎么做？

更新

作为@MelanciaUK，我是这样实现的。

  @{
        if (!String.IsNullOrEmpty(ViewBag.errorsOccurred))
        {
           <text>
              <script type="text/javascript">
                  $(function () {
                      $.fancybox.open({
                              'content' : $("#divForm").html()
                   });
                });
              </script>
            </text>
         }
      }
       @using (Html.BeginForm())
       {
                          ----
                          ----
       }
        <div id="divForm" style="display:none">
            An error has occurred on the page.
        </div>

    @section Scripts {  
     @Scripts.Render("~/bundles/fancybox")
    }

.fancybox.open 永远不会被调用并跳过@using (Html.BeginForm()) 中的执行。我只想显示fancybox。这里出了什么问题？

【问题讨论】：

这通常是 AJAX 调用的结果；除非你说你想在页面加载上显示它？你要哪个？
那是真的..我需要页面加载。
jQuery 模式对话框默认为autoOpen-ed。请参阅文档api.jqueryui.com/dialog/#option-autoOpen
将错误消息存储到一个变量中，然后在视图上测试它的任何内容。如果是，请打开对话框。

标签： jquery asp.net-mvc asp.net-mvc-4

【解决方案1】：

由于您使用的是 Fancybox 而不是 jQuery UI 对话框，因此我重写了我的答案。它已经在 Visual Studio 上进行了测试并且运行良好。试试看：

控制器

public ActionResult Index()
{
    return View();
}

[HttpPost]
public ActionResult SubmitMyForm()
{
    // Forcing an error.
    ViewBag.errorsOccurred = "An error has occurred!";

    return View();
 }

Razor 视图（_Layout）：

<link href="@Url.Content("~/Scripts/fancybox/jquery.fancybox.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="@Url.Content("~/Scripts/fancybox/jquery.fancybox.pack.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#divForm").fancybox();
    });
</script>

Razor 视图（索引）：

@using (Html.BeginForm("SubmitMyForm", "Home", FormMethod.Post))
{
    <input type="text" name="myInput" id="myInput" />
    <button type="submit">Submit</button>
}

Razor 视图（SubmitMyForm）：

@{
    if (!String.IsNullOrEmpty(ViewBag.errorsOccurred))
    {
        <text>
            <script type="text/javascript">
                $(function () {
                    $.fancybox.open({ "content": "@ViewBag.errorsOccurred" });
                });
            </script>
        </text>
    }
}

<div id="divForm"></div>

【讨论】：

我已经重写了我的答案。