Add jQuery Mobile transition to ASP.Net MVC Form

Question

How does one add a jQuery Mobile transition to an HTML POST rendered with the ASP.Net MVC Html.BeginForm helper?

The transition requires an HTML attribute data-transition be added (I think to the form tag, but the docs are unclear on that point, providing only a hyperlink example).

I'm trying to use the BeginForm overload to add attributes to the rendered form tag. When using the new { ... } syntax to declare an anonymous class representing the HTML attributes, I get an error if an attribute name has a dash in it.

using (Html.BeginForm("Login", "Account", FormMethod.Post, 
    new {  data-transition="pop" }))

Error: Invalid anonymous type member declarator

This, in spite of the fact that the MSDN documentation shows an attribute with a dash in the name

new { id = "text1", accept-charset="iso-8859-1" }

Answer 1

Create a dictionary:

using (Html.BeginForm("Login", "Account", FormMethod.Post, 
    new Dictionary<string, object>{{ "data-transition", "pop" }} ))

Answer 2

If you prefer to use an anonymous object to specify your attributes then you could do the following

using (Html.BeginForm("Login", "Account", FormMethod.Post, new { data_transition = "pop" } ))

In short you replace the hypen with an underscore