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" }
Create a dictionary:
using (Html.BeginForm("Login", "Account", FormMethod.Post,
new Dictionary<string, object>{{ "data-transition", "pop" }} ))
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
Related
I'm working on an MVC Application that has a basic ajax form for submitting data. After the form, there is a partial view which has another ajax form in it for submitting data to a drop-down box allowing users to update its contents without leaving the page.
Create
#model My Project.Models.Cars
#using (Ajax.BeginForm("Create", "Cars", new AjaxOptions
{
HttpMethod = "POST"
}))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
... form fields would be here ...
}
#Html.Partial("_Manufacturer")
Partial View(_Manufacturer)
#using (Ajax.BeginForm("AddManufacturer", "AnotherController", new AjaxOptions
{
HttpMethod = "POST"
}))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
... form fields for populating dropdown list ...
}
When I try to submit the ajax form in the partial view I am getting an error of:
404 Resource Not Found at Cars/AddManufacturer
The controller it's supposed to use is AnotherController as you can see in the form above. I don't want to have to create multiple forms and methods, I want to reuse the method I have. Is there a reason it's doing this and is there anything I can do about it?
Sometimes partials render URLs differently accordingly to where they are called from.
Inspect your page and see if the URL rendered on the second form is right. If that is the case then find a method overload that can resolve the route correctly.
Here is a list of the overloads:
https://learn.microsoft.com/en-us/previous-versions/aspnet/web-frameworks/dd492974(v=vs.118)
I'm in the process of upgrading my app to Bootstrap 2.1.1 and I need to add a class attribute (class="form-horizontal") to many of the form tags. The problem is, most of the forms use the rather beautiful
#using (Html.BeginForm()) {
format which I'd rather keep. The obvious way to get the class attribute in there is to use the following overload, for example:
#using (Html.BeginForm("Register", "Account", FormMethod.Post, new { #class = "form-horizontal" })) {
But I'd rather not do that. What is the best way to add a class attribute to my form?
I've thought about using a jQuery document ready handler to .addClass("form-horizontal") to forms, but am worried that users would see the dreaded 'flash of unstyled content'.
Another approach might be to use a less-style mix-in, to add the .form-horizontal class to all form style rules but I haven't used less yet, so I'm not sure about this one.
Anyone know the best way to solve this problem?
Following StanK's advice, and the advice of some other answers on SO, I created an extension method specifically tailored to that Bootstrap form layout:
public static MvcForm BeginHorizontalForm(this HtmlHelper helper) {
return helper.BeginForm(null, null, FormMethod.Post, new { #class = "form-horizontal" });
}
which allows me to use
#using (Html.BeginHorizontalForm()) {...
which is nice and elegant.
What about writing a custom helper method which calls the overload required, passing in 'form-horizontal'?
Then, you views would use #using (Html.BootstrapBeginForm()) {, leaving you views nice and tidy.
I've looked for this for a while and the solutions look like they should work, it appears I'm doing it wrong.
I created an area for administering the CMS side called "manage" so if you go to:
/Manage/Vinyard
it will give you a list of vinyards to manage using VinyardController built with the CRUD scaffold.
On the "front end" I have a browse controller and another VinyardController for viewing the details of a vinyard.
So someone goes to
/Browse/Vinyard
it gives them a list of Vinyards, they click on one (here's the problem) I want it to go to
/Vinyard/NameOfVinyard
The route that I have is:
routes.MapRoute(
"Vinyard",
"Vinyard/{Name}",
new { controller = "VinyardController", action = "Details", area="root"}
);
Which is above the default route. Details is the method that displays the Vinyard details.
the HTML.actionlink I'm using is:
#Html.ActionLink(item.Name, "Details", "vinyard" ,new { name = item.VinyardId, area="root" })
for some reason the a tag that's returned is: /Browse/Details?Length=7
On top of that when I try to browse to /vinyard/1 it gives me a 404.
Thanks for your help!
Update: If I browse to /vinyard/details/1 it works properly, except that I want it to eschew the /details/ part.
Use this overload
public static MvcHtmlString ActionLink(
this HtmlHelper htmlHelper,
string linkText,
string actionName,
string controllerName,
Object routeValues,
Object htmlAttributes
)
So change your code to
#Html.ActionLink(item.Name, "Details", "vinyard" ,
new { name = item.VinyardId, area="root" },null)
Fixed it. Working with Shyju's modified action link, but I also removed the area property and had to fix up the map routing for it to work right.
My global.ascx now looks like this:
routes.MapRoute(
"Vinyard",
"Vinyard/{id}",
new { controller = "Vinyard", action = "Details", id=UrlParameter.Optional},
new[] { "MyNameSpace.Controllers" }
);
The two problems were: my controller name needed to be "Vinyard" not "VinyardController" and I needed to add the name space here and in my area route registration since I was using the same class names in both areas.
I'd like to use the appropriate HTTP method when possible. In this case, when a button is clicked to delete something, I want to fire the controller action with the attribute [HttpDelete]. However, I can't seem to create a form with this method - using Razor syntax. The FormMethod enum does not have an option for Delete and doing the following doesn't override it:
#using (Html.BeginForm("Order", "Users", FormMethod.Post, new { method = "DELETE" }))
Searching for solutions yields none, is nobody doing this? I know I can just use POST but isn't this the point of the HTTP delete method to begin with?
You need this in your form:
#using (Html.BeginForm("Order", "Users"){
#Html.HttpMethodOverride(HttpVerbs.Delete)
}
I'm fairly new to MVC 3 and am using the Razor view engine. I'm using the Html.Hidden extension method to output input elements of type hidden. What I woudl also like to do is add a custom attribute to hold a dynamic value. I was under the impression in HTML5 wee could write custom html element attributes that are prefixed with 'data-'. I'm trying to do something like below;
#Html.Hidden("hdnID", mymodel.somevalue, new { data-uniqueid = mymodel.somevalue })
hoping to render;
<input type="hidden" value="mymodel.somevalue" data-uniqueid="mymodel.somevalue"/>
The htmlAttributes part (new { data-uniqueid = mymodel.somevalue }) is giving the error,
"Invalid anonymous type member declarator. Anonymous type members must be declared with a member assignment, simple name or member access".
Can I add user-defined attribute to html elements using the HtmlHelper classes?
Regards,
Use:
#Html.Hidden("hdnID", mymodel.somevalue, new { #data_uniqueid = mymodel.somevalue })
The underscore gets automatically converted to a dash.
Doh! I was being silly. You can't have '-' in the anon type declaration:
data-uniqueid = ...it must be
datauniqueid = ....
In that case, your best best is to write out the hidden input by hand:
<input type="hidden" value="#mymodel.somevalue" data-uniqueid="#mymodel.somevalue"/>
You can step around the member validation by constructing a dictionary object. As follows:
#Html.TextBoxFor(model => model.Phone, new Dictionary<string, object>
{
{
"data-call-results-target", "#search-results-area"
},
{
"data-action-path", "/Controler/Method"
}
})