如何在元素之后显示 JSON 返回的错误答案

【问题标题】：how to display error returned by JSON, after an element如何在元素之后显示 JSON 返回的错误
【发布时间】：2015-05-04 13:06:35
【问题描述】：

我应该在一个元素之后显示从 json 结果获取的错误吗？即消息 - 必须在元素之后添加“电子邮件已存在” - 带有错误消息 css 类的 User_Email。

目前我将它显示在表单的顶部。

控制器动作结果

我在这里返回 Json。

ObjectParameter objIErrorCode = new ObjectParameter("ErrorCode", typeof(Int32));
ObjectParameter objBFlag = new ObjectParameter("bFlg", typeof(bool));
objConnection.Check_User_Exists(User_Email, objBFlag, objIErrorCode);

if (Convert.ToBoolean(objBFlag.Value) != true)
{                        
    return Json(new { Success = false, Message = "Email already exists" }, JsonRequestBehavior.AllowGet);
}
else
{
    return Json(new { Success = true, Message = "Email not exists" }, JsonRequestBehavior.AllowGet);
}

jQuery 验证

$("#User_Email").blur(function () {

    if ($(this).val() != "") {
        $.ajax({
            url: "/User/VerifyUserEmail?User_Email=" + $("#User_Email").val(),

            success: function (result) {
                var success = result.Success;
                var message = result.Message;

                if (success) {
                    var errorMsg = message;                        
                    $('#msg').html(errorMsg);
                    $('#msg').show();
                }
                else {
                    var errorMsg = null;
                    $('#msg').html(errorMsg);
                    $('#msg').hide();
                }
            }
        });
    }
    return false;
});

查看

 <div class="form-group">
     @Html.LabelFor(model => model.User_Email, new { @class = "control-label col-lg-2" })
     <div class="col-lg-4">
         @Html.EditorFor(model => model.User_Email)
         @Html.ValidationMessageFor(model => model.User_Email)
     </div>
 </div>

【问题讨论】：

您在 Jquery 代码中写入的 ID 为 msg 的控件在哪里？你为什么要在 else 条件下写 null？
您有一个 ValidationMessageFor() 用于该属性，那么为什么您不只是在 User_Email 属性上使用一个 [Remote] 属性，而无需您的脚本。
@StephenMuecke 非常感谢。我正在寻找这样的解决方案。
@JigneshGadhia。我建议你阅读How to: Implement Remote Validation in ASP.NET MVC

标签： c# jquery asp.net-mvc asp.net-mvc-4

【解决方案1】：

我认为您的 div 或名为 msg 的标签位于顶部。将该元素放在此代码下方。

 @Html.EditorFor(model => model.User_Email);

【讨论】：

【解决方案2】：

在您的 Jquery 验证中，您正在对 id 为“msg”的标签的 html 进行操作。无论您调用什么功能，例如show()、hide()、html()，它在 id 为“msg”的 html 对象上被调用。

$("#User_Email").blur(function () {

if ($(this).val() != "") {
    $.ajax({
        url: "/User/VerifyUserEmail?User_Email=" + $("#User_Email").val(),

        success: function (result) {
            var success = result.Success;
            var message = result.Message;

            if (success) {
                var errorMsg = message;                        
                $('#msg').html(errorMsg);   // <-------------------- over here
                $('#msg').show(); // <-------------------- over here
            }
            else {
                var errorMsg = null;
                $('#msg').html(errorMsg); // <-------------------- over here
                $('#msg').hide(); // <-------------------- over here
            }
        }
    });
}
return false;
});

要么将id为“msg”的元素移动到你想要的位置，要么你可以简单地在你的html中创建一个新元素（例如，一个div）在电子邮件地址文本框之后，或者你想要的页面上的任何位置显示消息，并给它一些 id，说“EmailMessageContainer”。

修改你的代码：

查看：

 <div class="form-group">
  @Html.LabelFor(model => model.User_Email, new { @class = "control-label col-lg-2" })
 <div class="col-lg-4">
     @Html.EditorFor(model => model.User_Email)
     @Html.ValidationMessageFor(model => model.User_Email)
     <div id="EmailMessageContainer">  //<----- This is the new element, could be a label or a label inside div or whatever you want with whichever class you want
     </div>
 </div>

和 Jquery 一样：

$("#User_Email").blur(function () {

if ($(this).val() != "") {
    $.ajax({
        url: "/User/VerifyUserEmail?User_Email=" + $("#User_Email").val(),

        success: function (result) {
            var success = result.Success;
            var message = result.Message;

            if (success) {
                var errorMsg = message;                        
                $('#EmailMessageContainer').html(errorMsg);   // <-------------------- over here
                $('#EmailMessageContainer').show(); // <-------------------- over here
            }
            else {
                var errorMsg = null;
                $('#EmailMessageContainer').html(errorMsg); // <-------------------- over here
                $('#EmailMessageContainer').hide(); // <-------------------- over here
            }
        }
    });
}
return false;
});

【讨论】：