Binding an input field to a model in MVC5 using formatting formatting

Question

I am building an MVC 5 site using bootstrap 3.0.0. I find it difficult to bind the model to the input field. I just don't know the syntax for this.

The following code works functionally, but I'm losing the startup style.

<div class="control-group">
    @Html.LabelFor(model => model.Name, new { @class = "control-label" })
    <div class="controls">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>
</div>

This block of code, on the other hand, looks great, but I can't get the binding to work. @using (Html.BeginForm ()) {       

    <div class="input-group">
        <span class="input-group-addon">@Html.LabelFor(model => model.Name)</span>
        <input type="text" class="form-control" placeholder="Enter your name here..."/>
        <span class="input-group-addon">@Html.ValidationMessageFor(model => model.Name)</span>
    </div>

    <div class="form-actions no-color">
        <input type="submit" value="Create" class="btn btn-default" />
    </div>

    </fieldset>
}

So I need help to get the top block or bottom block. Either the correct syntax to make it work functionally, or the smooth method of binding to the correct CSS in bootstrap to make it attractive.

Any suggestions are welcome.

Answer 1

. , Bootstrap

@using (Html.BeginForm())
{
    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon">@Html.LabelFor(model => model.Name)</span>
            @Html.TextBoxFor(model => model.name, new { @class = "form-control", placeholder = "Enter your name here..." })
            <span class="input-group-addon">@Html.ValidationMessageFor(model => model.Name)</span>
        </div>
    </div>
    <input type="submit" value="Create" class="btn btn-default" />
}

, html CSS-, Bootstrap: TwitterBootstrapMVC

- :

@using (var f = Html.Bootstrap().Begin(new Form().Type(FormType.Horizontal)))
{
    @f.FormGroup().TextBoxFor(m => m.Name).Placeholder("Enter your name here...")
    @f.FormGroup().CustomControls(Html.Bootstrap().SubmitButton())
}

- , , :

@using (Html.Bootstrap().Begin(new Form()))
{
    @(Html.Bootstrap().TextBoxFor(m => m.Name)
        .Placeholder("Enter your name here...")
        .Prepend(Html.Bootstrap().LabelFor(m => m.Name))
        .Append(Html.ValidationMessageFor(m=> m.Name)))
    @Html.Bootstrap().SubmitButton()
}

Bootstrap 3, , , , , Bootstrap . , .

---

: TwitterBootstrapMVC