How to insert my model properties into this login bootstrap form?

Question

Is it possible to put the model properties in this styled login form? I don't know where to put the lambda helpers (x=>x.email, x=>x.password etc). Any help is appreciated.

@model User

@using (Html.BeginForm("LogIn", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
   <div class="container">
    <div class="row">
        <p><br></p>
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="page-header">
                        <h3>Welcome Back! Please Sign In</h3>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(x => x.Username)
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                            @Html.EditorFor(x => x.Username, new { htmlAttributes = new { @class = "form-control" } }) 
                        </div>
                    </div>                       
                    <div class="form-group">
                        @Html.LabelFor(x => x.Password)
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                            @Html.EditorFor(x => x.Password, new { htmlAttributes = new { @class = "form-control" } }) 
                        </div>
                    </div>

                    <hr />
                    <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button>
                    <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span> Login</button>
                    <div>
                        <h3 class="page-header">No Account? Sign Up, Its Free</h3>
                    </div>
                    <button type="button" class="btn btn-primary" />
                    Sign Up
                    <span class="glyphicon glyphicon-check"></span>
                </div>
            </div>
        </div>
    </div>
</div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Edit:

the problem is now that i can't apply the wanted style on the input i tried adding
@Html.EditorFor(x => x.Username, new { htmlAttributes = new{@class = "form-control"}}) and this also @Html.EditorFor(x => x.Username, new { @class = "form-control"}) and both doesnt work.

with adding above i`m trying to get this style:

but instead i'm getting these unstyled input boxes

2nd EDIT:

Instead of using :

@Html.EditorFor(x => x.Username, new { htmlAttributes = new { @class = "form-control" } })

I tried :

@Html.TextBoxFor(x => x.Username, new { @class = "form-control" })

and with this i'm getting the desired style, so i don`t exactly know the difference between Html.EditorFor and Html.TextBoxFor and if using Html.TextBoxFor is a good solution, maybe someone can clarify this.

You need to add the `form-control` class to your input fields: `@Html.EditorFor(x => x.Username, new { class="form-control" })` — markpsmith, Sep 07 '15 at 12:45
@markpsmith You can see in my "Edit" part of the post that i have already tried that too, and it`s not working... — john, Sep 07 '15 at 12:47
ah yes, apologies I didn't see the edit. Can you confirm that your inputs have the `form-control` class using Firebug or similar? — markpsmith, Sep 07 '15 at 13:00
markpsmith, im using google chrome, and when i inspect the input field has a class="text-box single-line", but now i tried this @Html.TextBoxFor(x => x.Username, new { @class = "form-control" }) and im getting what i wanted at least visually, so i changed the EditorFor, so is this a good solution or bad? — john, Sep 07 '15 at 13:03
No that's fine, I assumed editorfor would render a textbox anyway, but obviously it added extra classes which prevented it from looking right. — markpsmith, Sep 07 '15 at 13:28
I updated my answer with a link to show the differences between `EditorFor` and `TextboxFor` — Jamie Rees, Sep 07 '15 at 13:37

score 1 · Answer 1 · edited May 23 '17 at 11:53

As long as your Model is declared you can just change it to this:

<div class="container">
    <div class="row">
        <p><br></p>
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="page-header">
                        <h3>Welcome Back! Please Sign In</h3>
                    </div>
                    <form role="form" method="post" action="/Users/LogIn">
                        <div class="form-group">
                            @Html.LabelFor(x => x.Username)
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                @Html.EditorFor(x => x.Username)
                            </div>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(x => x.Password)
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                @Html.EditorFor(x => x.Password)
                            </div>
                        </div>
                        <hr />
                        <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button>
                        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span> Login</button>                        
                        <div>
                            <h3 class="page-header">No Account? Sign Up, Its Free</h3>
                        </div>                        
                        <button type="button" class="btn btn-primary">
                            Sign Up
                            <span class="glyphicon glyphicon-check"></span>
                        </button>                        
                    </form>                   
                </div>                
            </div>            
        </div>
    </div>
</div>

Also instead of using <form role="form" method="post" action="/Users/LogIn"> you can do the following:

@using (Html.BeginForm("LogIn", "Users", FormMethod.Post))
{
// DisplayFor and EditorFor code
}

You can read about the differences between and EditorFor and a TextBoxFor Here

Thanks that seems to work, but i'm getting weird style on the input boxes so i tried to add htmlAttributes @Html.EditorFor(x => x.Username, new { htmlAttributes = new { @class="form-control", placeholder="enter username" } }) but it doesn't show, any workaround for this to get the desired style? — john, Sep 07 '15 at 11:39
What doesn't show? I'm not sure about the styling but remove all of the classes in the example and add the htmlAttributes like you are doing. It should work fine. — Jamie Rees, Sep 07 '15 at 11:40
im getting this http://i.imgur.com/du7UfCp.png, but instead i want to get this http://i.imgur.com/0FmaItW.png, so when i add this line new { htmlAttributes = new { @class="form-control" } }) the style doesn`t want to apply. — john, Sep 07 '15 at 11:48
The form is not applying the style, can you edit your original question and add in the problem to the bottom with the View code please so I can update the answer — Jamie Rees, Sep 07 '15 at 11:49

How to insert my model properties into this login bootstrap form?

1 Answers1