Adding bootstrap CSS class Attribute to textbox ASP.Net MVC

Question

When adding a css class attribute using new { @class="form-control"} to a textbox generated using html helpers, the attribute is added as a value while the same approach works fine with the textarea control.

@{
    ViewBag.Title = "New";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>New</h2>
<div>
    <div class="col-md-4">
        @using (Html.BeginForm())
        {
            <div class="form-group">
                @Html.Label("Title");
                @Html.TextBox("Title", new { @class = "form-control" })
            </div>
            <div class="form-group">
                @Html.Label("Body")
                @Html.TextArea("Body", new{ @class="form-control"} )
            </div>
        }
        <div class="form-group">
            <input class="btn btn-default" name="edit" value="edit"/>
            <input class="btn btn-default" name="save" value="Save" />
        </div>
        
    </div>
</div>

EmpJemz · Accepted Answer · 2018-05-03 15:43:04Z

2

Try doing this instead @Html.TextBox("Title","", new { @class = "form-control" })

The over load you're currently using is

HtmlHelper.TextBox(string name, object value)

answered May 3, 2018 at 15:43

EmpJemz

885 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shyju · Accepted Answer · 2018-05-04 14:59:22Z

1

You are using this overload of Html.TextBox for method

public static MvcHtmlString TextBox(
    this HtmlHelper htmlHelper,
    string name,
    object value
)

and the second parameter sets the value of the input, if model state dictionary does not contain one for the input. So your code will render something like this

<input id="Title" name="Title" type="text" value="{ class = form-control }">

You should use this overload which takes the value and htmlAttriubutes

public static MvcHtmlString TextBox(
    this HtmlHelper htmlHelper,
    string name,
    object value,
    IDictionary<string, object> htmlAttributes
)

Use it like this

@Html.TextBox("Title", null, new { @class = "form-control" })

Interesting thing to note here is, the helper method will look for the value in model state dictionary and view state dictionary as well. So if your action method is setting the ViewBag.Title to some value, that value will be used as the value of the input if you pass null as the value when calling this method. The default MVC project template uses ViewBag.Title to set the page title. So you probably are going to see that value in the input.

To solve that, you can explicitly pass an empty string instead of null

@Html.TextBox("Title", string.Empty, new { @class = "form-control" })

edited May 4, 2018 at 14:59

answered May 3, 2018 at 15:39

Shyju

220k106 gold badges421 silver badges499 bronze badges

2 Comments

Sibusiso Shongwe Over a year ago

This approach worked, the textbox was rendered correctly, only the textbox control has a value of newby default

Shyju Over a year ago

Read the last paragraph of the answer. Are you setting ViewBag.Title="New" in the action method ? You can explicitly pass string.empty instead of null. See the update in the answer.

Collectives™ on Stack Overflow

Adding bootstrap CSS class Attribute to textbox ASP.Net MVC

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related