Home How to insert my model properties into this login bootstrap form?
Reply: 0

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

user12033 Published in September 19, 2018, 11:20 am

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

                    <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>
                        <h3 class="page-header">No Account? Sign Up, Its Free</h3>
                    <button type="button" class="btn btn-primary" />
                    Sign Up
                    <span class="glyphicon glyphicon-check"></span>

@section Scripts {


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.

share|improve this question
  • Replace <input type="email".. with @Html.EditorFor(x => x.Email), same goes for password. – markpsmith Sep 7 '15 at 10:59
  • Can you post your 'new' View code please. – Jamie Rees Sep 7 '15 at 12:24
  • That is the new view code... or am i missing something? – john Sep 7 '15 at 12:28
  • You need to add the form-control class to your input fields: @Html.EditorFor(x => x.Username, new { class="form-control" }) – markpsmith Sep 7 '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 7 '15 at 12:47

1 Answer 1

active oldest votes
up vote 1 down vote
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.534536 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO