模态弹出窗口在 asp.net mvc core 6.0 中不起作用

问题描述 投票：0回答：1

我在 ASP.NET Core MVC 中使用 Modal Popup 开发了完整的 CRUD 操作项目，并且运行良好。但问题是我设计了一个主布局页面，并在上面项目的index.cshtml文件中给出了一个链接（Layout =“~/Views/Shared/_LayoutDashboard.cshtml”;），然后运行应用程序，现在所有弹出窗口都简单停止工作。我无法追踪问题。请指教。

index.cshtml

@model IEnumerable<City>
@{
    ViewData["Title"] = "City List";
    Layout = "~/Views/Shared/_LayoutDashboard.cshtml";
}


<h3>@ViewData["Title"]</h3>

<div id="PlaceHolderHere"></div>

<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#addCity" data-url="@Url.Action("Create")">Create</button>

<table class="table table-bordered table-responsive table-hover">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.CityName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Country.CountryName)
            </th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @if (Model != null && Model.Any())
        {
            @foreach (var city in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(model => city.CityName)
                    </td>
                    <td>
                        @Html.DisplayFor(model => city.Country.CountryName)
                    </td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="ajax-modal" data-target="#addCity" data-url="@Url.Action($"Edit/{city.CityId}")">Edit</button> |
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="ajax-modal" data-target="#addCity" data-url="@Url.Action($"Details/{city.CityId}")">Detail</button> |
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="ajax-modal" data-target="#addCity" data-url="@Url.Action($"Delete/{city.CityId}")">Delete</button> 
                    </td>
                </tr>
            }
        }
        else
        {
            <tr>
                <td colspan="3">
                    <div>
                        <h3>City not available in the database</h3>
                    </div>
                </td>
            </tr>

        }
    </tbody>
</table>

_LayoutDashboard.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - reCRM</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/ae360af17e.js" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <link rel="stylesheet" href="~/dashboard/style.css">
</head>
<body>
    <div class="wrapper">
        <!-- Sidebar -->
        <aside id="sidebar" class="bg-success text-white">
            <div class="h-100">
                <div class="sidebar-logo">
                    <a href="#">Dashboard</a>
                </div>
                <!-- Sidebar Navigation -->
                <ul class="sidebar-nav">
                    <li class="sidebar-header">
                        Tools & Components
                    </li>
                    <li class="sidebar-item">
                        <a href="#" class="sidebar-link">
                            <i class="fa-solid fa-list pe-2"></i>
                            Profile
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse" data-bs-target="#pages"
                           aria-expanded="false" aria-controls="pages">
                            <i class="fa-regular fa-file-lines pe-2"></i>
                            Pages
                        </a>
                        <ul id="pages" class="sidebar-dropdown list-unstyled collapse" data-bs-parent="#sidebar">
                            <li class="sidebar-item">
                                <a href="#" class="sidebar-link">Analytics</a>
                            </li>
                            <li class="sidebar-item">
                                <a href="#" class="sidebar-link">Ecommerce</a>
                            </li>
                            <li class="sidebar-item">
                                <a href="#" class="sidebar-link">Crypto</a>
                            </li>
                        </ul>
                    </li>
                    <li class="sidebar-item">
                        <a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard"
                           aria-expanded="false" aria-controls="dashboard">
                            <i class="fa-solid fa-sliders pe-2"></i>
                            Dashboard
                        </a>
                        <ul id="dashboard" class="sidebar-dropdown list-unstyled collapse" data-bs-parent="#sidebar">
                            <li class="sidebar-item">
                                <a href="#" class="sidebar-link">Dashboard Analytics</a>
                            </li>
                            <li class="sidebar-item">
                                <a href="#" class="sidebar-link">Dashboard Ecommerce</a>
                            </li>
                        </ul>
                    </li>
                    <li class="sidebar-item">
                        <a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse" data-bs-target="#auth"
                           aria-expanded="false" aria-controls="auth">
                            <i class="fa-regular fa-user pe-2"></i>
                            Auth
                        </a>
                        <ul id="auth" class="sidebar-dropdown list-unstyled collapse" data-bs-parent="#sidebar">
                            <li class="sidebar-item">
                                <a href="#" class="sidebar-link">Login</a>
                            </li>
                            <li class="sidebar-item">
                                <a href="#" class="sidebar-link">Register</a>
                            </li>
                        </ul>
                    </li>
                    <li class="sidebar-header">
                        Multi Level Nav
                    </li>
                    <li class="sidebar-item">
                        <a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse" data-bs-target="#multi"
                           aria-expanded="false" aria-controls="multi">
                            <i class="fa-solid fa-share-nodes pe-2"></i>
                            Multi Level
                        </a>
                        <ul id="multi" class="sidebar-dropdown list-unstyled collapse" data-bs-parent="#sidebar">
                            <li class="sidebar-item">
                                <a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse"
                                   data-bs-target="#multi-two" aria-expanded="false" aria-controls="multi-two">
                                    Two Links
                                </a>
                                <ul id="multi-two" class="sidebar-dropdown list-unstyled collapse">
                                    <li class="sidebar-item">
                                        <a href="#" class="sidebar-link">Link 1</a>
                                    </li>
                                    <li class="sidebar-item">
                                        <a href="#" class="sidebar-link">Link 2</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </aside>
        <!-- Main Component -->
        <div class="main">
            <nav class="navbar navbar-expand px-3 border-bottom">
                <!-- Button for sidebar toggle -->
                <button class="btn" type="button" data-bs-theme="light">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarScroll">
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="btn btn-success btn-sm" asp-controller="Login" asp-action="Logout" role="button">Logout</a>
                        </li>
                    </ul>
                </div>
            </nav>
            <main class="content px-3 py-2">
                <div class="container-fluid">
                    <div class="mb-3">
                        @RenderBody()
                    </div>
                </div>
            </main>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
            crossorigin="anonymous"></script>
    <script src="~/dashboard/script.js"></script>
   
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

我的项目中还有两个java脚本文件。 site.js 和仪表板/script.js 文件。

site.js

$(function () {
    var PlaceHolderElement = $('#PlaceHolderHere');
    $('button[data-toggle="ajax-modal"]').click(function (event) {
        var url = $(this).data('url');
        var decodedUrl = decodeURIComponent(url);
        $.get(decodedUrl).done(function (data) {
            PlaceHolderElement.html(data);
            PlaceHolderElement.find('.modal').modal('show');
        })
    })
    PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
        var form = $(this).parents('.modal').find('form');
        var actionUrl = form.attr('action');
        var sendData = form.serialize();
        $.post(actionUrl, sendData).done(function (data) {
            PlaceHolderElement.find('.modal').modal('hide'); 
        })
    })
})

脚本.js

const toggler = document.querySelector(".btn");
toggler.addEventListener("click",function(){
    document.querySelector("#sidebar").classList.toggle("collapsed");
});

部分视图_editCityModalPartial

@model City

<div class="modal fade" id="addCity">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="addCityLabel">Edit City</h4>
                <button type="button" class="close" data-bs-dismiss="modal">
                    <span>X</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="/City/Edit">
                    <div class="container">
                        <div class="mb-2">
                            <input type="hidden" asp-for="@Model.CityId" />
                            <label asp-for="CityName" class="control-label"></label>
                            <input asp-for="CityName" class="form-control" />
                            <span asp-validation-for="CityName" class="text-danger"></span>
                        </div>
                        <div class="mb-2">
                            <label class="control-label">Country</label>
                            <select asp-for="CountryId" class="form-control" asp-items="ViewBag.Countries">
                                <option>---Select Country--</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-save="modal" onclick="window.location.href='@Url.Action("Index", "New")'">Update</button>
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

因此，当我从索引文件弹出窗口中删除 _LayoutDashboard.cshtml 时，它工作得很好，但添加此文件弹出窗口根本不起作用。请指教。

javascript jquery ajax asp.net-mvc asp.net-core
1个回答
0
投票

您的LayoutDashboard中jquery和bootstrap的引用不正确，导致错误。 将 

_LayoutDashboard.cshtml
中的 js 引用替换为 _Layout.cshtml

中的 js 引用

//在我的项目中

更换

<script src="~/dashboard/script.js"></script>

与

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.