如何将ASP.NET MVC Razor中TextBox的searchid值传递给ActionLink

@Html.ActionLink属于服务端Razor语法，页面渲染完成时就已经固定了生成的<a>标签href属性值，用户在前端文本框输入的内容是客户端动态值，无法直接通过服务端代码传递，必须通过前端脚本动态修改链接地址，或者改用表单提交实现。

方案1：原生JavaScript动态修改链接（无依赖） #

第一步修改Razor视图代码，给ActionLink添加唯一ID，同时用占位符占住id参数的位置：

<p>@Html.TextBox("searchid")</p>
<!-- 给a标签加id为editLink，id参数用占位符__searchid__代替 -->
<p>@Html.ActionLink("Edit", "Edit", new { id = "__searchid__" }, new { @class = "btn btn-primary btn-large", @id = "editLink" })</p>

第二步在视图底部添加JavaScript代码，监听文本框输入事件，动态替换链接中的占位符：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchid');
    const editLink = document.getElementById('editLink');
    // 缓存生成的原始链接模板
    const baseHref = editLink.href.replace('__searchid__', '');

    searchInput.addEventListener('input', function() {
        const inputValue = this.value.trim();
        if (inputValue) {
            // 替换占位符为编码后的实际输入值，避免特殊字符问题
            editLink.href = baseHref + encodeURIComponent(inputValue);
        } else {
            // 无输入时禁用链接跳转
            editLink.href = 'javascript:void(0)';
        }
    });
});
</script>

方案2：表单提交实现（无需写JS） #

如果不需要强制使用超链接，直接用GET表单提交实现逻辑更简单：

<!-- 第二个参数替换为你实际的控制器名称 -->
@using (Html.BeginForm("Edit", "Home", FormMethod.Get))
{
    <p>@Html.TextBox("id")</p>
    <p><button type="submit" class="btn btn-primary btn-large">Edit</button></p>
}

提交后会自动生成类似/Home/Edit?id=用户输入值的请求，只要你的Edit动作支持接收query参数形式的id即可正常使用。

方案3：jQuery实现（适用于已引入jQuery的项目） #

代码更精简：

<script>
$(function() {
    const baseHref = $('#editLink').attr('href').replace('__searchid__', '');
    $('#searchid').on('input', function() {
        const val = $(this).val().trim();
        $('#editLink').attr('href', val ? baseHref + encodeURIComponent(val) : 'javascript:void(0)');
    });
});
</script>

内容的提问来源于stack exchange，提问作者Abdel Ja