MVC中Url.Action添加路由值：重复搜索路径叠加问题解决

问题出在@Url.Action("Search","Content")生成的是相对路径：首次搜索后页面路径变为Content/Search/首次搜索值，再次搜索时，相对路径会在当前路径基础上拼接新值，导致路由变成Content/Search/首次搜索值/新搜索值。

核心解决思路 #

让Url.Action生成绝对路径，这样无论当前页面处于什么路径，都会直接跳转到正确的搜索路由，不会出现路径叠加的情况。同时对搜索值做编码处理，避免特殊字符破坏路由结构。

修改后的完整代码 #

<input type="text" id="txtSearch"  class="tftextinput2" name="searchKey" size="21" maxlength="120" value="">
<!-- 移除 onclick 属性，避免重复绑定事件导致多次触发 -->
<input type="button" value=">" class="tfbutton2" id="srcButton">

<script type="text/javascript">
$(document).ready(function () {
    var searchboxID = "#txtSearch";
    
    function redirectOnClick() {
        var searchValue = $(searchboxID).val().trim();
        if (!searchValue) return; // 空搜索值不执行跳转
        
        // 生成带协议的绝对路径，同时对搜索值编码
        var searchUrl = '@Url.Action("Search", "Content", null, Request.Url.Scheme)' + '/' + encodeURIComponent(searchValue);
        document.location = searchUrl;
        
        // 输入框清空用 val('')，empty() 是清空子元素，不适合输入框场景
        $(searchboxID).val('');
    }

    // 绑定按钮点击事件
    document.getElementById('srcButton').addEventListener("click", redirectOnClick);
});
</script>

额外优化说明 #

1. 移除了按钮原生的onclick绑定，避免重复绑定事件造成多次跳转
2. 增加空值判断，防止无意义的空搜索跳转
3. 用trim()去除搜索值前后空格，提升用户体验
4. 用encodeURIComponent()编码搜索值，兼容空格、特殊字符等场景

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