2

I make my first steps in ASP.NET MVC 4. I have little problems with style when made forms. Here below you can see what I have in my MVC project. It works fine but dont have any style.

@using (Html.BeginForm()) {
        @Html.ValidationSummary(true)
        <fieldset>
            <p>Welcome!</p>
            <legend><h2>Log in</h2></legend>
            <div class="editor-label">
                @Html.LabelFor(model => model.UserName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.UserName)
                @Html.ValidationMessageFor(model => model.UserName)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Password)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Password)
                @Html.ValidationMessageFor(model => model.Password)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.RememberMe)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.RememberMe)
            </div>    
            <p>
                <input type="submit" value="Enter"/>
            </p>
        </fieldset>
    }

Here below you can see what I separately markup with traditional html. Every element here has there own style cause I used huge css file.

<div class="container">
        <header>
            <h1><strong>Welcome!</strong></h1>
            <h2>Log in</h2>
        </header>
        <section class="main">
            <form class="form-3">
                <p class="clearfix">
                    <label for="login">Log in</label>
                    <input type="text" name="login" id="login" placeholder="Username">
                </p>
                <p class="clearfix">
                    <label for="password">Password</label>
                    <input type="password" name="password" id="password" placeholder="Password"> 
                </p>
                <p class="clearfix">
                    <input type="checkbox" name="remember" id="remember">
                    <label for="remember">Запомнить</label>
                </p>
                <p class="clearfix">
                    <input type="submit" name="submit" value="Enter">
                </p>       
            </form>​
        </section>
    </div>

QUESTION: How correctly to apply the same style (css file) which I used in traditional html to my MVC project?

EDIT:

<div class="container">
        <header>
            <h1><strong>Welcome</strong></h1>
            <h2>Log In</h2>
        </header>
        <section class="main">
            @using (Html.BeginForm())
            {
                @Html.ValidationSummary(true)
                <form class="form-3">
                    <p class="clearfix">
                        <label for="login">Username</label>
                        <!--<input type="text" name="login" id="login" placeholder="Username">-->
                        @Html.EditorFor(model => model.UserName, new { id = "login", placeholder = "Username", type = "text", name = "login" })
                        @Html.ValidationMessageFor(model => model.UserName)
                    </p>
                    <p class="clearfix">
                        <label for="password">Password</label>
                        <!--<input type="password" name="password" id="password" placeholder="Password">-->
                        @Html.EditorFor(model => model.Password, new { id = "password", type = "password", name = "password", placeholder = "Password" })
                        @Html.ValidationMessageFor(model => model.Password)
                    </p>
                    <p class="clearfix">
                        <!--<input type="checkbox" name="remember" id="remember">-->
                        @Html.EditorFor(model => model.RememberMe, new { type = "checkbox", name = "remember", id = "remember" })
                        <label for="remember">Remember</label>
                    </p>
                    <p class="clearfix">
                        <input type="submit" name="submit" value="Enter">
                    </p>
                </form>
            }
        </section>
    </div>
1
  • new {@class="form-3"} you can apply like this as parameter of razor syntex. Commented Jan 9, 2016 at 11:57

1 Answer 1

2

If you whish to make use of one or more css files you can do the following:

  1. Add css to content folder
  2. Define a bundle (do this and you get minification and bundling for free. More about that here)
  3. Add it to your header in _layout.cshtml

Step 1:

enter image description here

Step 2 (App_Start/BundleConfig.cs):

bundles.Add(new StyleBundle("cssPathName").Include(new []
            {
                "~/Content/Css/Base/style.css"
            }
        ));

Step 3:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>

    </title>
    @Styles.Render("cssPathName")
</head>
<body>
</body>
</html>

Don't want to use bundling and minification?

Ignore step 2 and use this for step 3:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>

    </title>
    <link href="@Url.Content("~/Content/Css/Base/style.css")" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

Inline class on for example an editorfor

@Html.EditorFor(model => model.RememberMe, new{@class="css-class-name"})
Sign up to request clarification or add additional context in comments.

9 Comments

Hello Tom! Thanks for your answer. I used the third way which you explained. <link href="@Url.Content("~/Content/css/style.css")" rel="stylesheet" type="text/css" /> The problem is that for example I have this element <input type="checkbox" name="remember" id="remember"> what class I need to use?
Just do what you do in normal html. Apply the needed class name for example <input type="checkbox" name="remember" id="remember" class="class-name-which-exist-in-css-file" />.
Can you check my post again pls! I updated it with new code which I use right now. Unfortunatly I have empty page and I dont know the reason. Do you have any ideas?
Unfortunately it's impossible to know what's causing the white page. In case of an error I would assume you'll get a yellow screen of death
How are you calling this page? An empty page can mean you don't use this view.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.