Question

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

查看：

@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，这意味着注释确实有效。有没有办法从客户端执行模型验证，因此避免回发？

Answer 1

如果你想要不引人注目的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")

Answer 2

您的问题是因为您错误拼写了<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 Validation nuget包。

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

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

最后，将以下脚本添加到主布局（或通过bundle注册）：

<script src="~/Scripts/jquery.validate.min.js")></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js")></script>

Ajax.BeginForm导致回发 - 验证无效

2 个答案: