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 to send CSS to the client using HTTP response headers?

    How do I prevent a JQuery UI menu from floating?

    How to create own responsive css grid system?

    How can I access CSS selectors programmatically? [closed]

    How slow is * css selector for mobile browsers?

    How to get content of a specific css column

    How to convert UPPERCASE text to Title Case using CSS

    How to make html button look pressed in using css?

    CSS Select element, how to disappear the arrow?

    How to dynamically create CSS class in JavaScript and apply?

    How to assign CSS to mobile page in asp.net

    How to use CSS to ensure items remain offscreen even if window is resized?

    How to center align text over CSS shape?

    How to set up simple hover buttons with block format?

    css: how to make circles connected by lines responsive with bootstrap?

    How to get CSS pulsating effect to work in FireFox and Internet Explorer?

    How to call CSS from JavaScript

    How do I get text in my html page to display features using the css stylesheet?

    How to center a 3 column Css Div Site?

    How can I show an attribute as text with CSS?

    How to reference css and script files into a node.js app?

    how to make small loading circle by changing css height and width?

    Using CSS how best to display name value pairs?

    How do I make my webpage scale-able depending on the size of the browser window?

    How to target table with ID?

    How to remove dash inside text with CSS?

    Why IE10 shows something totally different

    How to remove/add jQueryUI CSS theme from specific element?

    How do I change the order of elements and control flow in responsive css

    How do I get IE7 to print this properly with columns hidden by CSS?
    What I ended up doing is simply specifying the widths on the cells themselves and not using the <colgroup> anymore at all. Not ideal in my mind, so I'll leave...
    Read more