Question

我正面临一个问题我想在使用Razor的MVC4中显示Popup中的错误消息。我在我的模型和表单上使用不同的验证消息如果失败我想显示相同的验证消息我有在我的模型中给出。我和你分享我的模型，视图和控制器代码。可以帮助我做一些

模型

                using System;
                using System.Collections.Generic;
                using System.Linq;
                using System.Web;
                using System.ComponentModel;
                using System.ComponentModel.DataAnnotations;
                using System.Configuration;

                namespace Employee_Mgmt_System.Models
                {
                    public class LoginScreen
                    {
                        [Required(ErrorMessage = "EmployeeID Cannot be Blank")]
                        public string EmpID
                        {
                            get;
                            set;
                        }
                        [Required(ErrorMessage = "Password Cannot be kept Blank")]
                        [DataType(DataType.Password)]
                        public string Password
                        {
                            get;
                            set;
                        }

                    }
                }

控制器

            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";
                }
                <script src="~/Scripts/jquery-1.7.1.js"></script>
                <script src="~/Scripts/jquery.validate.js"></script>


                <h2>LoginScreen</h2>
                <body>
                    @using(Html.BeginForm("login","loginscreen",FormMethod.Post))
                    {
                      @Html.ValidationSummary(true)  
                        <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>
                    }

                </body>

Answer 1

这是一个非常简单的方法：

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>
 }

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

Answer 2

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

https://github.com/JellyMaster/MVCBootstrap

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

面板，警报，可关闭警报和模态。

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

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

Answer 3

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

将视图页面拆分为两个，作为视图页面和部分视图页面。将HTML.BeginForm中的HTML标记移动到局部视图中。 Ajax化部分视图页面。
在视图页面中定义div以将消息显示为弹出窗口。定义必要的jQuery方法来打开弹出窗口。
向HTMLHelper类添加扩展方法以显示弹出消息。此方法将负责从模型状态及其显示构造错误消息。

随附的示例代码。请看一下代码。注意：我还没有测试过。

查看页面（login.cshtml）

@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>

部分视图（loginPartial.cshtml）

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

希望这可能会有所帮助。感谢。

Answer 4

我不确定你的问题是否还需要任何帮助，因为问题是4岁，但是如果有人偶然发现它，我想就这种情况提出建议，对Ajax更好。 BeginForm而不是HTML.Beginform，以显示验证而无需重新加载页面，这是本教程的文章

https://qawithexperts.com/article/asp.net/validate-pop-up-modal-using-ajaxbeginform-in-c-mvc/52

如果您是Ajax.BeginForm的新手，您还可以阅读

https://qawithexperts.com/article/asp.net/use-of-ajaxbeginform-in-aspnet-mvc-c/39

注意：我是这两篇文章的作者，但是你应该使用AJAX.Beginform。

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

4 个答案: