ASP.NET MVC中ActionLink用onclick调用AJAX加载内容报错问题

方案1：保留ActionLink，阻止默认跳转行为 #

@Html.ActionLink是强类型URL生成工具，必须指定有效的控制器和动作名称（否则会因路由参数缺失报错），无需移除这些参数，只需通过onclick函数阻止默认跳转即可：

修改ActionLink代码 #

<li>@Html.ActionLink("SignUP", "SignUP", "Staff", null, new { @id = "signup", onclick = "return fnSignUP();" })</li>

完善JavaScript函数 #

确保函数最后返回false以阻止跳转，同时修正AJAX的参数传递方式（GET请求无需JSON.stringify）：

function fnSignUP() {
    // 定义请求参数
    var params = { /* 你的参数键值对，如: username: "test" */ };

    $.ajax({
        url: '@Url.Action("SignUP", "Staff")',
        data: params,
        type: 'GET',
        success: function (data) {
            $("#dvSignUpModal").html(data);
        },
        error: function (er) { 
            alert(er.responseText); 
        }
    });

    // 返回false阻止默认页面跳转
    return false;
}

方案2：替换为普通标签（更灵活） #

若不想依赖ActionLink的URL生成逻辑，直接使用普通<a>标签规避必填参数限制：

<li><a href="javascript:void(0);" id="signup" onclick="fnSignUP();">SignUP</a></li>

对应的JS函数可通过event.preventDefault()或返回false阻止默认行为：

function fnSignUP(event) {
    // 可选：用event.preventDefault()替代return false
    // event.preventDefault();

    var params = { /* 你的参数 */ };

    $.ajax({
        url: '@Url.Action("SignUP", "Staff")',
        data: params,
        type: 'GET',
        success: function (data) {
            $("#dvSignUpModal").html(data);
        },
        error: function (er) {
            alert(er.responseText);
        }
    });

    return false;
}

关键注意事项 #

• 不要随意移除ActionLink的控制器/动作参数，否则会触发路由生成错误。
• GET请求无需用JSON.stringify处理参数，jQuery会自动将对象转为查询字符串格式。
• 必须通过return false或event.preventDefault()阻止<a>标签的默认导航行为，否则AJAX执行的同时页面仍会跳转。

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