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

我试图使用下拉列表的更改事件来调用我的控制器中的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中的代码。 有没有人有一个工作的例子或有人请告诉我如何实现这一目标？

提前谢谢了，

弥敦道

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

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

url应如下所示： 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 += "" + item.texts + ""; } ); $( '#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('' + courseOptions[i].Text + ''); } $select.append(listItems.join('')); } // $.each(courseOptions, function (i, 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; }