Question

我遇到与shown in this question相同的问题，所以我尝试了他的solution，但我无法使其工作，可能是因为我对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位整数。

根据MVC2中第一个DropDownList的选定值填充第二个DropDownList

1 个答案: