1

次の 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>

これらの両方を同じクラス、スタイル、幅で作成するにはどうすればよいでしょうか。

4

3 に答える 3

1

はい、剣道は特定の入力フィールドで k-textbox の代わりにクラス .text-box と single-line を使用していることに気付きました。フィールドが数値のような特定のタイプの場合に発生すると思います。.k-texbox に合わせて .text-box クラスのスタイルを変更するだけです。

更新: 実際、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 })
于 2014-10-30T17:47:16.680 に答える