使用引导程序显示格式将输入字段绑定到MVC5中的模型

Question

我正在使用bootstrap 3.0.0创建一个MVC 5站点.我很难将模型绑定到输入字段.我根本不知道这样做的语法.

以下代码在功能上有效,但我失去了bootstrap的样式.

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

另一方面,这段代码看起来很棒,但我无法使绑定工作.@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>
}

所以我需要一些帮助才能使顶部块或底部块工作.正确的语法使其在功能上工作,或者在引导程序中附加到正确的CSS以使其看起来具有吸引力的光滑方法.

欢迎任何建议.

Answer 1

你非常接近.为了确认正确的语法,请始终引用Bootstrap Docs

@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" />
}

如果你不想担心应用Bootstrap所需的所有正确的html结构和css类,有一种更简单的方法: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的作者