Question

我正在尝试使用下拉列表的更改事件来调用控制器中的ActionResult，以便填充另一个下拉列表。

这是我尝试过的jquery：

 $(function () {
        $('#CertificationId').change(function () {
            var data = {
                certificationId: $('#CertificationId').val()

            };

            var certificationId = $('#CertificationId').val();
//            $.post('@Url.Action("AjaxGetCourseOptions", "WorkerCertifications")', {certificationId : certificationId}, $(this).parents('form:first').serialize(), function (data) {
//                //$('#form').children().remove().append(data);
//            }, 'html');

//            var url = '@Url.Action("AjaxGetCourseOptions", "WorkerCertifications")';
//            var certificationId = $('#CertificationId').val();
//            $.post(url, { certificationId: certificationId }, function (result) {
//                alert('success');
//            });

//            $.getJSON('/WorkerCertifications/AjaxGetCourseOptions/SysAdmin/Worker/Certifications/14843/', data, function (result) {
//                alert(result.message);
//            });

            $.getJSON('@Url.Action("AjaxGetCourseOptions", "WorkerCertifications")', data, function (result) {
                alert(result.message);
            });

//            $.getJSON(this.href, data, function (result) {
//                alert(result.message);
//            });
            return false;
        });
    });

以下是Controller的代码：

public ActionResult AjaxGetCourseOptions( string certificationId )
    {
        var viewData = new WorkerCertificationViewModel
        {
            //CourseOptions = ScheduledCourse.GetActive().ToSelectList(x => x.Id, x => x.Id),
            CourseOptions = ScheduledCourse.GetAvailableCourses(Convert.ToInt64(certificationId)).ToSelectList(x => x.Id, x => x.Id)

        };

        viewModel.CourseOptions = viewData.CourseOptions;

        return Json( new {message = "Test"},
                     JsonRequestBehavior.AllowGet
            );
    }

我似乎无法获取jquery来调用Controller中的代码。有没有人有一个工作的例子，或者有人请告诉我如何实现这个目标？

非常感谢，

森

更新：仍有问题让这个工作。这是更改事件触发下拉列表http://mylocalhost.com/camms/WorkerCertifications/Insert/SysAdmin/Worker/Certifications/14843

之前页面的网址

更改事件触发后，我有一个硬编码（现在）我要发布的网址，但它会被附加到当前网址。知道如何解决这个问题吗？这是它尝试发布到的网址：http://mylocalhost.com/camms/WorkerCertifications/Insert/SysAdmin/Worker/Certifications/camms/WorkerCertifications/AjaxGetCourseOptions/SysAdmin/Worker/Certifications/14843/?certificationId=10916

网址应如下所示：http://mylocalhost.com/camms/WorkerCertifications/AjaxGetCourseOptions/SysAdmin/Worker/Certifications/14843/?certificationId=10916

我必须删除本地主机和端口才能保存此更新。

再次感谢你，

森

Answer 1

在我的应用程序中，我填充下拉列表，如下所示：

有两个下拉列表作业类别和作业。选择作业类别后，将填充作业列表

     function ListingJobs()
    {
        var job_ID = $( "#JobCatID" ).val();

        $.ajax( {
            url: '@Url.Action("GetJobs")',
            data: { JobCatID: job_ID },
            dataType: "json",
            type: "POST",
            error: function ()
            {
                alert( "An error occurred." );
            },
            success: function ( data )
            {

                var items = "";

                $.each( data, function ( i, item )
                {

                    items += "<option value=\"" + item.values + "\">" + item.texts  + "</option>";
                } );

                $( '#JobID' ).html( items );
            }
        } );
    }

    $( '#JobCatID' ).change( function ()
    {
        ListingJobs();
    } );

并且在您的控制器中，您必须将值，名称对转换为json

Answer 2

我通过以下方式完成了这项工作：

Jquery的：

$(function () {
    $('#CertificationId').change(function (evt) {
        var data = {
            certificationId: $('#CertificationId').val()

        };

        var certificationId = $('#CertificationId').val();
        $.ajax({
            //url: "/camms/WorkerCertifications/GetCourseOptions/SysAdmin/Worker/Certifications/14843",
            url: window.location.href.replace('Insert', 'GetCourseOptions'),
            type: 'POST',
            data: { certificationId: certificationId },
            success: function (courseOptions) {
                // courseOptions is your JSON array
                var $select = $('#CourseId');
                $select.children().remove();
                if (courseOptions.length > 0) {
                    var listItems = [];
                    for (var i = 0; i < courseOptions.length; i++) {
                        listItems.push('<option value="' +
                            courseOptions[i].Value + '">' + courseOptions[i].Text + '</option>');
                    }
                    $select.append(listItems.join(''));
                }

                //                    $.each(courseOptions, function (i, option) {
                //                        $('<option>', {
                //                            value: option.Id
                //                        }).html(option.Id).appendTo($select);
                //                    });
            }
        });

        return false;
    });
});

在控制器中：

[HttpPost]
    public JsonResult GetCourseOptions( string certificationId = "0")
    {
        var list = ScheduledCourse.GetAvailableCourses(Convert.ToInt64(certificationId)).ToSelectList(x => x.ScheduledCourseId, x => x.ScheduledCourseId);

        var result = new JsonResult();

        result.Data = list.ToList();

        return result;
    }

asp.net mvc 3如何在dropdownlist上使用jquery change事件来使用Controller中的ActionResult填充另一个下拉列表

2 个答案: