ASP.NET MVC Ajax: How to pass argument values to Ajax action from a select?

Question

I would like to have filtering page that performs ajax requests to asynchronously update list of results.

There are two comboboxes with option values and one Ajax.ActionLink. The list is rendered as a partial view inside a div.

I know how to implement the controller part and also the interaction logic. What I am missing is how to pass arguments in the Ajax.ActionLink call.

When user clicks on the link, I would like to update the list rendered as "SubList" partial view.

    <%= Html.DropDownList("branches", Model.Branches) %>
    <%= Html.DropDownList("regions", Model.Regions) %>
    <%= Ajax.ActionLink("Filter", "SubList", 
        new {branchID = ??, regionID = ??}, 
        new AjaxOptions() { UpdateTargetId = "theList"} ) %>
    <div id="theList">
        <% Html.RenderPartial("SubList", Model.List); %>
    </div>

The Controller action that pulls data for the partial view:

public ActionResult SubList(int branchId, int regionId)
{
 if (this.Request.IsAjaxRequest())
 {
  List<Company> filtered = this.repository.QueryCompanies().Where(c => c.BranchID == branchId && c.RegionID == regionId).ToList();
  return PartialView("SubList", filtered);
 }
 return null;
}

How can I pass the branchID and regionID arguments (selected values in the two dropdownlists on the page) to the controller action SubList?

Answer 1

This should be done in javascript or using a form instead of anchor. There's nothing you could put in the place of your ?? to make it work. You cannot set these values server side because they might be changed on the client side. So basically you need to hook up at the onchange event of your two selects and update your link url with the new values or just use a form.

Something among the lines:

<% using (Ajax.BeginForm("SubList", new AjaxOptions() { 
    UpdateTargetId = "theList" 
})) { %>
    <%= Html.DropDownList("branchId", Model.Branches) %>
    <%= Html.DropDownList("regionId", Model.Regions) %>
    <input type="submit" value="Filter" />
<% } %>

<div id="theList">
    <% Html.RenderPartial("SubList", Model.List); %>
</div>