Question

I have a piece of functionality that allows users to filter records based on their own status codes. In the menu, I have a custom filters section:

<h3>Custom Filters</h3>
 <br />
   <ul id="ui-ajax-tabs">
      @{ Html.RenderAction("GetGroups", "Manage");}
    </ul>

And my partial view looks like this:

@model IEnumerable<AllEngage.Model.Group>

@using AllEngage.Web.Helpers

@foreach (var group in Model)
{
    <li>
        <label for="@group.GroupName">@group.GroupName</label>
        @Html.DropDownList("GroupItems", group.GroupItems.ToSelectListItems())
    </li>
}

When an item is selected from a dropdownlist, I want an action method to fire in my controller:

[HttpGet]
public ActionResult Index(int page = 1, int groupFilterId = -1)

What would be the best way to go? Fire using json or perform a post back somehow?

Answer 1

You need to pass you param to action. The fastes way to do this – pass via query string with the same name as param in action:

http://mysite/GetGroups?groupFilterId=2

To refresh it you need to send ajax request with param whitch will be fired onchange of the dropdown control. Specify some ID for your filter control:

@Html.DropDownList("GroupItems", group.GroupItems.ToSelectListItems(), new {@id="ddlFilter"})

and then using jQuery make a GET request of your data:

$('#ddlFilter').change(function() {
  var queryLink = '@Url.Action("GetGroups")';
  if ($(this).val() != '') {
      queryLink += '?groupFilterId=2';
  }

  $.get(queryLink, function(data) {
      $('#ui-ajax-tabs').html(data);
  });
});