c# - 制作相同宽度的 KendoUI 文本框

Question

我有以下cshtml登录表单：

<div class="editor-label">
            @Html.LabelFor(model => model.UserEmailAddress)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserEmailAddress, new {@class = "k-textbox", style="width:200px"})
            @Html.ValidationMessageFor(model => model.UserEmailAddress)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.UserPassword)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserPassword, new { @class = "k-textbox", style="width:200px" })
            @Html.ValidationMessageFor(model => model.UserPassword)
        </div>

电子邮件地址是 typr 类k-textbox，但密码是text-box single-line password. 因此两者具有不同的宽度。即使在我尝试明确指定宽度和类之后。我正在为 MVC 使用 KendoUI。输出是：

这是页面来源：

 <div class="editor-label">
            <label for="UserEmailAddress">User Name (Email Id)</label>
        </div>
        <div class="editor-field">
            <input class="k-textbox" data-val="true" data-val-regex="E-mail is not valid" data-val-regex-pattern="^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}$" data-val-required="The User Name (Email Id) field is required." id="UserEmailAddress" name="UserEmailAddress" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="UserEmailAddress" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="UserPassword">UserPassword</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line password" data-val="true" data-val-required="Password required" id="UserPassword" name="UserPassword" type="password" value="" />
            <span class="field-validation-valid" data-valmsg-for="UserPassword" data-valmsg-replace="true"></span>
        </div>

这两者如何由相同的类、样式和宽度制成。

Answer 1

我认为最适合您的情况的解决方案是编写您自己的自定义 HTML 帮助程序，这将允许您将其他信息传递到您的文本框。有关说明，请参阅此 stackoverflow 帖子。

如果您不想弄乱自定义 HTML 助手，只需编写纯 HTML 代码即可：

<div class="editor-field">
    <input style="width:200px;" class="k-textbox single-line password" data-val="true" data-val-required="Password required" id="UserPassword" name="UserPassword" type="password" value="" />
    <span class="field-validation-valid" data-valmsg-for="UserPassword" data-valmsg-replace="true"></span>
</div>

Answer 2

是的，我注意到 kendo 在某些输入字段上使用类 .text-box 和单行而不是 k-textbox。我认为当字段属于某种类型（如数字）时会发生这种情况。您可以重新设置 .text-box 类的样式以匹配 .k-texbox。

更新：实际上我能够使用 MVC 5 语法将类 k-textbox 添加到输入字段中。能够删除 .text-box 的类。

@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "k-textbox" } })

更新：刚刚找到另一种方法。在模型中，我认为如果您使用 [DataType(DataType.Password)] 注释密码属性，那么在 ~/Views/Shared/EditorTemplates 文件夹中应该有一个名为 Password.cshtml 的文件。这是在使用 Html.EditorFor 并且 DataType 为 Password 时用于显示的模板。模板应添加 k-textbox 类以使两个字段保持一致。

@model object 

@Html.TextBoxFor(model => model, new { @class = "k-textbox", type = "password", autocomplete = "off", placeholder = ViewData.ModelMetadata.Watermark })

Answer 3

当您使用 EditorFor 时，Kendo UI 会覆盖样式。请改用 TextBoxFor。