Заполнение второго DropDownList на основе выбранного значения первого DropDownList в MVC2

Question

У меня была та же проблема, что и , показанная в этом вопросе , поэтому я попробовал его решение , но я не смог заставить его работать, возможно, из-за моих крошечных знаний jquery и javascript , Когда я отладил его в Firebug, я увидел, что он ломается в строке:

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

У меня правильное действие, и оно должно принимать $("#ddlCats > option:selected").attr("value") в качестве параметра, но оно никогда не вызывает это действие, поэтому никогда не возвращает данные JSON, поэтому никогда не заполняет второй DDL. Что я делаю неправильно? Я что-то упустил?

Вот моя модель:

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

Вот контроллер:

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

Вот мой взгляд:

<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>

Я использую: jquery-1.5.1.min.js и jquery-ui-1.8.11.custom.min.js.

Большое спасибо за любые советы.

Answer 1

Попробуйте так:

// 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) {
        ...
    });
}

Обратите внимание, что GetSubcategories ожидает параметр с именем catId, который должен быть действительным 64-разрядным целым числом.