使用Ajax填充级联下拉列表

时间:2013-10-04 15:19:50

标签: jquery ajax vb.net drop-down-menu asp.net-mvc-2

我目前正致力于使用ajax和jquery更改下拉列表的内容,并从数据库填充。使用jquery,我可以清除并添加下拉就好了。我的问题出现在尝试按下控制器以访问数据库以获取填充第二次下拉所需的信息时。

我该如何使这项工作?为了找到答案,我花了三天时间阅读其他SO问题,这是我到目前为止的jquery代码:

$('#Vehicle_KovId_value').change(function () {
        var kovID = $(this).val();
        if (kovID != null && kovID != '') {
            $('#Vehicle_BodyStyle_value').get(0).options.length = 0;
            $('#Vehicle_BodyStyle_value').get(0).options[0] = new Option('Please Select One', '-1');
            $.ajax({
                type: "POST",
                url: "AjaxController/Index",
                async: true,
                data: "{KovID:" + kovID + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    $('#Vehicle_BodyStyle_value').get(0).options.length = 0;
                    $('#Vehicle_BodyStyle_value').get(0).options[0] = new Option("Please Select One", "-1");
                    alert("Worked!");
                    $.each(msg.d, function (index, item) {
                        $('#Vehicle_BodyStyle_value').get(0).options[$('#Vehicle_BodyStyle_value').get(0).options.length] = new Option(item.Display, item.Value);
                    });
                },
                error: function () {
                    $('#Vehicle_BodyStyle_value').get(0).options.length = 0;
                    alert("Failed to load styles");
                }
            });
        }
    });

我在上面的代码中尝试了一些不同的网址设置,例如:

url: "@Url.Action('AjaxController', 'Index')",
url: "/AjaxController/Index",
url: "/Controllers/AjaxController/Index",
url: "Controllers/AjaxController/Index"

作为参考,虽然我们还没有真正对控制器做过任何事情,但这里是控制器的代码:

Namespace NoticeOfSale
    Public Class AjaxController
        Inherits System.Web.Mvc.Controller

        '
        ' GET: /Ajax

        Function Index() As ActionResult
            Return View()
        End Function

    End Class
End Namespace

我不确定我是否只是使用了错误的语法,或者我是否在为MVC的更高版本找到语法,因为我使用的是MVC 2.

1 个答案:

答案 0 :(得分:2)

这里的问题出在电话会议上。

$.ajax({
                type: "POST",
                url: "AjaxController/Index",
                async: true,
                data: "{KovID:" + kovID + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",

类型和网址都不正确。我应该是:

$.ajax({
            type: "GET",
            url: '/Ajax/Index',
            async: false,
            data: { KovID: kovID },
            contentType: "application/json; charset=utf-8",
            dataType: "json",