how to add class to razor form and give padding?


Tags: css,asp.net-mvc-3,razor

Problem :

 @using (Html.BeginForm())
 {
   @Html.TextBoxFor(m => m.Name, new { @Value = "Name" })
   @Html.TextBoxFor(m => m.Email, new { @Value = "Email" })
   <input type="submit" value="Go" />
  } 

how do i add a css class to this and add padding? I have the following css i wish to add to try pad it a bit

    .newsletterform
{
    color:black;
    padding-left:20px;
}


Solution :

You can set the class with @class="className" but you have to specify actionName, controllerName, FormMethod too because there is no overload of Html.BeginForm that supports setting only html attributes.

@Html.BeginForm("ActionName", "ControllerName", 
                 FormMethod.Post, new { @class = "newsletterform" }

You can create your own html helper, that does that for you, too.

Update

Here is a custom html helper does that.

public static class HtmlHelperExtension
{
    public static MvcForm BeginFormWithClassName(this HtmlHelper helper, string cssClassName)
    {
        string controllerName = (string)helper.ViewContext.RouteData.Values["controller"];
        string actionName = (string)helper.ViewContext.RouteData.Values["action"];
        return helper.BeginForm(actionName, controllerName, FormMethod.Post, new { @class = cssClassName });
    }
}

You can call the method from your view like this.

@using (Html.BeginFormWithClassName("newsletterform"))
{

}

hope this helps


    CSS Howto..

    How can I get rounded corners to fit over other content?

    How do I divide all margins but last to even out space?

    How to mail HTML/CSS output as attachment?

    How to stretch container div from header to footer with html/css?

    How to completely gray out an image with css?

    Modal box doesn't show completely

    how to make animated 404 gears?

    How to resize the images to have the same height in group while keeping aspect ratio?

    CSS simple menu - how to align?

    how to edit a css selector in order to shorten the amount of characters used in file

    how to deal with repeated letters in a javascript hangman game

    How to fix the css padding

    How can I center my ul li list in css?

    CSS radio button border how to remove it?

    How to display an image in the right upper corner of an input box

    How to horizontally center align a span inside a div

    Div won't resize vertically in slideshow with CSS queries

    How can a directory/folder name affect page rendering?

    How to create a darker background on a whole page with one new div

    Polymer 1.x: How to imperatively (using JS) obtain the value of a custom CSS property?

    How to set fit-content for width in right side - dynamic content width

    How to make my phone number bold using css [closed]

    How to center [image + text] of unknown width?

    How can I make a button change its position after being clicked?

    How to access css selector properties after getting access to selector

    How to use cross domain dynamically generated CSS

    How can I get css pseudo element :checked to work in IE7 + IE8?

    How do you get the height of a form div + error messages after hitting the submit button in javascript?

    How to control multiple images for a single background definition

    How to make a webpage look like a popup? [closed]