ASP.NET Core中如何传递下拉框选中值并实现模态框正常加载？

问题分析 #

你已经通过Ajax成功从控制器获取到了PartialView，但模态框未显示，核心原因是没有在Ajax回调中手动触发模态框显示，同时原按钮上的Bootstrap自动模态属性和自定义Ajax逻辑存在冲突，且模态框的ID管理混乱。

步骤1：调整页面基础结构 #

修改按钮（移除自动模态属性）

删掉按钮上的data-toggle、data-target、data-url属性，避免和自定义JS冲突：

<div class="row">
    <div class="col-md-4 mb-2">
        <select id="AssessmentSelectionId" class="form-select no-progress" asp-for="@Model.AssessmentTypeId" asp-items="@(new SelectList(Model.AssessmentTypeList, "AssessmentTypeId", "AssessmentType"))">
            <option value="">Please select Assessment Type</option>
        </select>
    </div>
    <div class="col-md-4 mb-2">
        <button id="btnSaveAssessment" type="button" class="btn btn-primary float-right">Insert Assessment</button>
    </div>
</div>

添加通用模态框外壳（放在主页面）

在主页面中添加一个固定的模态框容器，后续动态替换内部内容，避免多个模态框ID冲突：

<!-- 通用模态框外壳 -->
<div class="modal fade" id="mdAssessmentModal" tabindex="-1" aria-labelledby="assessmentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 这里会动态加载PartialView的内容 -->
            <div id="modalContentContainer"></div>
        </div>
    </div>
</div>

步骤2：修改PartialView内容 #

让两个PartialView（_IPDEModalAssessment.cshtml和_GeneralModalAssessment.cshtml）只包含模态框的内部内容（header、body、footer），不要完整的.modal标签：

@model AssessmentsViewModel

<div class="modal-header">
    <h5 class="modal-title" id="assessmentModalLabel">Insert @Model.AssessmentType Results</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">Cancel</button>
    <button type="button" class="btn btn-primary" data-save="modal" id="btnSave">Save</button>
</div>

步骤3：完善Ajax逻辑 #

在回调中插入PartialView内容并手动触发模态框显示，同时增加下拉框选中校验：

$(function () {
    $("#btnSaveAssessment").click(function () {
        var assessmentTypeId = $('#AssessmentSelectionId').val();
        
        // 校验是否选中评估类型
        if (!assessmentTypeId) {
            alert("Please select an Assessment Type first.");
            return;
        }

        $.ajax({
            type: 'GET',
            url: '@Url.Action("Create", "Assessments")',
            data: { assessmentType: assessmentTypeId, assessmentId: 0 },
            success: function (data) {
                // 将返回的PartialView内容插入模态框容器
                $("#modalContentContainer").html(data);
                // 显示模态框
                $("#mdAssessmentModal").modal('show');
            },
            error: function (xhr, status, error) {
                console.error('Error loading assessment modal:', error);
            }
        });
    });
});

关键注意点 #

1. 确保页面已正确引入jQuery和Bootstrap的JS文件（modal方法依赖Bootstrap）
2. 控制器返回的PartialView不要包含完整的.modal标签，避免DOM结构重复
3. 通过modal('show')手动触发模态框显示，这是之前缺失的核心步骤

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