制作相同宽度的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 class k-textbox，但密码为text-box single-line password。因此两者都具有不同的宽度。即使在我尝试明确指定宽度和类之后。我正在使用KendoUI进行MVC。 输出是：

这是页面来源：

 <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帮助程序，这样您就可以将其他信息传递到文本框中。有关说明，请参阅this stackoverflow post。

如果您不想搞乱自定义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。