使用 Dropdownlist 替换 ActionLink 实现页面跳转

本文介绍如何在 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 的功能。

实现原理

实现的核心在于：

1. 生成包含 URL 的 Dropdownlist： 将每个选项的 URL 地址作为 value 属性，Dropdownlist 的 Text 属性则显示友好的选项文本。
2. 监听 Dropdownlist 的 change 事件： 当用户选择不同的选项时，触发 change 事件。
3. 获取选中的 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 的功能。 这种方法不仅提高了用户体验，而且代码结构更加清晰。 可以根据实际情况进行修改和扩展，以满足不同的需求。