10

我有一个带有数据注释的模型，我是一个动态绑定，它使用剔除模板绑定和映射插件与 viewmodel 绑定。我正在尝试对我的模型进行不显眼的客户端验证。在这种情况下我们如何做到这一点。有什么帮助/建议吗？

public class MyUser
    {
        [Required]
        [StringLength(35)]
        public string Username { get; set; }

        [Required]
        [StringLength(35)]
        public string Forename { get; set; }

        [Required]
        [StringLength(35)]
        public string Surname { get; set; }
    }

在我看来，我正在使用 ajax 动态模板绑定 MyUser 列表。

public JsonResult TestKnockout()
        {
            IList<MyUser> myUserList = new List<MyUser>();
            myUserList.Add(new MyUser { Username = "ajohn", Surname = "surname" });
            myUserList.Add(new MyUser { Username = "ajohn1", Surname = "surname1" });

            return Json(myUserList, JsonRequestBehavior.AllowGet);
        }
    }

看法：

<form id="Userform" action='@Url.Action("Save", "Home")' data-bind="template: {name: 'UserTemplate', foreach:UserList}">
<input type="Submit" name="name" value="Submit" />
</form>
<script id="UserTemplate" type="text/Html">
 <input type="text" data-bind="value: Username"></input>
 <input type="text" data-bind="value: Forename"></input>
 <input type="text" data-bind="value: Surname"></input> 
</script>
<script type="text/javascript">


    var viewModel = {
        UserList: ko.observableArray(new Array()),

        Save: function () {          
            //// reached here means validation is done.
            alert("Save");
        }
    }
    ko.applyBindings(viewModel);


    $.ajax({
        type: 'GET',
        url: '../Home/TestKnockout',
        contentType: "application/json",
        success: function (data) {
            $.each(ko.mapping.fromJS(data)(), function () {
                viewModel.UserList.push(this);
            })

            // attach the jquery unobtrusive validator
            $.validator.unobtrusive.parse("#Userform");

            // bind the submit handler to unobtrusive validation.
            $("#Userform").data("validator").settings.submitHandler = viewModel.Save;
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });

</script>
4

4 回答 4

11

pilavdzice 和 drogon 的答案非常好，但我们忘记了基本点。

由于我们使用 MVVM 模式来分离 UI 和数据 (+vm)，我们不想执行 UI 验证，而是执行 DATA VALIDATION。这两者完全不同，jquery validate 是一个很棒的插件，但它会进行 UI 验证（它从 UI 开始检查字段）。

我发现淘汰赛验证插件似乎做得很好，它的作用是走相反的路，它验证您的视图模型而不是您的 UI（它实际上映射到 UI 元素以显示错误）。

不幸的是，如果您的视图模型变得复杂，该插件将出现一些问题，但无论如何这是要走的路。

只要我们不使用 MVVM 模式，UI 验证就是完美的，毕竟我们分离组件（MV-VM）是为了什么？

希望我有所帮助！

谢谢！

于 2012-04-21T09:57:49.960 回答
4

我和你有同样的问题，所以我写了以下组件。

https://www.nuget.org/packages/ScriptAnnotations/

https://scriptannotations.codeplex.com/

请让我知道这可不可以帮你。

于 2014-04-19T02:49:50.840 回答
2

如果您使用的是 knockoutjs 和 jquery，我想出了以下非常简单的方法来进行基本验证。

无论您想在页面上的何处显示错误消息，都应包含一个 span 标签，如下所示：

<span name="validationError" style="color:Red" 
data-bind="visible: yourValidationFunction(FieldNameToValidate())">
* Required.
</span>

显然你需要编写“yourValidationFunction”来做任何你想做的事情。它只需要返回true或false，true表示显示错误。

如果显示任何验证错误，您可以使用 jquery 阻止用户继续操作。您可能已经有一个保存按钮来触发 javascript 函数来执行一些 ajax 或其他操作，因此只需在其顶部包含以下内容：

 if ($("[name='validationError']:visible").length > 0) {
        alert('Please correct all errors before continuing.');
        return;
    }

这比现有的许多其他验证解决方案更简单、更灵活。您可以将错误消息放置在您想要的任何位置，并且您无需学习如何使用某些验证库。

于 2012-03-09T20:33:22.543 回答
2

我会为此使用 jquery 的事件绑定。

首先，将 data-val 属性添加到要验证的输入中。（为了弄清楚要使用哪些 data-val 属性，我通常将表单服务器端绑定到模型和视图源。）

     <input data-val-required="test" data-val="true" data-bind="visible: 
     $parent.userEditMode, value: FirstName" />

其次，添加一个验证实用程序函数——这会在后台调用 MVC 使用的 jquery 验证插件。

    function validateForm(thisForm) {
        var val = thisForm.validate();
        var isValid = val.form();
        alert(isValid);
        if (!isValid) {
            thisForm.find('.input-validation-error').first().focus();
        }
        return isValid;
    }

第三，在发出 viewmodel 方法之前调用 validate。确保从页面中的标记中删除“点击”数据绑定属性。

$('#..your form id...').live('submit', function (e) {
    e.preventDefault();
    if(validateForm($(this)))
        viewModel.saveUser();
});
于 2012-02-07T15:49:46.240 回答