asp.net formatting field input HTML

Question

I have a small fix I am trying to make. I am using a nice HTML5/CSS template and have developed an ASP.NET web application. I am trying to merge the code with the HTML/CSS. So in ASP.NET i am using this for form input

@using (Html.BeginForm())
                        {
                            @Html.ValidationSummary()
                            <div class="form-group">
                            <p>Vendor Name: @Html.TextBoxFor(m=> Model.VendorName)</p>
                            <p>Vendor Title: @Html.TextBoxFor(m=> Model.VendorTitle)</p>
                            <p>Description: @Html.TextBoxFor(m=> Model.VendorDescription)</p>
                            <p>Start Date: @Html.EditorFor(m=> Model.StartDate)</p>

                            <input type="submit" name="Add Vendor" />
                        }

However before i began making input in ASP.NET i was using this for my form design

<div class="form-group">
    <label for="focusedinput" class="col-sm-3 control-label">Vendor Name: </label>
    <div class="col-sm-6">
        <input type="text" class="form-control" id="vcvendorname" placeholder="Default Input" />
    </div>

So what i am trying to do is take the @Html.TextBoxFor(m=> Model.VendorName) and merge it with my original HTML code

The image below shows the nicely formatted HTML and below it the basic TextBoxFor. enter image description here

All help greatly appreciated

David · Accepted Answer · 2013-12-05 17:59:06Z

Well, your HTML doesn't match the previously-designed HTML at all. You have this:

<div>
    <p>some text <input></p>
</div>

Whereas the original has this:

<div>
    <label>some text</label>
    <div>
        <input>
    </div>
</div>

So I would fully expect that any CSS which is designed for one isn't going to work well on the other. You probably need to match the structure. Something like this:

<div class="form-group">
    @Html.LabelFor(m=> Model.VendorName)
    <div class="col-sm-6">
        @Html.TextBoxFor(m=> Model.VendorName)
    </div>

... and so on.

Even beyond that, you still need to add the css class attributes to the label and the input being generated. I think it's something like this:

@Html.LabelFor(m=> Model.VendorName, new { @class = "col-sm-3 control-label" })

For the input there are a few more things you need to specify to match the original:

@Html.TextBoxFor(m=> Model.VendorName, new { @class = "form-control", id = "vcvendorname", placeholder = "Default Input" })

The point is, in order to apply the pre-existing styling to your markup, your markup needs to match what was styled.

Darren Kopp · Accepted Answer · 2013-12-05 17:58:50Z

1

To replicate the html you have, you would want to use @Html.LabelFor(x => x.Field) in addition to specifying the class and placeholders.

For example

@using (Html.BeginForm())
{
    @Html.ValidationSummary()
    <div class="form-group">
        @Html.LabelFor(x => x.FocussedInput, new { @class = "col-sm-3 control-label" })
        <div class="col-sm-6">
            @Html.TextBoxFor(x => x.FocussedInput, new { @class = "form-control", placeholder = "Default Input" })
        </div>
}

answered Dec 5, 2013 at 17:58

Darren Kopp

77.8k9 gold badges81 silver badges93 bronze badges

Collectives™ on Stack Overflow

asp.net formatting field input HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related