本文介绍如何在 ASP.NET MVC 中使用 Dropdownlist 控件替换原有的 ActionLink，实现选择下拉列表中的选项后跳转到指定 Controller Action 的功能。通过 JavaScript 监听 Dropdownlist 的 change 事件，获取选中的 URL，并使用 window.location.href 实现页面重定向。同时，详细讲解了如何在 Razor 视图中生成 Dropdownlist 控件，并动态生成 SelectListItem 选项。
在 ASP.NET MVC 开发中，经常需要根据用户选择跳转到不同的页面。传统的做法是使用 Html.ActionLink，但有时使用下拉列表（Dropdownlist）更符合用户体验。本文将详细介绍如何使用 Dropdownlist 替换 ActionLink，实现选择下拉列表中的选项后跳转到指定 Controller Action 的功能。
实现原理
实现的核心在于：
- 生成包含 URL 的 Dropdownlist： 将每个选项的 URL 地址作为 value 属性，Dropdownlist 的 Text 属性则显示友好的选项文本。
- 监听 Dropdownlist 的 change 事件： 当用户选择不同的选项时，触发 change 事件。
- 获取选中的 URL 并重定向： 在 change 事件处理函数中，获取选中的选项的 value 值（即 URL），然后使用 window.location.href 实现页面重定向。
具体实现步骤
1. Razor 视图代码
<script type="text/javascript">
$('#subsec').change(function () {
var url = $(this).val();
if (url != null && url != '') {
window.location.href = url;
}
});
</script>
@Html.DropDownListFor(m => Model.GetEnumerator().Current,
Model.Select(d =>
{
return new SelectListItem() {
Text = d.Text,
Value = Url.Action("Your_Action_Name", "Your_Controller_Name", new { subSectionID = d.Value, subsectionName = d.Text })
};
}),
"-Select a value-",
new { id = "subsec" })代码解释：
-
JavaScript 代码块：
- $('#subsec').change(function () { ... }); 使用 jQuery 监听 ID 为 subsec 的 Dropdownlist 的 change 事件。
- var url = $(this).val(); 获取当前选中的选项的 value 值，即 URL。
- if (url != null && url != '') { window.location.href = url; } 判断 URL 是否为空，如果不为空，则使用 window.location.href 重定向到该 URL。
-
Html.DropDownListFor 代码块：
- Html.DropDownListFor(m => Model.GetEnumerator().Current, ...) 生成 Dropdownlist 控件。
- Model.Select(d => { ... }) 使用 LINQ 的 Select 方法将 Model 中的数据转换为 SelectListItem 列表。
- return new SelectListItem() { Text = d.Text, Value = Url.Action("Your_Action_Name", "Your_Controller_Name", new { subSectionID = d.Value, subsectionName = d.Text }) }; 创建 SelectListItem 对象，Text 属性设置为选项的显示文本，Value 属性设置为 Controller Action 的 URL。 Url.Action 方法用于生成 URL，需要指定 Controller 名称、Action 名称以及路由参数。
- "-Select a value-" 设置 Dropdownlist 的默认选项文本。
- new { id = "subsec" } 设置 Dropdownlist 的 ID 为 subsec，以便 JavaScript 代码可以找到该控件。
2. Controller 代码
Controller 代码主要负责将数据传递到 View，并处理用户选择后的请求。
public class YourControllerNameController : Controller
{
public ActionResult Index()
{
// 假设 Model 是一个包含 Text 和 Value 属性的 List
List<YourModel> Model = new List<YourModel>()
{
new YourModel { Text = "Option 1", Value = "1" },
new YourModel { Text = "Option 2", Value = "2" },
new YourModel { Text = "Option 3", Value = "3" }
};
return View(Model);
}
public ActionResult Your_Action_Name(string subSectionID, string subsectionName)
{
// 处理用户选择后的逻辑
ViewBag.SubSectionID = subSectionID;
ViewBag.SubSectionName = subsectionName;
return View(); // 返回相应的 View
}
}
public class YourModel
{
public string Text { get; set; }
public string Value { get; set; }
}代码解释：
- Index Action 用于加载包含选项数据的 Model 并传递给 View。
- Your_Action_Name Action 用于处理用户选择后的请求，并接收 subSectionID 和 subsectionName 作为参数。 可以根据实际情况修改参数名称和类型。
3. 注意事项
- 确保已经引入 jQuery 库。
- 替换代码中的 "Your_Action_Name" 和 "Your_Controller_Name" 为实际的 Controller 和 Action 名称。
- 根据实际情况修改路由参数。
- 确保 Model 中包含 Text 和 Value 属性，并且 Value 属性可以唯一标识一个选项。
总结
通过以上步骤，我们成功地使用 Dropdownlist 替换了 ActionLink，实现了选择下拉列表中的选项后跳转到指定 Controller Action 的功能。 这种方法不仅提高了用户体验，而且代码结构更加清晰。 可以根据实际情况进行修改和扩展，以满足不同的需求。
