La liaison de champ de saisie de modèle dans MVC5 en utilisant bootstrap affichage de la mise en forme

Je suis de la création d'un MVC 5 site avec bootstrap 3.0.0. Je vais avoir de la difficulté à la liaison du modèle à un champ de saisie. Je ne connais pas la syntaxe pour le faire.

Le code suivant fonctionne fonctionnellement, mais je perds bootstrap 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>

D'autre part, ce bloc de code ressemble beaucoup, mais je ne peux pas obtenir la liaison de travailler.
@l'aide de 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>
}

Donc j'ai besoin d'aide, soit d'obtenir le bloc du haut ou bas bloc de travail. Le droit de la syntaxe pour le faire fonctionner sur le plan fonctionnel, ou une nappe méthode de fixation de la bonne CSS de bootstrap pour le faire paraître attrayant.

Toutes les suggestions sont les bienvenues.

OriginalL'auteur Rethic | 2013-10-03

  1. 16

    Vous étiez très proche.
    Afin de confirmer la syntaxe, toujours référence à 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" />
}

    Il y a un moyen plus simple si vous ne voulez pas à vous soucier de toutes le droit d'une structure html et css classes requises par Bootstrap appliquée: TwitterBootstrapMVC

    Avec qui vous voulez écrire quelque chose comme ceci:

    @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())
}

    ou quelque chose comme cela si vous le voulez rendre avec ajoute et ajoute:

    @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()
}

    l'utilisation de cette bibliothèque pour Bootstrap 3 n'est pas gratuit, mais vous pouvez le trouver moins cher que le temps que vous passez à trouver la syntaxe requise par Bootstrap sur votre propre. Il y a aussi une version d'Essai si vous voulez l'essayer en premier.

    Disclaimer: je suis l'auteur de TwitterBootstrapMVC

    Je vous remercie. Cela aide grandement. Je suis d'essayer votre bibliothèque maintenant, et je suis sûr qu'il va faire mon projet à venir beaucoup plus facile!

    OriginalL'auteur Dmitry