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?

Darin Dimitrov · Accepted Answer · 2009-10-28 20:07:41Z

3

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>

edited Oct 28, 2009 at 20:07

answered Oct 28, 2009 at 20:00

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marek Over a year ago

Thanks Darin, Ajax.BeginForm was the concept I was looking for.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related