logo标签列表

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

jqueryasp.net-mvcasp.net-mvc-4razor
5
我是一个有用的助手，可以为您翻译文本。
我正在面临一个问题，我想在使用Razor的MVC4中以弹出窗口显示错误消息。我在我的模型中使用不同的验证消息，并且在表单提交失败时，我希望显示与我在模型中提供的相同的验证消息。我将我的模型、视图和控制器代码分享给您。请问有人能帮我做到这一点吗？
模型
                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>
4个回答
3
这是一种非常简单的方法：

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

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

这段代码未经测试，但应该可以让您明白思路。
同意！您可以将所有验证放在这里：**@：<script type="text/javascript">alert('@Html.ValidationSummary(true)')</script>** - Sunny Sharma
@Sunny 确实，我只想指出在 js 提示框中不应该有任何标记，所以你需要注意 ValidationSummary。使用 \n 而不是 <li>。 - Mister Epic
@Chris，Sunny，我不想使用ViewBag提供的用户定义错误消息，而是想获取我在模型中使用Required属性声明的消息。当模型失败并在MVC视图中显示时，如何获取该错误消息？ - Rahul
@Rahul 已更新，现在应该更有用了。 - Mister Epic
@Chris 控制器部分我已经实现得很好了，但是当我尝试在视图中执行时，出现了错误。还有一件事，在哪里编写视图代码？能否请您使用我的视图进行更新？ - Rahul
@MisterEpic- alert('@ViewBag["Errors"]') 应该改为 alert('@ViewData["Errors"]')。 - Gaurav Arora
-1
为实现这样的显示机制，您可以：
  1. 将视图页面分成两个部分，即视图页面和部分视图页面。将HTML.BeginForm内的HTML标记移至部分视图中。将部分视图页面Ajax化。
  2. 在视图页面中定义一个div来显示弹出窗口中的消息。定义必要的jQuery方法来打开弹出窗口。
  3. 向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());
        }
    }
}

希望这可以帮到你。谢谢。
-1

如果您正在使用Bootstrap，作为一种替代方案，可以尝试我为类似问题构建的小型验证摘要控件。我希望有更好的方式来控制标准验证摘要控件的样式。

https://github.com/JellyMaster/MVCBootstrap

这是一个可以在多种模式下工作的验证摘要控件：
面板、警告、可关闭的警告和模态。
您可以在项目中查看示例图像，了解其外观。
它可以根据样式进行自定义，并显示模型错误和自定义错误。您还可以将自己的CSS类包含到控件中，以覆盖默认的Bootstrap样式。
-1

我不确定你是否仍需要关于你的问题的任何帮助，因为这个问题已经有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 是你应该使用的。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接