MVC4 Razor页面按钮点击无回发实现问题求助

我最近在MVC4环境开发时碰到了一个头疼的问题：按钮点击事件总是被页面回发干扰，导致原本用于其他逻辑的代码被意外执行，完全打乱了程序流程。

最开始我尝试用JavaScript处理onclick事件，写了如下代码，但遇到了404未找到的错误：

<script type="text/javascript">
function IntegrityOnClick(status) {
    switch (status) {
        case 1:
            $.ajax({
                type: 'GET',
                url: '@Url.Action("CheckIntegrity_Click", "Models/_mainPage")',
                dataType: 'json'
            });
        case 0 : return;
        default:
    }
}
</script>

后来我把URL改成@Attributes.codeBehind.CheckIntegrity_Click，事件能正常运行了，但又出现新问题——这个方法会在页面加载时就自动触发，完全不符合“点击按钮才执行”的需求。

问题根源分析 #

• 第一个方案的404错误：@Url.Action的第二个参数是控制器名称，MVC的控制器命名规范是XXXController，而Models/_mainPage并不是合法的控制器名称格式，导致路由无法找到对应的Action方法。
• 第二个方案的页面加载触发问题：Razor引擎在渲染页面时会直接解析@Attributes.codeBehind.CheckIntegrity_Click这个表达式，相当于直接调用了后台方法，所以页面一加载就执行了，而非点击按钮时触发。

最终可行解决方案 #

在Marcelo Vismari的帮助下，我终于找到了解决方案，核心是用正确的Url.Action生成路由地址，同时确保Ajax请求仅在按钮点击时触发：

按钮代码

<button id="checkIntegrity" class="checkIntegrity" onclick="IntegrityOnClick()">检查完整性</button>

脚本代码

<script type="text/javascript">
function IntegrityOnClick() {
    // 通过Ajax请求控制器的IntegrityBtn_Click方法，不会触发页面回发，避免流程被破坏
    $.ajax({
        type: 'GET',
        url: '@Url.Action("IntegrityBtn_Click")',
        dataType: 'json',
    });
}
</script>

控制器代码（VB.NET）

Public Function IntegrityBtn_Click() As JsonResult
    Return Json(New With {Key Attributes.codeBehind.CheckIntegrity_Click}, JsonRequestBehavior.AllowGet)
End Function

这个方案通过Ajax异步请求处理按钮点击逻辑，完全避免了页面回发的干扰，希望能帮到碰到同样问题的开发者。

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