jQuery Post和不打扰的Ajax验证不起作用的MVC 4

小编典典

jQuery Post和不打扰的Ajax验证不起作用的MVC 4

ajax

在jquery回发上，如果模型状态无效，我想显示使用jquery非侵入式验证的验证错误消息。我创建了一个示例应用程序。应用程序中的视图模型如下

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

视图具有以下标记

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

和编辑器模板看起来像

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

我已经检查了<script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/jquery.validate.unobtrusive.js"></script>页面中包含的内容，并且<add key="UnobtrusiveJavaScriptEnabled" value="true" />存在于Web配置文件中

阅读 247

2020-07-26

共1个答案

小编典典

您正在通过ajax调用信息，因此需要使用以下命令手动调用$form.validate();并测试结果$form.valid()：

function SaveCity() {

    $.validator.unobtrusive.parse($form);
        $form.validate();
        if ($form.valid()) {

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

        });

    }
}

如果纯粹是客户端，则错误将包含在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();
            });
        }
}

更新

这是上面的改编版，因此您可以从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();
        });

只需在else语句中弹出它，就可以了。:)

2020-07-26