ASP.NET MVC 3 DropDownList selectedindexchanged

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?

Samich · Accepted Answer · 2011-10-31 14:07:44Z

8

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);
  });
});

edited Oct 31, 2011 at 14:07

answered Oct 31, 2011 at 10:46

Samich

30.4k6 gold badges70 silver badges80 bronze badges

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

3 Comments

epzee Over a year ago

I think it would be better to use the Url.Action helper instead of harcoding the url in the queryLink var

Samich Over a year ago

Yep, sure. It's just a quick example. I've updated the sample.

alice7 Over a year ago

I have a same thing, but my controller actionresult is not refreshing the view. Do you know why?

user1006544 · Accepted Answer · 2011-10-31 13:26:40Z

1

you need to fire ajax call using jquery in click event of dropdown. First chek on click event of dropdown if the value changes then call a jquery ajax call I am pasting the code of jquery .

 $.get("/Wk/Revision/@hTitle/@pageID/?langID=2", function (data) {
                    $("div#dAjaxContent").html(data);
                    $("div#dShow").css("visibility", "visible");
                    $("#dShow").dialog();
                });

// this is for ajax call . the dropdown check do it yourself. "/Wk/Revision/@hTitle/@pageID/?langID=2" this will call the controller method revision . and next i think you will do.

answered Oct 31, 2011 at 13:26

user1006544

1,5242 gold badges16 silver badges26 bronze badges

Comments

Brian Mains · Accepted Answer · 2011-10-31 16:00:46Z

0

I'd recommend doing a post request; you can build one using this:

http://iridescence.no/post/Invoking-ASPNET-MVC-Actions-from-JavaScript-using-jQuery.aspx

You could make an AJAX get request, or if you want to redirect away, you can change the JavaScript's window.location to point to the action you want, as in:

window.location = "/MyController/Index";

answered Oct 31, 2011 at 16:00

Brian Mains

50.8k35 gold badges155 silver badges260 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC 3 DropDownList selectedindexchanged

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related