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

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

问题分析

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

解决方案

正确的做法是利用 Url.Action 辅助方法在 <option> 标签中生成完整的 URL，然后使用 JavaScript 监听 <select> 元素的 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，并将其设置为 <option> 标签的 value 属性。

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

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

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

使用 JavaScript 代码监听 <select> 元素的 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 的 <select> 元素的 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 中监听 <select> 元素的 change 事件，我们可以有效地将选定的参数传递给控制器。这种方法避免了直接在 <option> 标签中使用 Html.ActionLink 可能导致的问题，并提供了一种清晰、简洁的方式来实现动态参数传递。

注意事项：

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

以上就是使用 Action Link 在 Option 标签中向控制器传递参数的正确方法的详细内容，更多请关注php中文网其它相关文章！