InputModel 而非 ViewModel 上的 MVC 客户端验证

Question

我有一个带有 ViewModel 的视图。

它有一个回发一个完全不同的模型的表单。

我正在尝试让客户端验证工作。

我有

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

我的看法是这样的：

<form method="post" action="@Url.Action("Checkout")">
    @Html.ValidationSummary()
    <table>
        <tr>
            <td>Forename:</td>
            <td>@Html.TextBox("Forename")  @Html.ValidationMessage("Forename","*")</td>
        </tr>
</table>
</form>

我的印象是客户端验证基于输入上的 ViewModel 创建 HTML5 属性，但我没有该 ViewModel 来创建数据属性，那么客户端验证如何工作？

Answer 1

客户端验证开箱即用的方式是，它使用传递给视图的视图模型的 ModelMetadata 根据您在视图模型上使用的数据注释属性在输入字段上发出 HTML5 data-* 属性。如果您在 POST 操作中使用完全不同的视图模型作为操作参数，这显然不起作用，因为服务器端验证将依赖于 POST 操作中的视图模型，而客户端验证将依赖于传递给视图渲染的视图模型这个表格。

我能看到这个问题的唯一解决方案是忘记自动客户端验证并手动定义 jquery.validate 规则，以便它们与您在服务器上的 POST 操作中使用的视图模型保持一致。所以你基本上可以忘记data-*属性，从你的页面中排除jquery.validate.unobtrusive.min.js脚本和get into coding：

$(function() {
    $('form').vaildate({
        rules: {
            ...
        },
        messages: {
            ...
        }
    });
});