Jquery 如何在MVC的弹出窗口中显示验证失败消息

我面临一个问题，我想使用Razor在MVC4的弹出窗口中显示错误消息。我在我的模型中使用不同的验证消息，在提交表单时如果失败，我想显示我在模型中给出的相同验证消息。我正在和你分享我的模型、视图和控制器代码。有人能帮我吗

模型

控制器

            using System;
            using System.Collections.Generic;
            using System.Linq;
            using System.Web;
            using System.Web.Mvc;
            using Employee_Mgmt_System.Models;
            using System.ComponentModel;
            using System.Data;
            using System.Data.SqlClient;
            using System.Configuration;

            namespace Employee_Mgmt_System.Controllers
            {
                public class LoginScreenController : Controller
                {
                    //
                    // GET: /LoginScreen/
                    LoginScreen Ls = new LoginScreen();
                    [HttpPost]
                    public ActionResult Login(LoginScreen LogScreen)
                    {
                        if (ModelState.IsValid)
                        {

                                return RedirectToAction("HomeScreen", "HomeScreen");



                        }
                        return View("LoginScreen");
                    }

                    public ActionResult LoginScreen()
                    {

                        return View("LoginScreen");
                    }

                }
            }

看法

@model Project.LoginScreen
@{
ViewBag.Title=“LoginScreen”；
}
登录屏幕
@使用（Html.BeginForm（“login”、“loginscreen”、FormMethod.Post））
{
@Html.ValidationSummary（true）
验证摘要
@Html.ValidationMessageFor（m=>m.EmpID）


@Html.ValidationMessageFor（m=>m.Password）




@Html.LabelFor（@m=>@m.EmpID）
@Html.TextBoxFor（@m=>@m.EmpID）
@Html.LabelFor（@m=>@m.Password）
@Html.PasswordFor（@m=>@m.Password）
}

这里有一个非常简单的方法：

if (ModelState.IsValid)
 {
    return RedirectToAction("HomeScreen", "HomeScreen");
 }
 StringBuilder sb = new StringBuilder();
 sb.Append("You have a bunch of errors:");

 foreach (ModelState modelState in ModelState.Values) {
   foreach (ModelError error in modelState.Errors) {
       sb.Append(error + "\n");
    }
  }
 ViewData["Error"] = sb.ToString();
 return View("LoginScreen");

在你看来：

 @if(!String.IsNullOrEmpty(ViewBag["Errors"])){
      @:<script type="text/javascript">alert('@ViewBag["Errors"]')</script>
 }

@if（！String.IsNullOrEmpty（ViewBag[“Errors”]））{
@：警报（“@ViewBag[“Errors”]”）
}

---

这是未经测试的，但应该会给您一个想法。

作为替代方案，如果您使用引导，请尝试我为类似问题构建的小型验证摘要控件/希望有更好的方法来控制标准验证摘要控件的样式

这是一个验证摘要控件，可在多种模式下工作：

面板、警报、可关闭警报和模式

您可以检查项目中的示例图像，以查看其外观

---

它可以自定义样式，并显示模型错误和自定义错误。您还可以将自己的CSS类包含到控件中，以覆盖默认的引导样式

要实现这种显示机制，您可以

将视图页拆分为两个，分别为视图页和部分视图页。将HTML.BeginForm中的HTML标记移动到局部视图中。Ajaxify部分查看页面

在视图页面中定义一个div以将消息显示为弹出窗口。定义必要的jQuery方法以打开弹出窗口。

向HTMLHelper类添加扩展方法以显示弹出消息。该方法将负责从模型状态及其显示中构造错误消息 随附样本代码。请看一下代码。注意：我还没有测试它

查看页面（login.cshtml）

@model Project.LoginScreen
@{
ViewBag.Title=“LoginScreen”；
}
$（文档）.ready（函数（）{
$.ajaxSetup({
缓存：false
});
$（文档）.ajaxError（函数（请求、状态、错误）{
$.growl.error（{title:“服务器错误”，消息：status.responseText}）；
});
//创建加载窗口并将autoOpen设置为false
$（“#加载屏幕”）。对话框({
自动打开：错误，
dialogClass:“loadingScreenWindow”，
closeOnEscape：错误，
可拖动：错误，
宽度：460，
身高：100，
莫代尔：是的，
按钮：{}，
可调整大小：false，
打开：函数（）{
$（'body'）.css（'overflow'，'hidden'）；
},
关闭：函数（）{
$（'body'）.css（'overflow'，'auto'）；
}
})；//对话框结束
});
函数等待对话框（等待）{
$（“#loadingScreen”）.html（waiting.message&&'！=waiting.message？waiting.message:“请稍候…”）；
$（“#加载屏幕”）。对话框（'option'，'title'，waiting.title&'！=waiting.title？waiting.title:'update'）；
$（“#加载屏幕”）。对话框（“打开”）；
}
函数closeWaitingDialog（）{
$（“#加载屏幕”）。对话框（“关闭”）；
}
登录屏幕
@Html.Partial（“loginPartial”，模型）

局部视图（loginPartial.cshtml）

@model Project.LoginScreen
@使用（Ajax.BeginForm（“login”、“loginscreen”、新的AjaxOptions{OnBegin=“waitingDialog（{}）”、OnComplete=“closeWaitingDialog（）”、HttpMethod=“POST”、UpdateTargetId=“frmContent”}））
{
验证摘要
@Html.ValidationMessageFor（m=>m.EmpID）


@Html.ValidationMessageFor（m=>m.Password）




@Html.LabelFor（@m=>@m.EmpID）
@Html.TextBoxFor（@m=>@m.EmpID）
@Html.LabelFor（@m=>@m.Password）
@Html.PasswordFor（@m=>@m.Password）
}
@（Html.AjaxPopupWindow（Html.ViewData.ModelState））

显示消息的扩展方法

使用
if (ModelState.IsValid)
 {
    return RedirectToAction("HomeScreen", "HomeScreen");
 }
 StringBuilder sb = new StringBuilder();
 sb.Append("You have a bunch of errors:");

 foreach (ModelState modelState in ModelState.Values) {
   foreach (ModelError error in modelState.Errors) {
       sb.Append(error + "\n");
    }
  }
 ViewData["Error"] = sb.ToString();
 return View("LoginScreen");

 @if(!String.IsNullOrEmpty(ViewBag["Errors"])){
      @:<script type="text/javascript">alert('@ViewBag["Errors"]')</script>
 }

@model Project.LoginScreen
@{
    ViewBag.Title = "LoginScreen";
}
<script src="@Url.Content("~/Scripts/jquery-1.9.1.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.growl.js")"></script>

    $(document).ready(function () {
        $.ajaxSetup({
            cache: false
        });

        $(document).ajaxError(function (request, status, error) {
            $.growl.error({ title: "Server Error", message: status.responseText });
        });

        // create the loading window and set autoOpen to false
        $("#loadingScreen").dialog({
            autoOpen: false,    
            dialogClass: "loadingScreenWindow",
            closeOnEscape: false,
            draggable: false,
            width: 460,
            minHeight: 100,
            modal: true,
            buttons: {},
            resizable: false,
            open: function () {
                $('body').css('overflow', 'hidden');
            },
            close: function () {
               $('body').css('overflow', 'auto');
            }
        }); // end of dialog
    });

    function waitingDialog(waiting) { 
        $("#loadingScreen").html(waiting.message && '' != waiting.message ? waiting.message : 'Please wait...');
        $("#loadingScreen").dialog('option', 'title', waiting.title && '' != waiting.title ? waiting.title : 'Updating');
        $("#loadingScreen").dialog('open');
    }
    function closeWaitingDialog() {
        $("#loadingScreen").dialog('close');
    }
</script>

<h2>LoginScreen</h2>
<div id="frmContent">
    @Html.Partial("loginPartial", Model)
</div>
<div id="loadingScreen"></div>

@model Project.LoginScreen
@using (Ajax.BeginForm("login", "loginscreen", new AjaxOptions { OnBegin = "waitingDialog({})", OnComplete = "closeWaitingDialog()", HttpMethod = "POST", UpdateTargetId = "frmContent" }))
{
    <div style="color: red; text-align: center">
        <fieldset>
            <legend>Validation Summary</legend>
            @Html.ValidationMessageFor(m => m.EmpID)
            <br />
            @Html.ValidationMessageFor(m => m.Password)
        </fieldset>
    </div>
    <br />
    <br />
    <div>

        <table border="1" style="background-color: activeborder">
            <tr>
                <td>
                    @Html.LabelFor(@m => @m.EmpID)
                </td>
                <td>
                    @Html.TextBoxFor(@m => @m.EmpID)
                </td>
            </tr>

            <tr>
                <td>
                    @Html.LabelFor(@m => @m.Password)
                </td>
                <td>
                    @Html.PasswordFor(@m => @m.Password)
                </td>
            </tr>


        </table>
        <input type="submit" value="login" />
    </div>
}
@(Html.AjaxPopupWindow(Html.ViewData.ModelState))

using System.Text;
using System.Web;
using System.Web.Mvc;
namespace Web.Helper
{
    public static class ValidationHelper
    {
        public static MvcHtmlString AjaxPopupWindow(this HtmlHelper html, ModelStateDictionary states)
        {
            StringBuilder sb = new StringBuilder();

            if (HttpContext.Current.Request.HttpMethod == "POST")
            {
                sb.Append("<script type=\"text/javascript\">");

                if (!states.IsValid)
                {
                    var ul_tag = new TagBuilder("ul");

                    foreach (var state in states.Values)
                    {
                        foreach (var e in state.Errors)
                        {
                            var li_tag = new TagBuilder("li");
                            li_tag.SetInnerText(e.ErrorMessage);

                            ul_tag.InnerHtml += li_tag.ToString();
                        }
                    }

                    sb.AppendFormat("$.growl.error({{ title: \"{0}\", message: \"{1}\" }});", "Save Error", ul_tag);
                }
                else
                {
                    sb.AppendFormat("$.growl.notice({{ title: \"{0}\", message: \"{1}\" }});", "Save Changes", "Update Complete");
                }

                sb.Append(" </script>");
            }

            return MvcHtmlString.Create(sb.ToString());
        }
    }
}