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.

All help greatly appreciated

Answer 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>
}

Answer 2

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.