在MVC 4中，在jQuery弹出窗口或警报中显示错误消息

Question

我正在使用DataAnnotation进行验证，我希望将错误消息（数据注释）显示在弹出窗口（对话框/警报）中，而不是在视图上显示... 我已经使用此链接实现了代码。 项目模板是移动版的，请告诉我是否有遗漏？ http://forums.asp.net/t/1738076.aspx/1 Javascript: -

$('#Test').bind('invalid-form.validate', function (form, validator) {
    alert('InsideTest');   
     var $list = $('#errorlist ul:first')
     if ($list.length && validator.errorList.length) {
            $list.empty();
            $.each(validator.errorList, function () {
                $("<li />").html(this.message).appendTo(list);
            });
            $list.dialog({
                title: 'Please correct following errors:',
            });
 }
});
Forgot to add html...    

About.cshtml：

@model WRDSMobile.Models.Test

<div id="errorlist" style="display:none"><ul></ul></div>    
@using (Html.BeginForm(null, null, FormMethod.Post, new { name = "Test", id = "Test" }))
{
     @Html.ValidationSummary(true)
     <fieldset>

        <legend>Test</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Age)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Age)
            @Html.ValidationMessageFor(model => model.Age)
        </div>  
            <input type="submit" value="Create" />
    </fieldset>
}

- Divesh Salian

---

忘记添加 HTML... - Divesh Salian

没问题，您可以编辑和更新问题 :) - Ravi Gadag

你有什么问题吗？你在使用这段代码时遇到了一些问题吗？ - Darin Dimitrov

没有收到任何错误信息.. 表单直接被提交了。 - Divesh Salian

Answer 1

我不确定我是否理解了你的问题，但是你可以使用ajax向控制器发送post请求并返回部分视图。然后将部分视图加载到你的html元素中，然后弹出对话框。

 [HttpPost]
    public ActionResult validate(string firstName,string lastName){

        //logic here for validation
         return PartialView();
    }


$.ajax({
            type: "POST",
            data: {firstName: nameVal, lastName: lastNameVal },
            url: "/myController/validate",
            dataType: "html",
            success: function (data) {
                if (data) {
                    var dialog = $('<div></div>');
                    dialog.html(data);
                    dialog.dialog({
                        resizable: false,
                        modal: true,
                        overflow: false,
                        maxWidth: 1200,
                        maxHeight: 600,
                        width: 1200,
                        height: 600,
                        border: 0,
                        buttons: {
                            "Cancel": function () { //cancel
                                $(this).dialog("close");
                            }
                        }

                    });
                }
                else {
                    alert("error");

                }
            }
        });

- MorningDew

---

我需要在弹出窗口中显示数据注释（客户端）错误。 - Divesh Salian

Answer 2

请参考以下CSS/JS，并在jquery-ui.css、jquery-1.8.2.min.js、jquery-ui-1.8.24.min.js、jquery.validate.min.js和jquery.validate.unobtrusive.min.js之后添加。

$(document).ready(function () {
        $('#Test').bind('invalid-form.validate', function (form, validator) {
            var $list = $('<ul />')
            if (validator.errorList.length) {
                $.each(validator.errorList, function (i, entity) {
                    $("<li />").html(entity.message).appendTo($list);
                });
                msgbox('Please correct following errors:', $('<div />').append($list));
                return false;
            }
        });
    });

    function msgbox(_title, _messageHtml) {
        $('<div></div>').appendTo('body')
                    .html(_messageHtml)
                    .dialog({
                        modal: true, title: _title, zIndex: 10000, autoOpen: true,
                        width: 'auto', resizable: false,
                        buttons: {
                            Ok: function () {
                                // $(obj).removeAttr('onclick');                                
                                // $(obj).parents('.Parent').remove();

                                $(this).dialog("close");
                            }
                        },
                        close: function (event, ui) {
                            $(this).remove();
                        }
                    });
    };

- Thulasiram

---

谢谢，目前我正在使用jQuery Validate但我正在检查它是否可以帮助其他人。错误消息也会在弹出窗口和HTML中出现。 - Divesh Salian

Answer 3

公共静态无返回值方法（此 ModelStateDictionary modelState）

    {
        StringBuilder errors = new StringBuilder();
        try
        {
            foreach (ModelState model_State in modelState.Values)
                foreach (ModelError error in model_State.Errors)
                    errors.AppendLine(error.ErrorMessage.ToString());
            if (errors.Length > 1)
                throw new Exception();
        }
        catch (Exception ex)
        {
            throw new // your validation helper
        }

}

在 Ajax 成功为 false 的情况下捕获此错误消息，并使用 jQuery 对话框打开此错误消息。注意：使用 MVC 错误处理程序，它将在 Ajax 成功为 false 时发送错误消息。

- user2745484