在选择更改事件 - Html.DropDownListFor [英] on select change event - Html.DropDownListFor
问题描述
我有两个下拉列表.从第一个选择的值加载另一个.如果控制器中有辅助方法,我该怎么做?
@using (Html.BeginForm()){<div><table width="100%" cellpadding="0" cellspacing="0"><tr><td><b>选择一个地区:</b></td><td>@Html.DropDownListFor(m => m.DistrictId, ViewData["DMManagers"] as IEnumerable<SelectListItem>, "Select One")</td></tr><tr><td><b>选择一个 TM:</b></td><td>@Html.DropDownListFor(m => m.TMId, ViewData["TMManagers"] as IEnumerable<SelectListItem>, "Select One")</td></tr>
}私有无效 LoadDistrictManagers(){var _DMS =(来自 SessionHandler.CurrentContext.ChannelGroups 中的 c在 c.ChannelGroupTypeId 上的 SessionHandler.CurrentContext.ChannelGroupTypes 中加入 cgt 等于 cgt.ChannelGroupTypeId其中 cgt.Name == "区域经理"选择新的 { c.ChannelGroupId, c.Name }).OrderBy(m => m.Name);ViewData["DMManagers"] = new SelectList(_DMS, "ChannelGroupId", "Name");}private void LoadTerritoryManagers(int DistrictId){var _TMS =(来自 SessionHandler.CurrentContext.ChannelGroups 中的 c在 c.ChannelGroupTypeId 上的 SessionHandler.CurrentContext.ChannelGroupTypes 中加入 cgt 等于 cgt.ChannelGroupTypeId其中 cgt.Name == "Territory" &&c.ParentChannelGroupId == DistrictId选择新的 { c.ChannelGroupId, c.Name }).OrderBy(m => m.Name);ViewData["TMManagers"] = new SelectList(_TMS, "ChannelGroupId", "Name");}公共操作结果摘要报告(){DistrictManagerModel 模型 = new DistrictManagerModel();LoadDistrictManagers();返回视图(区域管理器",模型);}
使用 HTTPAttributes 字段为两个下拉菜单提供唯一 ID:
@Html.DropDownListFor(m => m.DistrictId, ViewData["DMManagers"] as IEnumerable, "Select One", new {@id="ddlDMManagers"})
第二个下拉列表应初始化为空列表:
@Html.DropDownListFor(m => m.TMId, Enumerable.Empty(), new {@id="ddlTMManagers"})
如果您不介意在第一个下拉列表上触发更改"事件时使用 jQuery ajax 更新第二个下拉列表:
$(function() {$('select#ddlDMManagers').change(function() {var DistrictId = $(this).val();$.ajax({url: 'LoadTerritoryManagers',类型:'POST',数据:JSON.stringify({ DistrictId: DistrictId }),数据类型:'json',内容类型:'应用程序/json',成功:功能(数据){$.each(data, function (key, TMManagers) {$('select#ddlTMManagers').append('');//遍历 TM Managers 并填充下拉列表$.each(TMManagers, function(index, manager) {$('select#ddlTMManagers').append('
将此类添加到您的控制器命名空间:
公共类TMManager{公共 int Id {get;放;}公共字符串名称{get;放;}}
您需要更新控制器操作 LoadTerritoryManagers(),以响应 ajax 请求并返回 {Id,Name} 对象的 JSON 数组.
[HttpPost]公共 ActionResult LoadTerritoryManagers(int DistrictId){var _TMS =(来自 SessionHandler.CurrentContext.ChannelGroups 中的 c在 c.ChannelGroupTypeId 上的 SessionHandler.CurrentContext.ChannelGroupTypes 中加入 cgt 等于 cgt.ChannelGroupTypeId其中 cgt.Name == "Territory" &&c.ParentChannelGroupId == DistrictId选择新的 TMManager(){ Id = c.ChannelGroupId, Name = c.Name }).OrderBy(m => m.Name);如果(_TMS == null)返回 Json(null);列表<TMManager>manager = (List)_TMS.ToList();返回 Json(经理);}
I have two dropdownlist. The selected value from the first one loads the other. How do I do that when I have the helper methods in a controller?
@using (Html.BeginForm())
{
<div>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><b>Select a District:</b></td>
<td>@Html.DropDownListFor(m => m.DistrictId, ViewData["DMManagers"] as IEnumerable<SelectListItem>, "Select One")</td>
</tr>
<tr>
<td><b>Select a TM:</b></td>
<td>@Html.DropDownListFor(m => m.TMId, ViewData["TMManagers"] as IEnumerable<SelectListItem>, "Select One")</td>
</tr>
</table>
</div>
}
private void LoadDistrictManagers()
{
var _DMS = (from c in SessionHandler.CurrentContext.ChannelGroups
join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId
where cgt.Name == "District Manager"
select new { c.ChannelGroupId, c.Name }).OrderBy(m => m.Name);
ViewData["DMManagers"] = new SelectList(_DMS, "ChannelGroupId", "Name");
}
private void LoadTerritoryManagers(int districtId)
{
var _TMS = (from c in SessionHandler.CurrentContext.ChannelGroups
join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId
where cgt.Name == "Territory" && c.ParentChannelGroupId == districtId
select new { c.ChannelGroupId, c.Name }).OrderBy(m => m.Name);
ViewData["TMManagers"] = new SelectList(_TMS, "ChannelGroupId", "Name");
}
public ActionResult SummaryReport()
{
DistrictManagerModel model = new DistrictManagerModel();
LoadDistrictManagers();
return View("AreaManager", model);
}
Give both dropdowns unique IDs using the HTTPAttributes field:
@Html.DropDownListFor(m => m.DistrictId, ViewData["DMManagers"] as IEnumerable<SelectListItem>, "Select One", new {@id="ddlDMManagers"})
2nd dropdown should be initialized as an empty list:
@Html.DropDownListFor(m => m.TMId, Enumerable.Empty<SelectListItem>(), new {@id="ddlTMManagers"})
If you don't mind using jQuery ajax to update the 2nd dropdown when a 'change' event is triggered on the 1st dropdown:
$(function() {
$('select#ddlDMManagers').change(function() {
var districtId = $(this).val();
$.ajax({
url: 'LoadTerritoryManagers',
type: 'POST',
data: JSON.stringify({ districtId: districtId }),
dataType: 'json',
contentType: 'application/json',
success: function (data) {
$.each(data, function (key, TMManagers) {
$('select#ddlTMManagers').append('<option value="0">Select One</option>');
// loop through the TM Managers and fill the dropdown
$.each(TMManagers, function(index, manager) {
$('select#ddlTMManagers').append(
'<option value="' + manager.Id + '">'
+ manager.Name +
'</option>');
});
});
}
});
});
});
Add this class to your controller namespace:
public class TMManager
{
public int Id {get; set;}
public string Name {get; set;}
}
You will need to update your controller action, LoadTerritoryManagers(), to respond to the ajax request and return a JSON array of {Id,Name} objects.
[HttpPost]
public ActionResult LoadTerritoryManagers(int districtId)
{
var _TMS = (from c in SessionHandler.CurrentContext.ChannelGroups
join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId
where cgt.Name == "Territory" && c.ParentChannelGroupId == districtId
select new TMManager(){ Id = c.ChannelGroupId, Name = c.Name }).OrderBy(m => m.Name);
if (_TMS == null)
return Json(null);
List<TMManager> managers = (List<TMManager>)_TMS.ToList();
return Json(managers);
}
这篇关于在选择更改事件 - Html.DropDownListFor的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!