MVC 4:发生错误时在视图中显示jQuery模式弹出窗口?

时间:2013-07-24 14:28:53

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

我正在尝试在控制器中发生错误时显示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")
    }
永远不会调用{p> .fancybox.open并跳过@using (Html.BeginForm())中的执行。我只想要节目fancybox。这有什么不对?

1 个答案:

答案 0 :(得分:0)

当您使用 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 View(_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 View(索引):

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

Razor View(SubmitMyForm):

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

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