如何在控制器上使用ActionResult在dropdownlist上使用jQuery change事件填充另一个dropdownlist [英] How to use jQuery change event on dropdownlist to populate another dropdownlist using an ActionResult in the Controller
问题描述
我正在尝试使用下拉列表的change事件在控制器中调用ActionResult以便填充另一个下拉列表.
I am trying to use the change event of a dropdown to call an ActionResult in my controller in order to populate another dropdown.
这是我尝试过的jQuery:
Here is the jQuery that I've tried:
$(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;
});
});
这是控制器中的代码:
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中的代码.我该怎么做?
I can't seem to get the jQuery to call the code in the Controller. How can I accomplish this?
我仍然无法解决此问题.这是更改事件触发下拉菜单之前页面的URL, http ://mylocalhost.com/camms/WorkerCertifications/Insert/SysAdmin/Worker/Certifications/14843
I am still having an issue getting this to work. This is the url of the page before the change event fires for the dropdown http://mylocalhost.com/camms/WorkerCertifications/Insert/SysAdmin/Worker/Certifications/14843
在change事件触发后,我有一个硬编码的(现在)URL,我想发布到该URL,但是它被追加到当前URL后面.任何想法如何解决这个问题?这是它尝试发布到的URL:
After the change event fires, I have a hard coded (for now) url that I want to post to but it's getting appended to the current url. Any idea how to fix this? This is the url that it is trying to post to: http://mylocalhost.com/camms/WorkerCertifications/Insert/SysAdmin/Worker/Certifications/camms/WorkerCertifications/AjaxGetCourseOptions/SysAdmin/Worker/Certifications/14843/?certificationId=10916
我必须删除本地主机和端口才能保存此更新.
I had to remove the local host and port in order to save this update.
推荐答案
我是通过以下方式实现的:
I accomplished this by the following:
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;
}
这篇关于如何在控制器上使用ActionResult在dropdownlist上使用jQuery change事件填充另一个dropdownlist的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!