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

Posted 2023-05-09

【中文标题】在 jQuery 弹出窗口或 MVC 4 的警报中显示错误消息

【英文标题】：Display error message in jQuery popup or in alert in MVC 4

【发布时间】：2013-02-26 15:08:13

【问题描述】：

我正在使用 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...    

关于.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>

【问题讨论】：

忘记添加html...

没有问题，您可以编辑和更新问题:)

你有什么问题？您是否遇到此代码的问题？

我没有收到任何错误.. 表单直接发布

【参考方案1】：

我不确定我是否理解您的问题，但您可以将 ajax 发布到您的控制器并返回部分视图。然后将部分视图加载到您的 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");

                
            
        );

【讨论】：

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

【参考方案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();
                        
                    );
    ;

【讨论】：

谢谢，目前正在使用 jquery validate 但我正在检查它是否可以帮助其他人，错误消息也会在 html 上弹出

【参考方案3】：

public static void 方法（这个 ModelStateDictionary 模型状态）

    
        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 成功错误打开 jquery 对话框中捕获此错误错误消息 注意：使用 mvc 错误处理程序，它将发送带有 ajax success= false 的错误消息