Adding a class to an Ajax.BeginForm Call in Razor View Model

Question

I have a the following code

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "update_panel", Url = "/Part/SearchPart" }))
        {
            <input type="text" placeholder="Search Parts"/>
            <input type="submit" value="Search"/>
        }

it outputs the following HTML

<form action="/Part" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#update_panel" data-ajax-url="/Part/SearchPart" id="form0" method="post">                        
    <input type="text" placeholder="Search Parts"/>
        <input type="submit" value="Search"/>
</form>

and I would like to have the outputted HTML to have the ,form> tag to have the class="pull-right". How can I accomplish this?

Answer 1

You could use one of the overloads that allows you to specify html attributes::

@using (Ajax.BeginForm(null, null, new AjaxOptions { UpdateTargetId = "update_panel", Url = "/Part/SearchPart" }, new { @class = "pull-right" }))
{
    <input type="text" placeholder="Search Parts"/>
    <input type="submit" value="Search"/>
}

Also I would more than strongly recommend you relying on the url of your form instead of hardcoding it in the AjaxOptions because when you deploy your application in a virtual directory chances are that your hardcoded /Part/SearchPart url will not work. Not to mention if you change your route patterns in Global.asax. So:

@using (Ajax.BeginForm("SearchPart", "Part", null, new AjaxOptions { UpdateTargetId = "update_panel" }, new { @class = "pull-right" }))
{
    <input type="text" placeholder="Search Parts"/>
    <input type="submit" value="Search"/>
}

Answer 2

You have to put you action and controll to refer from your form.

here is the example:

@using (Ajax.BeginForm("LogOn","Account", new AjaxOptions { UpdateTargetId = "update_panel", Url = "/Part/SearchPart" }, new { @class ="pull-right"}))
{
    <input type="text" placeholder="Search Parts"/>
    <input type="submit" value="Search"/>
}