ASP.NET MVC项目中Bootstrap模态框点击无响应问题排查求助

Let’s walk through the key issues preventing your modal from showing, plus some critical fixes for your save functionality:

1. Incorrect Script Loading Order #

Bootstrap’s JavaScript depends on jQuery to work, but you’re loading Bootstrap’s bundle before jQuery. This breaks all Bootstrap JS features (including modals entirely).

Fix this by reordering your scripts in the _Layout page to load jQuery first:

<!--Head section-->
<link href="~/Areas/Dashboard/Content/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Areas/Dashboard/Content/css/simple-sidebar.css" rel="stylesheet" />
<link href="~/Areas/Dashboard/Content/vendor/fontawesome/css/all.css" rel="stylesheet" />
<!-- Load jQuery BEFORE Bootstrap JS -->
<script src="~/Areas/Dashboard/Content/vendor/jquery/jquery.min.js"></script>
<script src="~/Areas/Dashboard/Content/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Remove the duplicate jQuery script from the end of the body section -->

2. Modal Isn’t Triggered to Show After AJAX Content Load #

Your button uses data-toggle="modal", but since you’re loading the modal content asynchronously via AJAX, the modal won’t automatically show once the content is inserted. You need to explicitly call Bootstrap’s modal show method after updating the modal’s content.

Update your Index page script to add this line:

$("#createButton").click(function () {
 $.ajax({
 url: '@Url.Action("Action", "AccomodationTypes")'
 })
 .done(function (response) {
 $("#actionModal .modal-dialog").html(response);
 // Explicitly trigger the modal to show after content is loaded
 $("#actionModal").modal('show');
 });
});

3. Minor Bug Fixes (Critical for Save Functionality) #

These don’t affect the modal popping up, but they’ll break your save button functionality:

• In your partial view’s script, you’re missing the # for the form ID selector: change $("actionForm").serialize() to $("#actionForm").serialize()
• The error div selector uses a class instead of ID: change $(".errorDiv").html(response.Message) to $("#errorDiv").html(response.Message)

After applying these fixes, your modal should pop up correctly when clicking the Create button, and the save functionality will work as expected.

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