ASP.NET MVC中如何通过JavaScript调用Action并跳转至对应视图？

问题根源 #

点击type="submit"按钮时，会同时触发两个行为：

1. 执行sendData()里的jQuery AJAX请求
2. 触发表单的默认提交行为，导致页面刷新，覆盖了AJAX请求的返回结果，所以看不到预期的视图跳转。

解决方案 #

第一步：阻止表单默认提交行为 #

先解决页面自动刷新的问题，有三种常用实现方式：

方式1：修改按钮类型为button

把提交按钮的type从submit改成button，点击时不会触发表单默认提交逻辑：

<input class='lf--submit' type='button' onclick="sendData()">

方式2：在点击事件中返回false

修改按钮的onclick属性，返回函数执行结果，同时在函数末尾添加return false来阻止默认行为：

<input class='lf--submit' type='submit' onclick="return sendData()">

对应的JS函数：

function sendData() {
    var txtUsername = document.getElementById("username").value;
    var txtPassword = document.getElementById("password").value;
    var fullString = [txtUsername, txtPassword].join('-');
    // 后续请求逻辑
    return false; // 阻止表单默认提交
}

方式3：用事件对象阻止默认行为

在函数中通过event.preventDefault()直接拦截默认提交：

function sendData(event) {
    event.preventDefault(); // 阻止表单默认提交
    
    var txtUsername = document.getElementById("username").value;
    var txtPassword = document.getElementById("password").value;
    var fullString = [txtUsername, txtPassword].join('-');
    // 后续请求逻辑
}

按钮的onclick需要传递事件对象：

<input class='lf--submit' type='submit' onclick="sendData(event)">

第二步：实现视图跳转 #

根据需求选择以下两种方式之一：

方式A：用JS模拟表单提交（和设置form的action/method效果一致）

这种方式会像普通表单提交一样刷新页面，并渲染Action返回的视图：

function sendData(event) {
    event.preventDefault();
    
    // 拼接参数
    var txtUsername = document.getElementById("username").value;
    var txtPassword = document.getElementById("password").value;
    var fullString = [txtUsername, txtPassword].join('-');
    
    // 创建临时表单
    var tempForm = document.createElement('form');
    tempForm.action = '/Login/LoginSuccess';
    tempForm.method = 'POST';
    
    // 添加data参数的隐藏输入框
    var dataInput = document.createElement('input');
    dataInput.type = 'hidden';
    dataInput.name = 'data';
    dataInput.value = fullString;
    
    tempForm.appendChild(dataInput);
    document.body.appendChild(tempForm);
    
    // 提交表单
    tempForm.submit();
}

方式B：异步加载视图（无刷新）

如果不想刷新页面，直接把Action返回的视图内容替换到当前页面中，可在AJAX的success回调中处理：

function sendData(event) {
    event.preventDefault();
    
    var txtUsername = document.getElementById("username").value;
    var txtPassword = document.getElementById("password").value;
    var fullString = [txtUsername, txtPassword].join('-');
    
    $.post('/Login/LoginSuccess', { "data": fullString }, function(responseHtml) {
        // 把返回的视图HTML替换到页面主体（或指定容器）
        document.body.innerHTML = responseHtml;
        // 若只需替换部分内容，可改为：document.getElementById('target-container').innerHTML = responseHtml;
    });
}

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