Populating second DropDownList based on the selected value of first DropDownList in MVC2

Question

I had the same problem as shown in this question so I tried his solution, but I couldn't make it work, probably because of my tiny knowledge of jquery and javascript. When I debug it in Firebug, I saw that it breaks at line:

$.post('<%: ResolveUrl("~/Home/GetSubcategories/")%>' + $("#ddlCats > option:selected").attr("value"), function (data) {

I have a correct action, and it should accept $("#ddlCats > option:selected").attr("value") as parameter, but it never invoke that action, so it never returns JSON data, so it never populate second DDL. What am I doing wrong? Am I missing something?

Here is my model:

public class DdlModel
    {
        public long Id { get; set; }
        public string Name { get; set; }
    }

Here is controller:

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            List<DdlModel> cats = DB.Category.FindCategories();

            SelectList ddlCats = new SelectList(cats, "Id", "Name", cats[0].Name);
            ViewData["ddlCats"] = ddlCats;

            return View();
        }

        [HttpPost]
        public JsonResult GetSubcategories(long catId)
        {
            var subCat = DB.Subcategory.FindSubcategories(catId);    
            return Json(subCat);
        }
}

Here is my View:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            $('#ddlCats').change(function () {
                $.ajaxSetup({ cache: false });
                var selectedItem = $(this).val();
                if (selectedItem == "" || selectedItem == 0) {
                    //Do nothing or hide...?
                } else {
                    $.post('<%: ResolveUrl("~/Home/GetSubcategories/")%>' + $("#ddlCats > option:selected").attr("value"), function (data) {
                        var items = "";
                        $.each(data, function (i, data) {
                            items += "<option value='" + data.ID + "'>" + data.Name + "</option>";
                        });
                        $("#ddlsubCats").html(items);
                        $("#ddlsubCats").removeAttr('disabled');
                    });
                }
            });
        });
    </script>
    <div>
        <div>
            <h2>
                Choose category:
            </h2>
            <%:Html.DropDownList("ddlCats", (SelectList) ViewData["ddlCats"]) %>
        </div>
        <div>
            <h2>
                and subcategory:
            </h2>
            <select id="ddlsubCats" name="ddlsubCats" disabled="disabled">
            </select>
        </div>
    </div>
</asp:Content>

I'm using: jquery-1.5.1.min.js and jquery-ui-1.8.11.custom.min.js.

Many thanks for any advice.

Darin Dimitrov · Accepted Answer · 2011-04-20T13:57:12.370

1

Try like this:

// TODO: make sure that the selectedItem variable represents a valid integer
// as the GetSubcategories expects it as argument:
var selectedItem = $(this).val();

if (selectedItem == "" || selectedItem == 0) {
    //Do nothing or hide...?
} else {
    var url = '<%= Url.Action("GetSubcategories", "Home") %>';
    $.post(url, { catId: selectedItem }, function (data) {
        ...
    });
}

Note that the GetSubcategories expects a parameter called catId which must be a valid 64 bit integer.

edited Apr 20 '11 at 13:57

answered Apr 20 '11 at 13:49

Darin Dimitrov

1,023,142
271
3,287
2,928

I'm getting in Firebug `selectedItem= "3" url = "/Home/GetSubcategories" ` and then it goes on line `$.post(url, { catId: value }, function (data) {` and jump to line `});` Still doesn't go in Controller. – Slavisa Apr 20 '11 at 14:06
In `$.post(url, { catId: selectedItem }, function (data) {` selectedItem="3", but still not getting in controller. Maybe I need to include some other script? – Slavisa Apr 20 '11 at 14:18
1

@Slavisa, are you seeing the AJAX request in the Console tab in FireBug? – Darin Dimitrov Apr 20 '11 at 14:24
I'm new at this, so pardon my ignorance. All I see in Console tab is: 500 Internal Server Error 1.04s jquery....min.js (line 16) What does it mean? – Slavisa Apr 20 '11 at 14:33
1

@Slavisa, it means that there is an AJAX request being sent but the server sends an error. You can develop the response tab and look at the returned HTML. There will probably be a trace of the exception. – Darin Dimitrov Apr 20 '11 at 14:34
OMG, it is so stupid (or I am), that I feel embarrassed to share :(. "The current request for action 'GetSubcategories' on controller type 'HomeController' is ambiguous between the following action methods...", In my great wisdom, I made two action with same names, one of wich was used in this example. Thank you so much Darin for your help. I needed fresh perspective here. All the best. – Slavisa Apr 20 '11 at 14:40
1

@Slavisa, this means that you probably have 2 actions called `GetSubcategories` on your `HomeController` which are both accessible through POST requests which is not possible. Which are the exact action methods in the error message? – Darin Dimitrov Apr 20 '11 at 14:41
I changed the name of one method, and now it works. Thank you again. – Slavisa Apr 20 '11 at 14:46

Populating second DropDownList based on the selected value of first DropDownList in MVC2

1 Answers1