如何使用jQuery和Ajax调用带参数的MVC控制器方法

没问题，我帮你梳理下怎么实现这个Ajax调用，结合你的MVC控制器和视图结构，下面是完整的方案：

核心思路 #

因为你的表单包含enctype="multipart/form-data"（支持文件上传），所以不能用常规的表单序列化方式，必须用FormData来封装数据；同时要处理模态框确认逻辑，用户点击确认后再发起Ajax请求。

1. 视图脚本实现（jQuery） #

在你的视图页面底部添加以下脚本，注意替换控制器名称和模态框相关ID（如果和你的实际结构不一致）：

$(document).ready(function() {
    // 绑定添加评论按钮的点击事件，先弹出确认模态框
    $("#addCommentButton").click(function(e) {
        e.preventDefault(); // 阻止表单默认提交行为，避免页面跳转
        $("#confirmSaveModal").modal('show'); // 弹出确认模态框
    });

    // 绑定模态框里的确认保存按钮事件
    $("#confirmSaveBtn").click(function() {
        // 获取表单元素，创建FormData对象（自动包含所有表单数据，包括文件）
        const formElement = $("#addCommentForm")[0];
        const formData = new FormData(formElement);

        // 获取需要传递的Id参数（这里假设你把Id存在了表单内的隐藏域，id为"targetId"）
        const targetId = $("#targetId").val();

        // 发起Ajax请求
        $.ajax({
            url: '/YourControllerName/PostComment/' + targetId, // 替换成你的实际控制器名称
            type: 'POST',
            data: formData,
            // 以下两个参数必须设置，否则无法正确处理multipart/form-data类型的请求
            processData: false, // 禁止jQuery自动处理FormData
            contentType: false, // 让浏览器自动设置正确的Content-Type（包含boundary）
            success: function(response) {
                // 请求成功后的处理逻辑
                $("#confirmSaveModal").modal('hide'); // 关闭模态框
                alert('评论保存成功！');
                // 这里可以添加刷新评论列表、清空表单等操作
            },
            error: function(xhr, status, err) {
                // 请求失败后的处理逻辑
                alert(`保存失败：${err}`);
                $("#confirmSaveModal").modal('hide');
            }
        });
    });
});

2. 视图补充（隐藏域和模态框） #

在你的表单里添加存储Id的隐藏域，同时补充确认模态框（以Bootstrap模态框为例）：

<form id="addCommentForm" asp-action="postcomment" enctype="multipart/form-data">
    <!-- 隐藏域存储需要传递的Id，这里假设从Model中获取 -->
    <input type="hidden" id="targetId" value="@Model.Id" />
    
    <!-- 你的其他表单元素：比如评论输入框、文件上传控件等 -->
    <textarea name="CommentContent" class="form-control" placeholder="写下你的评论..."></textarea>
    <input type="file" name="Attachment" class="mt-2" />
    
    <button id="addCommentButton" class="btn btn-primary mt-3">
        <i class="fa fa-search"></i> 添加评论
    </button>
</form>

<!-- 确认保存模态框 -->
<div class="modal fade" id="confirmSaveModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmModalLabel">确认保存</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                确定要提交这条评论吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" id="confirmSaveBtn" class="btn btn-primary">确认保存</button>
            </div>
        </div>
    </div>
</div>

3. 关键注意事项 #

• FormData的必要性：因为表单包含文件上传，FormData是唯一能正确封装文件数据并传递给服务器的方式，不能用$("#addCommentForm").serialize()，后者无法处理文件。
• processData和contentType设置：这两个参数必须设为false，否则jQuery会尝试对FormData进行序列化，导致服务器无法解析请求。
• 路由匹配：你的控制器路由是[HttpPost("{Id}")]，所以Ajax的URL必须包含Id参数（比如/Controller/PostComment/123），确保和路由规则匹配。
• 模型绑定：确保你的ShowViewModel类的属性名称和表单元素的name属性一致，这样MVC才能正确完成模型绑定。

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