Question

I have a page that is rendered via an ActionResult called EntityIndex that takes int id as a parameter and loads that entity.

On this view a user can select from a dropdown other related entities and the view should reload by sending the selected ID from the dropdown to the same Action EntityIndex with the new ID.

I’m using a jQuery change event on the dropdown to navigate and reload the page:

$("#RelatedEntity").change(function () {
    window.location = '@Url.Action("EntityIndex", new {id = ""})' + '/' + $(this).val();
});

This is the Action

public ActionResult EntityIndex(int id) {
    ... gets entity by id here ...
    return View(model);
}

The action works fine when hit but the jQuery line above is failing with an error:

http://localhost:1798/Entity/EntityIndex/@Url.Action("EntityIndex", new {id = ""})/539

For some reason the window.location firing the @Url.Action is treating the action as a string and not an action to navigate to… what is wrong with the Url.Action that keeps it from behaving correctly?

Answer 1

Your JQuery is ever-so-slightly off. Using the default route and specifying no ID will generate:

/controller/action/

So all you need to do is put your value on the end. Try this:

$("#RelatedEntity").change(function () {
    window.location = '@Url.Action("EntityIndex")' + $(this).val();
});

Should give you (assuming value is 23):

/controller/action/23