Bootstrap Modal在MVC中加载局部视图无内容问题求助

嘿，我看了你的代码，发现几个可能导致模态框不显示内容的问题，一个个来解决：

你当前的模态框写法是 Bootstrap 旧版本的格式，而且缺少模态框必需的层级结构，这会导致加载的局部视图无法正确渲染：

• 去掉多余的 hide 和 in 类（in 是用来控制模态框显示的状态类，初始不需要）
• 补充 modal-dialog 和 modal-content 两层容器，这是 Bootstrap 模态框的标准结构

修改后的模态框容器代码：

<div class="modal fade" id="edit-project">
  <div class="modal-dialog">
    <div class="modal-content">
      <div id="edit-project-container"></div>
    </div>
  </div>
</div>

现在的AJAX请求没有错误处理，你没法知道请求是否成功。建议加上错误回调，同时打开浏览器开发者工具（F12）查看Network标签，确认请求是否返回200状态码：

$(document).ready(function () {
  $('.edit-project').click(function () {
    // 用Url.Action生成可靠的路由，避免硬编码路径出错
    var url = '@Url.Action("Edit", "Project")';
    var id = $(this).attr('data-id');
    $.get(`${url}/${id}`, function (data) {
      $('#edit-project-container').html(data);
      $('#edit-project').modal('show');
    })
    .fail(function(xhr) {
      // 控制台打印错误信息，方便排查
      console.error('加载局部视图失败:', xhr.responseText);
    });
  });
});

局部视图中的@section Scripts不会被布局页渲染，这部分代码完全无效，直接删掉即可。如果需要表单验证脚本，把@Scripts.Render("~/bundles/jqueryval")留在主视图的@section Scripts里就够了。

当表单验证失败时，你当前的POST方法返回的是完整视图（包含布局），如果后续用AJAX提交表单，会把整个页面塞进模态框里。应该改成返回局部视图：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(Project project)
{
    if (ModelState.IsValid)
    {
        db.Entry(project).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    ViewBag.UserId = new SelectList(db.Users.Where(u => u.RoleID == 1), "ID", "FirstName", project.UserId);
    // 验证失败时返回局部视图，而不是完整视图
    return PartialView("_EditProject", project);
}

做完这些修改后，应该就能正常加载局部视图到模态框里了。如果还是有问题，先看浏览器控制台有没有报错，再检查Network里的请求是否正确返回了局部视图内容。

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