如何在 jQuery 对话框中验证 ViewModel？

Question

我的 AddressEditViewModel 有一堆标记为[Required(ErrorMessage="My Error Message Here")] 和/或[DisplayName("etc")] 的属性。 DisplayName 属性起作用：

<%: Html.LabelFor(model => model.Field) %>

，我认为Required 属性也可以，但我不知道如何在表单上提供反馈（jQuery UI 对话框）。这个表单是通过 $.ajax() 提交的，在 action 方法中：

[HttpPost]
    public ActionResult Edit(AddressEditViewModel address)
    {
        var addressToEdit = dc.Addresses.FirstOrDefault(x => x.AddressID == address.AddressIDEdit);

        if (ModelState.IsValid)
        {
            //make sure there is at least one active address
            if (!address.ActiveEdit && (addressToEdit != null && addressToEdit.Active))
            {
                if (dc.Addresses.Where(x => x.ProfileID == addressToEdit.ProfileID).Count(x => x.Active) == 1)
                {
                    address.ActiveEdit = true;
                }
            }

            try
            {
                //TryUpdateModel SUCKS!~
                //use valueinjecter
                addressToEdit.InjectFrom<VMToAddress>(address);

                dc.SubmitChanges();
            }
            catch (Exception)
            {
                return View(address);
            }
        }
        else
        {
            return View(address); //activate the red borders around textboxes
        }

        return Content("Ok");
    }

还有 ValueInjecter 的小类：

public class VMToAddress : LoopValueInjection
{
    protected override string TargetPropName(string sourcePropName)
    {
        if (sourcePropName.EndsWith("Edit"))
        {
            return sourcePropName.RemoveSuffix("Edit"); 
        }
        else if (sourcePropName.EndsWith("Create"))
        {
            return sourcePropName.RemoveSuffix("Create");
        }
        else
        {
            return sourcePropName;
        }
    }
}

即使address.RequiredField 为空，ModelState.IsValid 也会返回 true。 SubmitChanges() 抛出 SqlException 因为它无法插入 NULL 值。我是否不了解如何使用 ModelState，或者是否有其他方法可以对无效字段提供反馈？我想在我的文本框周围设置一个红色边框，就像我在很多 MVC 教程中看到的模型验证一样，或者可能显示来自 ViewModel 的 ErrorMessage 值。

另一个编辑

删除了 jQuery.validate 并创建了一个客户模型绑定器来容纳常用命名的元素。自定义模型绑定器现在甚至添加了验证消息（所以我删除了 Html.ValidationMessageFor(...) 调用，因为我不想要它们——只是边框）。

但是，在 Omu 建议使用 jQuery.form 插件时，我的模型在第一次回发后似乎丢失了。 closeEditForm 只检查Content("Ok") 的返回，关闭编辑对话框，最后刷新列表对话框。但是，发生错误后，它没有正确关闭对话框，给我红色边框（万岁），但在随后的帖子中，没有模型（嘘）传递给我的活页夹——只有空值。

$('#editform').submit(function () {
    $(this).ajaxSubmit({
        target: '#editform', //this will allow validation classes to be added, etc
        success: closeEditForm //this will close the edit form if the response text is "Ok"
    });
    return false;
});

我这样提交表单：

$("#dialog-address-edit").dialog({
            ...lots of dialog settings
            buttons: {
                'Save': function () {
                    $('#editform').submit();

Answer 1

我建议您使用 jquery.form 插件，如果模型状态良好，则在操作中返回 Content("ok")，否则返回 View(yourViewModel)，在客户端查看响应是否正常，则关闭否则您将使用响应（即 html）填充它的对话框

你可以看这里：http://surveymaster.codeplex.com/我在这个项目中用jquery.form做了很多ajax， 虽然我没有使用在 ajax 响应中返回 html 的东西因为它没有必要在那里