Привязка поля ввода к модели в MVC5 с использованием форматирования форматирования бутстрапа

Question

Я создаю сайт MVC 5, используя bootstrap 3.0.0. Мне трудно привязать модель к полю ввода. Я просто не знаю синтаксиса для этого.

Следующий код работает функционально, но я теряю стиль бутстрапа.

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

Существует более простой способ, если вы не хотите, чтобы беспокоиться обо всех правильных 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