CODEWITHSUNDEEP
htmlasp.net-mvcasp.net-mvc-4razorasp.net-mvc-5
Shane van Wyk
Shane van Wyk

Reputation: 1900

Razor Nest Elements TwitterBootstrapMVC5

How do you nest HTML elements using Razor?

Take this simple HTML for example 

<label class="input">
    <i class="icon-prepend fa fa-user"></i>
    <input type="text" name="fname" placeholder="First name">
</label>

What would the equivalent to this be in Razor? For whoever thought this is too broad. I basically want to register @Html.Label() then go on and set child attributes for it which will include an icon and and textbox.

Is it even possible to do what I'm trying to achieve with razor?

It will create something like this

I tried to figure it out but failed badly. This is the best I got.

<label class="input">
    @Html.Bootstrap().Icon("icon-prepend fa fa-user")
    @Html.Bootstrap().TextBoxFor("fname", htmlattributes: new { placeholder = "First name" })
</label>

I was hoping to create the label in razor too.

Upvotes: 1

Views: 256

Answers (2)

Cacho Santa
Cacho Santa

Reputation: 6914

Create a custom HTML helper. The output of the HTML helper will be what @CarlosAraujo suggests:

<label class="input">
    <i class="icon-prepend fa fa-user"></i>
    @Html.TextBoxFor("fname", htmlattributes: new { placeholder = "First name" })
</label>

You call it something like this:

@Html.MyCustomAwesomeTextBoxFor(...)

In this way you can encapsulate and re-use this component anywhere in your code.

Upvotes: 1

Carlos Araujo
Carlos Araujo

Reputation: 474

You can do something like this:

<label class="input">
    <i class="icon-prepend fa fa-user"></i>
    @Html.TextBoxFor("fname", htmlattributes: new { placeholder = "First name" })
</label>

Upvotes: 1

Related Questions