MVC + T4MVC - How to pass a url action to form? Or an alternative method to generate action/id?

Question

I'm looping through a model and iterating through data. I want to add a button on each item that generates an action/id.

As I cannot add a url to a button , I've decided to use a form with the following:

<form action="@Url.Action("ItemDetail", new { itemId = @quote.Item.ItemID})">
    <button class="btn-bg btn-sm btn-inverse btn-fix-width" type="submit">
        <i class="fa fa-th-list fa-fw pull-right"></i>View RFQ
    </button>
</form>

I opted for a button instead of input type to inset font-awesome icons.

However, I get /Quote/ItemDetail? as opposed to /Quote/ItemDetail?itemId=123

I'm using T4MVC

Controller:

public virtual ActionResult ItemDetail(int ItemID)
{
    return View();
}

RouteConfig:

routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

try to use @Url.Action("ACTION", "CONTROLLER", new { itemId = @quote.Item.ItemID}) or @Url.Action("ACTION", "CONTROLLER", null, new { itemId = @quote.Item.ItemID}) — Zaphod, Jan 09 '15 at 12:49

danludwig · Accepted Answer · 2015-01-09T15:12:26.117

4

With T4MVC, something like this should work:

<form action="@Url.Action(MVC.Quote.ItemDetail(quote.Item.ItemID))">

...Note that this is assuming the ItemDetail action is on your QuoteController. If the controller name is different, change Quote to whatever the name of your controller is.

You could also go more with @Zaphod's comment and do something like this:

<form action="@Url.Action(MVC.Quote.ActionNames.ItemDetail, MVC.Quote.Name,
    new { itemId = @quote.Item.ItemID})">

...at least here T4MVC gets rid of your magic strings, even if you are still using MVC's out of the box Url.Action overload.

You should also name your action method arguments using camelCase, not PascalCase:

public virtual ActionResult ItemDetail(int itemId) // instead of ItemID
{
    return View();
}

...though I don't think that should cause any issues.

Update

Try this maybe?

<form method="GET" action="@Url.Action(MVC.Quote.ItemDetail(quote.Item.ItemID))">

or this:

<form method="GET" action="@Url.Action(MVC.Quote.ActionNames.ItemDetail, MVC.Quote.Name)">
    <input type="hidden" name="itemId" value="@quote.Item.ItemID" />
    <button class="btn-bg btn-sm btn-inverse btn-fix-width" type="submit">
        <i class="fa fa-th-list fa-fw pull-right"></i>View RFQ
    </button>
</form>

Another update:

You should also be able to do this instead, and then use CSS to make your link look like a button:

<a href="@Url.Action(MVC.Quote.ItemDetail(quote.Item.ItemID))">
    <i class="fa fa-th-list fa-fw pull-right"></i>View RFQ
</a>

IMHO, this is what you really should do, since you're only sending one parameter.

edited Jan 09 '15 at 15:12

answered Jan 09 '15 at 13:12

danludwig

46,965
25
159
237

Hey thanks, although I'm still getting the same result. – DarkShadowAY Jan 09 '15 at 14:08
EDIT: It does work when I check inside chrome's developer tools! However, when I click the button, I get: Quote/ItemDetail? in the url bar – DarkShadowAY Jan 09 '15 at 14:14
@DarkShadowAY - so MVC is rendering the correct href attribute, but when you click it, the querystring parameter is being stripped from the URL? I'm not sure what you mean by "it works in chrome dev tools". If this is the case, check fiddler to see what is going on with the requests (maybe MVC is redirecting it for some reason). – danludwig Jan 09 '15 at 14:21
Yes, when I go to inspect the form action using web developer, it generates: /Quote/ItemDetail?itemId=4084. However, when I click on the button, I get: http://locahost:3435/Quote/ItemDetail? - It doesn't seem to be picking up the action – DarkShadowAY Jan 09 '15 at 14:23
@DarkShadowAY your routes look good. Use Fiddler to inspect the HTTP requests and responses that take place after you click on the link. When you hover over the link, I assume you see the correct URL in the bottom of the page? If so, something else is going on when the server receives the request. Fiddler should help you figure it out. – danludwig Jan 09 '15 at 14:30
When I hover over the form, nothing appears. The path is /Quote/ItemDetail?itemId=4084 instead of localhost/Quote/ItemDetail?itemId=4084 thanks – DarkShadowAY Jan 09 '15 at 14:37
I added
which gives the full url http://localhost/Quote/ItemDetail?itemId=4084 but click changes it. So odd. I'm marking as resolved as you answered my initial question but would appreciate further help. Cheers. I've also tried fidder, pretty much the same info it directs to http://localhost/Quote/ItemDetail?
– DarkShadowAY Jan 09 '15 at 14:51
@DarkShadowAY like I said twice before, download Fiddler and use it to inspect the raw HTTP traffic. – danludwig Jan 09 '15 at 14:52
Edited prev comment - I've tried fiddler and it's GET request is http://localhost/Quote/ItemDetail? – DarkShadowAY Jan 09 '15 at 14:55
@DarkShadowAY that is messed up. Are you sure that is the **only** request that comes after you click the link? And do you see the same behavior in Firefox and Internet Explorer? – danludwig Jan 09 '15 at 14:57
I have indeed. It's certainly got something to do with the way the form is handled. I just put the same into a url href and it worked perfectly! – DarkShadowAY Jan 09 '15 at 15:02
@DarkShadowAY I updated my answer. See if adding a `method="get"` attribute to your form element helps. – danludwig Jan 09 '15 at 15:06
I completely missed that. It was post, thank you for your help! :) – DarkShadowAY Jan 09 '15 at 15:12
@DarkShadowAY good you had me going crazy. GET is the default method, so when you omit it, it should do GET by default. http://stackoverflow.com/a/2314441/304832 In the future, post all of the relevant code. – danludwig Jan 09 '15 at 15:14

MVC + T4MVC - How to pass a url action to form? Or an alternative method to generate action/id?

1 Answers1