.NET 6中Ajax无法调用控制器方法问题求助

你的问题核心是表单默认提交行为未被阻止，同时Ajax请求存在几处配置错误，导致页面直接刷新，无法触发预期的异步请求。以下是具体问题点和修复方案：

1. 未阻止表单默认提交行为 #

点击type="submit"按钮时，浏览器会自动触发表单的默认POST提交，直接刷新页面，Ajax请求被中断。必须在表单提交事件中阻止这一默认行为。

2. URL生成错误 #

@Url.ActionLink("PreInscription", "Inscription")会生成完整的<a>标签HTML（比如<a href="/Inscription/PreInscription">...</a>），而非纯URL，导致Ajax的url参数无效，请求地址错误。应使用@Url.Action生成纯URL。

3. 未传递表单数据到控制器 #

控制器方法通过[FromBody]接收PreInscription对象，但当前Ajax请求未携带任何数据，会直接导致ModelState.IsValid返回false，即使请求成功也会返回failed。需要收集表单字段并序列化为JSON发送。

修复后的完整代码 #

视图部分（脚本+表单） #

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script>
function runMethod(formData) {
    $.ajax({
        url: '@Url.Action("PreInscription", "Inscription")', // 修正URL生成方式
        type: 'POST',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(formData), // 传递序列化后的表单数据
        success: function (response) {
            alert(response.response); // 注意返回的是包含response属性的对象
        },
        error: function(xhr, status, error) {
            // 增加错误处理，方便调试
            console.error("请求错误:", error);
        }
    });
}

$(document).ready(function () {
    $('form').submit(function (e) {
        e.preventDefault(); // 阻止表单默认提交行为
        
        // 收集表单数据（需确保表单字段name与PreInscription类属性名一致）
        var formData = {
            // 示例：根据你的PreInscription属性补充对应字段
            // Name: $(this).find('[name="Name"]').val(),
            // Email: $(this).find('[name="Email"]').val()
        };
        
        runMethod(formData);
    });
});
</script>

<!-- 补充表单字段，确保name属性与PreInscription类属性匹配 -->
<form>
    <!-- 示例字段，请根据实际模型修改 -->
    <input type="text" name="Name" placeholder="姓名" />
    <input type="email" name="Email" placeholder="邮箱" />
    
    <button id="submitButton" class="btn btn-large btn-theme margintop10" type="submit">Envoyer</button>
</form>

控制器优化建议 #

• 确保PreInscription类的属性名称与表单字段的name属性完全匹配，否则模型绑定会失败。
• 增加ModelState错误排查逻辑，方便调试数据绑定问题：

[HttpPost]
public async Task<IActionResult> PreInscription([FromBody] PreInscription preInscription)
{
    // 调试用：输出ModelState错误
    if (!ModelState.IsValid)
    {
        var errors = ModelState.Values.SelectMany(v => v.Errors.Select(e => e.ErrorMessage));
        return Json(new { response = "failed", errors = errors });
    }

    var inscriptionService = serviceProvider.GetRequiredService<IInscriptionService>();
    var isSend = await inscriptionService.SendEmailPreInscription(preInscription);

    return Json(new { response = isSend ? "success" : "failed" });
}

额外调试技巧 #

1. 打开浏览器开发者工具（F12），切换到网络标签，点击提交按钮后查看请求是否发送，以及请求的URL、参数是否正确。
2. 检查控制台是否有JavaScript错误，比如jQuery未加载、变量未定义等问题。

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