applying css to div in razor and mvc

Question

i'm new to RAZOR syntax + mvc in asp.net. I'm webforms veteran and have worked a lot in that but now i don't know that how to apply CSS to my DIV containers. in web forms i used to do like:

div
{
  width: 200px
  background-color: blue;
}

now how to do this in razor view ?

my code:

  @{
    ViewBag.Title = "Home Page";
}

    @using (Html.BeginForm("register","Home", FormMethod.Post, new {id="submitForm"})) 
    {

       <div style="Width:200px">
        <i>@Html.Label("Name:")</i>
           @Html.TextBox("txtboxName")
       </div>
       <br />
       <div style="Width:200px">
        <i>@Html.Label("Email:")</i>
           @Html.TextBox("txtboxEmail")
       </div>
       <br />
       <div style="Width:200px">  
        <i>@Html.Label("Password:")</i>
           @Html.Password("txtboxPassword")
       </div>
       <br />
       <div>  
        <button type="submit" id="btnSubmit" name="Command" value="Submit">Submit</button> 
       </div>


    }

MVC works with style bundles, existing of all CSS files you want. See [Styles.Render in MVC4](http://stackoverflow.com/questions/12028401/styles-render-in-mvc4). — CodeCaster, Dec 30 '13 at 12:01
This has nothing to do with razor. It's just a matter of css and html. You need to clarify what your exact problem is. Is the css in a proper .css file or it's inside the .cshtml? Is the css loaded at all? You are missing a ; in your css tho. — , Dec 30 '13 at 12:02

score 1 · Answer 1 · answered Dec 30 '13 at 12:04

1

razor is nothing but a server side language for MS MVC framework, which ultimately gets parsed to HTML. your this syntax is perfectly valid

<div style="Width:200px">
        <i>@Html.Label("Name:")</i>
           @Html.TextBox("txtboxName")
</div>

now, if you want to apply css class or rule to @Html.Label or any other MVC helper(yes they are called Helper methods), look for the argument HtmlAttributes in the functions and you can do something like

    @Html.Label("Name:", new {@class="classname"})

or like :

    @Html.Label("Name:", new {style="width:200px;"})

so basically, in almost all helpers of MVC, you will get to pass HtmlAttributes (and RouteValues), sometimes they are exposed through another inturn methods.

answered Dec 30 '13 at 12:04

Manish Mishra

12,163
5
35
59

not working :/ DOESNOT CONTAIN DEFINITION FOR LABEL AND FUNCTION HAS SOME INVALID ARGUMENTS – James Dec 31 '13 at 05:28
@James, what you mean?, since you are using `@Html.Label`, you should be able to pass `HtmlAttributes` in it. – Manish Mishra Dec 31 '13 at 07:43
What error @James? When you type `@Html.` what are the code suggestions? Aren't `Label`, `RadioButton`, `TextArea`, etc.. available? – chiapa Jun 30 '14 at 08:27

applying css to div in razor and mvc

1 Answers1