為什么@Html.EditorFor和@Html.PasswordFor在MVC中創建不同的樣式框？

我目前正在@Html.EditorFor為密碼欄位使用 HTML 幫助程式。我想改用@Html.PasswordForHTML 幫助程式。

我復制了當前代碼并替換@Html.EditorFor為@Html.PasswordFor.

CSHTML

這是代碼：

@Html.EditorFor(x => x.Password, new { htmlAttributes = new { @class = "form-control k-textbox large", placeholder = "password", @id = "password", @autocomplete = "off" } })

@Html.PasswordFor(x => x.Pwd, new { htmlAttributes = new { @class = "form-control k-textbox large", placeholder = "password", @id = "password", @autocomplete = "off" } })

渲染輸出

引數 100% 相同，但會產生不同樣式的文本框：

請注意，它@Html.EditorFor也有驗證和占位符，但@Html.PasswordFor沒有；后期也有不同的風格。驗證spam元素也不是文本框的一部分。

生成的 HTML

這是生成的 HTML 代碼@Html.EditorFor：

<input autocomplete="off" class="form-control k-textbox large text-box single-line password k-invalid" data-val="true" data-val-required=" " id="password" name="Password" placeholder="password" type="password" value="" aria-invalid="true"> 

這是生成的 HTML 代碼@Html.PasswordFor：

<input data-val="true" data-val-required=" " htmlattributes="{ class = form-control k-textbox large, placeholder = password, id = password, autocomplete = off }" id="Pwd" name="Pwd" type="password" aria-invalid="true" class="k-invalid">

模型定義

這就是我在模型中定義這兩個欄位的方式：

[Required(ErrorMessage = " ")]
[DataType(DataType.Password)]
public string Password { get; set; }

[Required(ErrorMessage = " ")]
[DataType(DataType.Password)]
public string Pwd { get; set; }

我在這里做錯了什么？

uj5u.com熱心網友回復：

我不能告訴你為什么決定對這些進行不同的處理，但是雖然這些特定多載的第二個引數EditorFor()都PasswordFor()接受匿名物件，但這些物件實際上代表不同的概念。

檔案

對于EditorFor()，第二個引數的標題為additionalViewData：

一個匿名物件，可以包含將合并到ViewDataDictionary<TModel>為模板創建的實體中的附加視圖資料。

對于PasswordFor()，第二個引數的標題為htmlAttributes：

包含要為元素設定的 HTML 屬性的物件。

解釋

換句話說，你在這里在不同的層面上運作。當您為(ie, ) 設定htmlAttributes在匿名物件上呼叫的屬性時，該屬性將被決議為呈現元素上的 HTML 屬性：EditorFor()additionalViewData

<input autocomplete="off" class="…" id="password" placeholder="password" … > 

但是，當您為(ie, ) 設定htmlAttributes匿名物件時，它本身就被視為 HTML 屬性，正如您在 HTML 輸出中看到的那樣：PasswordFor()htmlAttributes

<input htmlattributes="{ class = …, placeholder = password, id = password, autocomplete = off }" … >

決議度

因此，你應該做些什么來提升htmlAttributes你的PasswordFor()通話水平：

@Html.PasswordFor(x => x.Pwd, new { @class = "form-control k-textbox large", placeholder = "password", @id = "password", @autocomplete = "off" })

應該呈現如下內容：

<input class="form-control k-textbox large" placeholder="password" id="password" autocomplete="off" … >

并且正確設定了 CSS 類，您還應該發現顯示對齊。

uj5u.com熱心網友回復：

方法簽名略有不同。

public static System.Web.Mvc.MvcHtmlString PasswordFor<TModel,TProperty> (this System.Web.Mvc.HtmlHelper<TModel> htmlHelper,
     System.Linq.Expressions.Expression<Func<TModel,TProperty>> expression,
     object htmlAttributes);

public static System.Web.Mvc.MvcHtmlString EditorFor<TModel,TValue> (this System.Web.Mvc.HtmlHelper<TModel> html,
    System.Linq.Expressions.Expression<Func<TModel,TValue>> expression,
    object additionalViewData);

您不需要將PasswordFor屬性物件包裝在另一個物件中。你所擁有的是：

@Html.EditorFor(m => m.Password, additionalViewData: new { htmlAttributes = new { ... } })
@Html.PasswordFor(m => m.Pwd, htmlAttributes: new { htmlAttributes = new { ... } })

很簡單：

@Html.PasswordFor(m => m.Pwd, new { @class = "..." })

標籤：网 asp.net-mvc html 助手 模型编辑器 密码

上一篇：.NET6-使用JWT令牌登錄用戶

下一篇：使用ifelse跨組內的多行重新編碼