How to insert my model properties into this login bootstrap form? - asp.net-mvc

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.

Answer 1

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