1

我正在尝试在客户端验证我的模型（在回发之前），但它似乎不起作用。这是我的一段代码：

看法：

@section scripts{
    <script type="text/javascript" src="@Url.Content( "~/scripts/jquery.validate.js")"></script>
    <script type="text/javascript" src="@Url.Content( "~/scripts/jquery.validate.unobtrusive.js")"></script>
    <script type="text/javascript" src="@Url.Content( "~/scripts/jquery.unobtrusive-ajax.js")"></script>       
}

@using(Ajax.BeginForm("AddPhase", new AjaxOptions {
    UpdateTargetId = "newPhaseSeparator",
    InsertionMode = InsertionMode.InsertAfter
})) {
    @Html.ValidationSummary()
    <div id="newPhase">
        <input type="text" id="phaseName" name="name" /> 
        <button id="btnAddPhase">Ok</button>
    </div>
}

模型：

[Required(ErrorMessage = "Please enter a name")]
public string Name { get; set; }

在AddPhase操作中，ModelState.IsValid 为 false，这意味着注释确实有效。有没有办法从客户端执行模型验证，从而避免回发？

4

2 回答 2

2

如果您想要不显眼的 javascript 验证工作，您将不得不使用强类型帮助器来生成您的输入字段，而不是像您那样硬编码它：

<div id="newPhase">
    @Html.EditorFor(x => x.Name)
    <button id="btnAddPhase">Ok</button>
</div>

这显然假设您的视图是针对您的问题中显示的模型进行强类型化的，这看起来很正常，此外，当您分析生成的标记时，您现在会注意到输入字段上相应的 HTML5 data-* 属性。当您对输入字段 ( <input type="text" id="phaseName" name="name" />) 进行硬编码时，这些属性不存在，并且不显眼的验证脚本没有任何效果。

如果您没有遵循良好的做法并且您的视图不是强类型的视图模型，您仍然可以使用弱类型版本（完全不推荐）：

@Html.TextBox("Name")
于 2013-08-06T21:44:11.180 回答
1

您的问题是因为您拼错了<input>标签的名称：

<input type="text" id="phaseName" name="name" />

这应该Name与模型中的属性名称一样，而不是name：

<input type="text" data-val="true" data-val-required="This field is required" id="phaseName" name="Name" />

为了实现这种验证，您应该安装Jquery Validationnuget 包。

然后，确保在 web.config 中启用了不显眼的验证：

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

最后，将以下脚本添加到您的主布局中（或通过捆绑注册它们）：

<script src="~/Scripts/jquery.validate.min.js")></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js")></script>
于 2013-08-07T08:16:11.663 回答