使用 Action Link 在 Option 标签中向控制器传递参数的正确方法

本文档旨在解决在使用 html select 标签的 Option 标签中，如何正确地使用 Action Link 向控制器传递参数的问题。通过使用 Url.Action 辅助方法生成 URL，并在 JavaScript 中监听 select 元素的 change 事件，我们可以动态地将选定的参数传递给控制器，实现页面跳转或数据更新。

问题分析

直接在 标签中使用 Html.ActionLink 并将其结果作为 data-url 属性值，然后尝试在表单提交时传递参数，这种方法通常无法正常工作。这是因为表单本身可能缺少路由所需的额外参数（例如 subSectionID 和 subsectionName）。因此，控制器中的 Update 操作方法可能会接收到 NULL 值的参数。

解决方案

正确的做法是利用 Url.Action 辅助方法在 标签中生成完整的 URL，然后使用 JavaScript 监听 元素的 change 事件，动态地修改页面 URL，从而将参数传递给控制器。

步骤 1：使用 Url.Action 生成 URL

在 foreach 循环中，使用 Url.Action 辅助方法来构建带有参数的 URL。Url.Action 方法会根据指定的动作名称和路由值生成一个完整的 URL。

<select id="sectionId"         name="sectionId"         class="selectpicker"         title="Section"         data-width="100%"         data-live-search="true">      @foreach (var item in Model)     {         <option value="@Url.Action("UpdateBoard", new { subSectionID = item.Value, subsectionName = item.Text })">@item.Text</option>     } </select>

在上述代码中，Url.Action(“UpdateBoard”, new { subSectionID = item.Value, subsectionName = item.Text }) 会生成类似于 “/UpdateBoard?subSectionID=27&subsectionName=Something” 的 URL，并将其设置为 标签的 value 属性。

注意： 这里使用 Url.Action 而不是 Html.ActionLink。Html.ActionLink 生成的是一个完整的 标签，而我们只需要 URL 本身。

步骤 2：使用 JavaScript 监听 change 事件

使用 JavaScript 代码监听 元素的 change 事件。当用户选择不同的选项时，JavaScript 代码会获取所选选项的 value 属性值（即生成的 URL），并将其用于重定向页面。

<script type="text/javascript">     $(document).ready(function () {         $('#sectionId').change(function () {             var url = $(this).val();             if (url != null && url != '') {                 window.location.href = url;             }         });     }); </script>

这段 JavaScript 代码首先使用 $(document).ready() 确保在 dom 加载完成后执行。然后，它使用 $(‘#sectionId’).change() 监听 id 为 sectionId 的 元素的 change 事件。当事件触发时，它获取选定选项的 value 属性值，并使用 window.location.href 将页面重定向到该 URL。

完整示例

将上述两部分代码结合起来，可以得到一个完整的示例：

<select id="sectionId"         name="sectionId"         class="selectpicker"         title="Section"         data-width="100%"         data-live-search="true">      @foreach (var item in Model)     {         <option value="@Url.Action("UpdateBoard", new { subSectionID = item.Value, subsectionName = item.Text })">@item.Text</option>     } </select>  <script type="text/javascript">     $(document).ready(function () {         $('#sectionId').change(function () {             var url = $(this).val();             if (url != null && url != '') {                 window.location.href = url;             }         });     }); </script>

总结

通过使用 Url.Action 辅助方法生成带有参数的 URL，并在 JavaScript 中监听 元素的 change 事件，我们可以有效地将选定的参数传递给控制器。这种方法避免了直接在 标签中使用 Html.ActionLink 可能导致的问题，并提供了一种清晰、简洁的方式来实现动态参数传递。

注意事项：

• 确保控制器中的 UpdateBoard 操作方法能够正确接收 subSectionID 和 subsectionName 参数。
• 根据实际情况修改 Url.Action 方法中的动作名称和路由值。
• 可以使用其他 JavaScript 库或框架来实现类似的功能，例如 vue.JS 或 React。
• 确保在页面中引入 jquery 库，因为示例代码使用了 jQuery 的 $(document).ready() 和 $(‘#sectionId’).change() 方法。如果未使用 jQuery，需要使用原生 JavaScript 代码实现类似的功能。