Search code examples
twitter-bootstraprazor

@Html.PasswordFor not taking bootstrap class

I have the following razor code for displaying the textbox and password

 @Html.EditorFor(model => model.LoginName, new { htmlAttributes = new { @class = "form-control" } })

 @Html.PasswordFor(model => model.LoginPassword, new { htmlAttributes = new { @class = "form-control" } })

However, when rendered, the look and feel of textbox is not same as password textbox. Why when the class is same for both?

There isnt any css reference in between the above two lines so wondering about the inconsistency.

Has anyone faced this problem? I would hate to write a custom css just for password textbox for it to look like username textbox.

Thank you

enter image description here

Solution

  • Change the syntax of your @Html.PasswordFor to what I've shown below, and it will apply your class correctly.

    @Html.EditorFor(model => model.LoginName, new { htmlAttributes = new { @class = "form-control" } })

@Html.PasswordFor(model => model.LoginPassword, new { @class = "form-control" })

    The reason is the second argument for EditorFor is object additionalViewData, where the second argument for PasswordFor is object htmlAttributes.