ASP.NET Core 5 MVC中Bootstrap模态弹窗无法显示的问题求助

I'm developing an ASP.NET Core 5 MVC application and trying to display a Bootstrap modal popup, but when I click the button, the modal doesn't show up and there are no error messages. Here's my code:

Index.cshtml #

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addEmp"> Ajouter </button>
<table class="table table-bordered table-hover text-center"> ... </table>

_EmployeePartialView.cshtml #

@model Employee
<div class="modal fade" id="addEmp" aria-labelledby="addEmpLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addEmpLabel">Employee</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form asp-action="Create">
          <div asp-validation-summary="ModelOnly" class="text-danger"></div>
          <div class="form-group">
            <label asp-for="Name" class="control-label"></label>
            <input asp-for="Name" class="form-control" />
            <span asp-validation-for="Name" class="text-danger"></span>
          </div>
          <div class="form-group">
            <label asp-for="Profession" class="control-label"></label>
            <input asp-for="Profession" class="form-control" />
            <span asp-validation-for="Profession" class="text-danger"></span>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

EmployeeController.cs #

public IActionResult Index() {
  List<Employee> emp = _dbcontext.Employees.ToList();
  return View(emp);
}
[HttpGet]
public IActionResult Create() {
  Employee emp = new Employee();
  return PartialView("_EmployeePartialView", emp);
}

Troubleshooting & Fixes #

Let's walk through the most likely issues and how to fix them:

1. Your Modal HTML Isn't Present in the Index Page #

Right now, your Index.cshtml only has the trigger button—the modal's code from _EmployeePartialView isn't rendered into the page's DOM at all. Bootstrap can't trigger a modal that doesn't exist on the page.

Fix this by adding a reference to the partial view in Index.cshtml, ideally right after your table:

<table class="table table-bordered table-hover text-center"> ... </table>
<!-- Inject the modal's HTML directly into the page -->
<partial name="_EmployeePartialView" />

Or use the older syntax if you prefer:

@Html.Partial("_EmployeePartialView")

This will make the modal's code part of the Index page, so the button's data-target="#addEmp" can find the correct element.

2. Check Bootstrap & jQuery References Are Correct #

Bootstrap modals depend on jQuery first, then Bootstrap's JS file (since Bootstrap uses jQuery under the hood). Make sure these are properly included in your _Layout.cshtml:

In the <head> section for CSS:

<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />

Right before the closing </body> tag for scripts (order is critical!):

<!-- Load jQuery first -->
<script src="~/lib/jquery/jquery.min.js"></script>
<!-- Then load Bootstrap JS -->
<script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script>

If you're using CDN links instead of local files, replace the paths with valid CDN URLs (just make sure the Bootstrap version matches your markup—e.g., Bootstrap 4 vs 5 have minor syntax differences).

3. Test Manual Modal Initialization #

If the above steps don't resolve the issue, try manually initializing the modal to rule out auto-initialization conflicts. Add this script at the bottom of Index.cshtml:

<script>
    $(document).ready(function() {
        // Initialize the modal with auto-show disabled
        $('#addEmp').modal({ show: false });
        
        // Manually bind the button click to trigger the modal
        $('.btn-info').click(function() {
            $('#addEmp').modal('show');
        });
    });
</script>

This bypasses the data-toggle attribute and directly triggers the modal, which can help identify if there's a hidden conflict with auto-initialization.

4. Confirm You Don't Need AJAX Loading (Unless You Intend To) #

Your Create action returns a partial view, but right now you're not using AJAX to load it. If you wanted to dynamically load the modal via AJAX, you'd need to add a click event handler that fetches the partial view and inserts it into the DOM. But for your current setup, statically rendering the partial view in Index.cshtml is the simplest and correct approach.

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