无需修改路由，如何通过按钮向控制器传递不同参数？

嘿，我来给你几个不用修改路由就能实现的方案，都是日常ASP.NET MVC开发里常用的做法，还能满足你可选隐藏参数的需求：

方案1：用表单包裹按钮（支持隐藏参数） #

这种方式不需要额外JS，纯HTML就能实现，还能通过POST请求隐藏参数。

如果不需要隐藏参数（参数可以出现在URL里），用GET表单：

<form action="@Url.Action("GaugeView", "PSA")" method="get">
    <input type="hidden" name="LineName" value="Medium Voltage" />
    <button type="submit" class="button">Medium Voltage</button>
</form>

<form action="@Url.Action("GaugeView", "PSA")" method="get">
    <input type="hidden" name="LineName" value="High Voltage" />
    <button type="submit" class="button">High Voltage</button>
</form>

如果想要隐藏参数（不在URL里显示），把表单method改成post，同时给控制器方法加上[HttpPost]特性：

[HttpPost]
public ActionResult GaugeView(string LineName) {
    // 处理逻辑
    return View();
}

注意：POST请求后如果用户刷新页面，浏览器会提示重新提交，这点要提前考虑。

方案2：用JS触发（灵活控制参数） #

这种方式更灵活，适合需要做额外逻辑再调用控制器的场景，也能轻松隐藏参数。

先给按钮加自定义属性存储参数，然后绑定点击事件：

<button class="gauge-button button" data-linename="Medium Voltage">Medium Voltage</button>
<button class="gauge-button button" data-linename="High Voltage">High Voltage</button>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.gauge-button').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const lineName = this.dataset.linename;
            
            // 方式1：GET跳转（参数会在URL里）
            window.location.href = '@Url.Action("GaugeView", "PSA")?LineName=' + encodeURIComponent(lineName);
            
            // 方式2：POST请求隐藏参数（需要控制器加[HttpPost]）
            // const form = document.createElement('form');
            // form.method = 'post';
            // form.action = '@Url.Action("GaugeView", "PSA")';
            // const input = document.createElement('input');
            // input.type = 'hidden';
            // input.name = 'LineName';
            // input.value = lineName;
            // form.appendChild(input);
            // document.body.appendChild(form);
            // form.submit();
        });
    });
});
</script>

这里用了原生JS，如果你项目里有jQuery，换成jQuery写法也一样。

方案3：改造ActionLink为按钮样式（最简单的无JS方案） #

你已经用到了@Html.ActionLink，其实只要给它加上按钮的CSS类，就能让它看起来和按钮一样，完全不用改路由：

@Html.ActionLink("Medium Voltage", "GaugeView", "PSA", new { LineName = "Medium Voltage" }, new { @class = "button" })
@Html.ActionLink("High Voltage", "GaugeView", "PSA", new { LineName = "High Voltage" }, new { @class = "button" })

这个方案的缺点是参数会出现在URL里，适合不需要隐藏参数的场景，优点是代码量最少，不用额外处理表单或JS。

标准实践总结 #

• 不需要隐藏参数：优先用改造后的ActionLink或者GET表单，实现简单，符合RESTful规范。
• 需要隐藏参数：用POST表单或者Ajax POST请求，记得给控制器方法加上[HttpPost]特性。
• 所有方案都不需要修改路由，因为ASP.NET MVC默认支持通过查询字符串或表单提交传递参数，只要参数名和控制器方法的参数名匹配就行。

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