ASP.NET Core中JQuery $.get失效，点击按钮无法加载表单至模态框

我在ASP.NET Core项目中，点击「添加组」按钮时希望打开模态框，并将Create表单的内容加载到模态框内。但JQuery 3.6.1的$.get方法完全无效，Create表单的地址正确，但程序既无报错也无效果。调用普通函数（如showMessage）可正常运行，以下是我的前端代码及后端Controller的Create Action代码：

前端代码 #

<div class="top-buttons-box mb-2">
    <a class="btn btn-success round" onclick="CreateGroup()">
        <i class="icon-plus"></i>
        افزودن گروه
    </a>
</div>

<div id="SoftwareGroupsListSection">
    @await Html.PartialAsync("SoftwareGroupsList")
</div>

<div id="modal" class="modal fade" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-bs-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="modalLabel">تیتر مودال</h4>
            </div>
            <div class="modalBody">
            </div>
        </div>
    </div>
</div>

<script>
    // function showMessage() {
    //     alert('Hello everyone!');
    // }
    function CreateGroup(GroupParentId) {
        // alert('Hello everyone!');
       
        $.get("/Admin/SoftwareGroups/Create/" + GroupParentId,
            function (result) {
                 $("#modal").modal();
                 $("#modalLabel").html("افزودن گروه جدید");
                 $("#modalBody").html(result)
            });
    }
</script>

后端Controller代码 #

// GET: Admin/SoftwareGroups/Create
public IActionResult Create(int? groupID)
{
    ViewData["ParentId"] = new SelectList(_context.SoftwareGroups, "GroupId", "GroupTitle");
    ViewBag.ParentId = groupID;
    return View();
}

问题排查与解决办法 #

1. DOM选择器错误（最可能原因） #

模态框的内容容器是<div class="modalBody">（类选择器），但代码中使用了$("#modalBody")（ID选择器），导致无法找到目标元素，后续代码无法执行。解决方法二选一：

• 给容器添加ID属性：<div id="modalBody" class="modalBody">
• 修改JS中的选择器为类选择器：$(".modalBody").html(result)

2. 参数传递与URL格式问题 #

点击按钮时调用CreateGroup()未传参，GroupParentId会变为undefined，拼接后的URL会变成/Admin/SoftwareGroups/Create/undefined，不符合路由规则。可以修改函数，给参数设置默认值并优化URL拼接：

function CreateGroup(GroupParentId = null) {
    let url = "/Admin/SoftwareGroups/Create";
    if (GroupParentId !== null) {
        url += "/" + GroupParentId;
    }
    $.get(url, function(result) {
        $("#modal").modal();
        $("#modalLabel").html("افزودن گروه جدید");
        $(".modalBody").html(result);
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
        // 增加错误捕获，便于排查问题
        console.log("请求失败: " + textStatus + ", " + errorThrown);
        console.log("响应内容: " + jqXHR.responseText);
    });
}

3. 模态框依赖加载问题 #

确保已正确引入Bootstrap的JS文件，且JQuery在Bootstrap之前加载。因为modal()是Bootstrap提供的方法，如果Bootstrap未正确加载，该方法会不存在，导致模态框无法弹出。

4. 后端视图返回类型问题 #

如果Create.cshtml是包含布局页的完整视图，加载到模态框中会出现重复的HTML结构，导致显示异常。可以修改Action返回部分视图：

public IActionResult Create(int? groupID)
{
    ViewData["ParentId"] = new SelectList(_context.SoftwareGroups, "GroupId", "GroupTitle");
    ViewBag.ParentId = groupID;
    return PartialView(); // 改为返回PartialView
}

5. 增加错误回调排查请求问题 #

在$.get后添加.fail()回调，查看浏览器控制台的错误信息，能明确请求是否发送成功、响应内容是否正常，快速定位问题。

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