Jquery post和不引人注目的ajax验证在MVC4中不起作用

在jquery回发中，如果模型状态无效，我希望使用jquery unobtrusivevalidation显示验证错误消息。我创建了一个示例应用程序。应用程序中的viewmodel如下所示

 public class CityModel
{
    public int Id { get; set; }

    [Display(Name = "City")]
    [Required(ErrorMessage = "City is required")]
    public string City { get; set; }
}

控制器具有以下动作方式

 public ActionResult City()
    {
        var cities = GetCities();

        return View(cities);
    }

    [HttpPost]
    public ActionResult SaveCity(CityModel cityModel)
    {
        if (ModelState.IsValid)
        {
            //Save City
            return null;
        }
        else
        {
            return View();
        }
    }

public List<CityModel> GetCities()
    {
        var citiesList = new List<CityModel>
        {
            new CityModel() {Id = 1, City = "London"},
            new CityModel() {Id = 2, City = "New York"}
        };
        return citiesList;
    }

公共行动结果城市（）
{
var cities=GetCities（）；
返回视图（城市）；
}
[HttpPost]
公共行动结果保存城市（城市模型城市模型）
{
if（ModelState.IsValid）
{
//拯救城市
返回null；
}
其他的
{
返回视图（）；
}
}
公共列表（城市）
{
var citiesList=新列表
{
new CityModel（）{Id=1，City=“London”}，
new CityModel（）{Id=2，City=“纽约”}
};
返回城市列表；
}

视图具有以下标记

@model List<CityModel>
<h2>Cities</h2>

@Html.ValidationSummary(true)
@using (@Html.BeginForm(null, null, FormMethod.Post, new { id = "frmSite", name = "frmSite" }))
{
@Html.EditorForModel()

<input type="submit" name="Sumbit" onclick=" SaveCity(); return false; " />
}

<script>
function SaveCity() {       
    $.ajax({
        type: "POST",
        url: "/Home/SaveCity",
        contentType: "application/html; charset=utf-8",
        data: {
            Id: $('.cityId').val(),
            City: $('.cityName').val()
        },
        success: function (data) {
        }

    });
}   
 </script>

@型号列表
城市
@Html.ValidationSummary（true）
@使用（@Html.BeginForm（null，null，FormMethod.Post，new{id=“frmSite”，name=“frmSite”}））
{
@Html.EditorForModel（）
}
函数SaveCity（）{
$.ajax({
类型：“POST”，
url:“/Home/SaveCity”，
contentType:“应用程序/html；字符集=utf-8”，
数据：{
Id:$（'.cityId'）.val（），
城市：$（'.cityName'）.val（）
},
成功：功能（数据）{
}
});
}   

编辑器模板如下所示

@model CityModel
<table class="table">
    <tr>
        <td>
            @Html.TextBoxFor(x => x.Id, new {@class = "cityId"})
        </td>
    </tr>
    <tr>
        <td>
            @Html.TextBoxFor(x => x.City, null, new {@class = "cityName"})
            @Html.ValidationMessageFor(x => x.City)
        </td>
    </tr>
</table>

@model城市模型
@TextBoxFor（x=>x.Id，新的{@class=“cityId”}）
@TextBoxFor（x=>x.City，null，新的{@class=“cityName”}）
@Html.ValidationMessageFor（x=>x.City）

---

我已经检查了页面中包含的

，并且

存在于web配置文件中

您正在通过ajax调用帖子，因此需要手动调用

$form.validate（）

并使用

$form.valid（）

测试结果：

如果它是纯客户端的，那么错误将包含在jquery验证对象

$form.validate（）.errorList

中，但您必须执行一些与我下面提到的类似的手动处理

如果希望返回服务器端模型状态，可以将模型状态错误作为键值对添加到控制器中，并将其作为json返回

您可以使用以下方法显示消息

这将查找具有模型状态错误键的所有验证消息范围，并向其中添加红色错误消息。请注意，您可能希望对此进行调整，以便针对某个键显示许多错误消息

public doValidation(e)
{
        if (e.data != null) {
            $.each(e.data, function (key, value) {
                $errorSpan = $("span[data-valmsg-for='" + key + "']");
                $errorSpan.html("<span style='color:red'>" + value + "</span>");
                $errorSpan.show();
            });
        }
}

公共验证（e）
{
如果（如数据！=null）{
$。每个（如数据、函数（键、值）{
$errorSpan=$（$span[data valmsg for='“+key+'”]）；
$errorSpan.html（“+value+”）；
$errorSpan.show（）；
});
}
}

已更新

下面是经过调整的上述代码，因此您可以从jquery中手动解析它，而不是不引人注目的错误：

        $.each($form.validate().errorList, function (key, value) {
            $errorSpan = $("span[data-valmsg-for='" + value.element.id + "']");
            $errorSpan.html("<span style='color:red'>" + value.message + "</span>");
            $errorSpan.show();
        });

$.each（$form.validate（）.errorList，函数（键，值）{
$errorSpan=$（“span[data valmsg for='”+value.element.id+'”）；
$errorSpan.html（“+value.message+”）；
$errorSpan.show（）；
});

---

只要在else语句中弹出该选项，您就可以开始了。：）

您是否在表单中设置了

@Html.ValidationSummary（true）

？是的。它设置为true不是吗？

content:“application/html；charset=utf-8”

应该是

contentType:“application/json；charset=utf-8”

@Jai yes。我改了，但没什么区别。我用action方法获取模型中的数据。也更新了问题。表单中是否有字段，因为如果字段存在于表单中，则不引人注目的验证将起作用，并且您必须像post-Perfect@hutchonoid中的答案那样验证表单。非常感谢你@学员：没问题，我也将向您展示如何解析返回的内容。：）

        $.each($form.validate().errorList, function (key, value) {
            $errorSpan = $("span[data-valmsg-for='" + value.element.id + "']");
            $errorSpan.html("<span style='color:red'>" + value.message + "</span>");
            $errorSpan.show();
        });