【问题标题】:MVC Html.TextBox (not For) client side validation stylingMVC Html.TextBox (not For) 客户端验证样式
【发布时间】:2015-04-05 13:43:26
【问题描述】:

当涉及到某个视图中的客户端验证错误时,我遇到了美学和一致性问题。该视图由几个(子)部分视图组成,基本上是一种在许多地方同时使用 MVC/Razor 的Html.Textbox()Html.TextBoxFor() 的表单。在某些部分视图中,我需要输入不是强类型,因此只有TextBox(),在这些情况下,验证不会触发输入框的客户端样式。

我知道 ModelState 无效,Html.ValidationSummary() 显示来自TextBox()TextBoxFor() 触发的验证错误的正确错误消息。然而,只有TextBoxFor() 获得类:“input-validation-error”

问题:当错误触发时,如何将我的TextBox() 变为红色? (简单的说)。我认为缺少 JQuery 验证触发的值或属性。

代码:

作品:@Html.TextBoxFor(x => x.Owner, new { @class = "form-control" })

没有:@Html.TextBox(name, Model.Name, new { @class = "form-control" })

HTML 输出

作品:<input class="input-validation-error form-control" data-val="true" data-val-required="Input is required." id="Owner" name="Owner" type="text" value="">

没有:<input class="form-control" id="Applicants_1__Name" name="Applicants[1].Name" type="text" value="">

【问题讨论】:

  • 您是否尝试将 data-val 属性添加到 TextBox 代码,例如@Html.TextBox(name, Model.Name, new { @class= "form-control", data-val="true", data-val-required="Input is required" })
  • 是的,除了带有连字符的“data-val="true"”会导致无法解析符号,但是“data_val="true", data_val_required="Input is required" 将不起作用要么。
  • data-val-* 属性由 html 助手通过读取属性的ModelMetadata 添加。由于name 的值不是模型中的属性,因此没有可读取的内容,因此不会添加它们!使用强类型助手(如果你认为你不能,那么你做错了)
  • 叹息,那我就不会问这个问题了吧?我已经权衡了将它们全部更改所需的时间,因为它们有很多。所以没有办法将属性“手动”添加到TextBox()?出于好奇,在我的(见上文)案例中,等效的 TextBoxFor() 会如何?
  • 它只是@Html.TextBoxFor(m => m.Name),但我怀疑这不是真正的问题,因为看起来你有一个集合,它是for(int i = 0; i < Model.Applicants.Count; i++) { @Html.TextBoxFor(m => m.Applicants[i].Name) @Html.ValidationMessageFor(m => m.Applicants[i].Name) }。而且您不能使用部分来呈现集合(至少在没有一些额外插件的情况下不能) - 如果您不想使用 for 循环,请为 Applicants 使用自定义 EditorTemplate .

标签: jquery asp.net-mvc razor jquery-validation-engine html.textbox


【解决方案1】:

我个人只会在 jquery 中进行验证,然后您可以自定义您需要的任何内容。

然后您可以轻松地将输入文本框的css设置为红色;

$("#myInput").css("border", "1px solid red");

并使用重置它

$("#myInput").css("border", "none")

【讨论】:

  • 我已经有一个包含 20 多个输入的表单,可以完美地验证服务器端并且所有错误消息都会通过。 TextBoxFor() 获得了样式,而其他的则没有。只需要知道在客户端以某种方式禁用触发样式的两个声明时的本质区别。
  • 好的。只是出于兴趣,您必须使用 TextBox 而不是 TextBoxFor.. 的原因是什么?
  • 无法对其进行强类型化,因为它具有与之相关的唯一标识符。我需要在具有相同输入类型的几个子元素/对象之间分开,因此上面代码中的 var "name" 呈现: id="Applicants_1__Name" name="Applicants[1].Name
猜你喜欢
  • 2012-07-29
  • 2017-05-21
  • 2010-09-14
  • 2014-07-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-24
相关资源
最近更新 更多