Why is razor not adding the proper bootstrap classes to form controls?

Question

I've just downloaded VS 2013 because its new native support to the Bootstrap framework.

I create my forms, but they look different to original bootstrap ones. Problem is that it seems as razor and its "EditorFor" method, is not adding the "form-control" class needed for bootstrap.

I could add it as an html parameter, but then I would have to do that for each and every text field in my site.

How can I fix/modify Razor for it to automatically add this class for this objects?

Visual Studio itself makes little difference to what you're asking. Its the MVC libraries/helpers that matter. AFAIK they don't "natively support bootstrap".. because that would mean that every time you used EditorFor it would add unwanted classes to controls if you weren't using bootstrap. — Simon Whitehead
– Simon Whitehead, Commented Apr 10, 2014 at 3:44

DarthVader · Accepted Answer · 2014-04-10 06:19:44Z

2

Try using TextBoxFor.

@Html.TextBoxFor(model => model.Title, new {style="border:1px solid red;"})

This works. and if you want to add any class

@Html.TextBoxFor(model => model.Title, new {@class="fooo"})

should work.

answered Apr 10, 2014 at 6:19

DarthVader

55.6k78 gold badges225 silver badges309 bronze badges

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

2 Comments

Laggel Over a year ago

It work, but only with TextBoxFor if I use the default EditorFor it does not work. Which Means that I would have to replace it all over my app...

DarthVader Over a year ago

Yeah, as you mentioned, they promise to get editorfor work in mvc 5.1 but didnt quite well. Better if you go with this. It is proven to work.

Rowan Freeman · Accepted Answer · 2014-04-10 03:41:03Z

1

HTML classes must always be added manually. Nothing will do this for you automatically by default.

There are a few options for you:

Put the classes in the htmlAttributes, as you mentioned.
Create razor helpers or Html helpers.
Use a library like TwitterBootstrapMVC (I think this costs?)

answered Apr 10, 2014 at 3:41

Rowan Freeman

16.5k12 gold badges72 silver badges105 bronze badges

1 Comment

Laggel Over a year ago

You seem to be right, I've just found this asp.net/mvc/overview/releases/mvc51-release-notes#Bootstrap but anyways I can't get it to work even "adding" the class as they said, it just not get added.

Laggel · Accepted Answer · 2014-04-10 06:58:08Z

-1

At the end as definitely it's not an error, it's just that .NET decided not to include this. http://www.asp.net/mvc/overview/releases/mvc51-release-notes#Bootstrap

The easiest way I foudn was using Jquery and adding the class to all the field that I need to in my case all the text-boxes en select lists.

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

<script>
    $(".text-box").addClass("form-control");
    $("select").addClass("form-control");
</script>
}

answered Apr 10, 2014 at 6:58

Laggel

1,3864 gold badges22 silver badges37 bronze badges

1 Comment

trees_are_great Over a year ago

This seems too messy to me. I would suggest not using razor and adding the class as plain html. For me, this creates greater flexibility if I want to add a framework such as angular to the form.

Collectives™ on Stack Overflow

Why is razor not adding the proper bootstrap classes to form controls?

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related