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

wnrlj8wa  于 2024-01-07  发布在  jQuery
关注(0)|答案(1)|浏览(158)

我已经在ASP.NET Core MVC中使用Modal Popup开发了完全CRUD操作项目，它工作正常。但问题是我设计了一个主布局页面，并在上述项目的index.cshtml文件中给出了一个链接（Layout =“~/Views/Shared/_LayoutDashboard.cshtml”;），然后运行应用程序，现在所有的弹出窗口都停止工作。我无法跟踪问题。请提供建议。

index.cshtml

  1. @model IEnumerable<City>
  2. @{
  3.     ViewData["Title"] = "City List";
  4.     Layout = "~/Views/Shared/_LayoutDashboard.cshtml";
  5. }
  7. <h3>@ViewData["Title"]</h3>
  9. <div id="PlaceHolderHere"></div>
  11. <button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#addCity" data-url="@Url.Action("Create")">Create</button>
  13. <table class="table table-bordered table-responsive table-hover">
  14.     <thead>
  15.         <tr>
  16.             <th>
  17.                 @Html.DisplayNameFor(model => model.CityName)
  18.             </th>
  19.             <th>
  20.                 @Html.DisplayNameFor(model => model.Country.CountryName)
  21.             </th>
  22.             <th>Action</th>
  23.         </tr>
  24.     </thead>
  25.     <tbody>
  26.         @if (Model != null && Model.Any())
  27.         {
  28.             @foreach (var city in Model)
  29.             {
  30.                 <tr>
  31.                     <td>
  32.                         @Html.DisplayFor(model => city.CityName)
  33.                     </td>
  34.                     <td>
  35.                         @Html.DisplayFor(model => city.Country.CountryName)
  36.                     </td>
  37.                     <td>
  38.                         <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> |
  39.                         <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> |
  40.                         <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> 
  41.                     </td>
  42.                 </tr>
  43.             }
  44.         }
  45.         else
  46.         {
  47.             <tr>
  48.                 <td colspan="3">
  49.                     <div>
  50.                         <h3>City not available in the database</h3>
  51.                     </div>
  52.                 </td>
  53.             </tr>
  55.         }
  56.     </tbody>
  57. </table>

字符串

_LayoutDashboard.cshtml

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>@ViewData["Title"] - reCRM</title>
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <script src="https://kit.fontawesome.com/ae360af17e.js" crossorigin="anonymous"></script>
  10.     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
  11.           integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  12.     <link rel="stylesheet" href="~/dashboard/style.css">
  13. </head>
  14. <body>
  15.     <div class="wrapper">
  16.         <!-- Sidebar -->
  17.         <aside id="sidebar" class="bg-success text-white">
  18.             <div class="h-100">
  19.                 <div class="sidebar-logo">
  20.                     <a href="#">Dashboard</a>
  21.                 </div>
  22.                 <!-- Sidebar Navigation -->
  23.                 <ul class="sidebar-nav">
  24.                     <li class="sidebar-header">
  25.                         Tools & Components
  26.                     </li>
  27.                     <li class="sidebar-item">
  28.                         <a href="#" class="sidebar-link">
  29.                             <i class="fa-solid fa-list pe-2"></i>
  30.                             Profile
  31.                         </a>
  32.                     </li>
  33.                     <li class="sidebar-item">
  34.                         <a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse" data-bs-target="#pages"
  35.                            aria-expanded="false" aria-controls="pages">
  36.                             <i class="fa-regular fa-file-lines pe-2"></i>
  37.                             Pages
  38.                         </a>
  39.                         <ul id="pages" class="sidebar-dropdown list-unstyled collapse" data-bs-parent="#sidebar">
  40.                             <li class="sidebar-item">
  41.                                 <a href="#" class="sidebar-link">Analytics</a>
  42.                             </li>
  43.                             <li class="sidebar-item">
  44.                                 <a href="#" class="sidebar-link">Ecommerce</a>
  45.                             </li>
  46.                             <li class="sidebar-item">
  47.                                 <a href="#" class="sidebar-link">Crypto</a>
  48.                             </li>
  49.                         </ul>
  50.                     </li>
  51.                     <li class="sidebar-item">
  52.                         <a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard"
  53.                            aria-expanded="false" aria-controls="dashboard">
  54.                             <i class="fa-solid fa-sliders pe-2"></i>
  55.                             Dashboard
  56.                         </a>
  57.                         <ul id="dashboard" class="sidebar-dropdown list-unstyled collapse" data-bs-parent="#sidebar">
  58.                             <li class="sidebar-item">
  59.                                 <a href="#" class="sidebar-link">Dashboard Analytics</a>
  60.                             </li>
  61.                             <li class="sidebar-item">
  62.                                 <a href="#" class="sidebar-link">Dashboard Ecommerce</a>
  63.                             </li>
  64.                         </ul>
  65.                     </li>
  66.                     <li class="sidebar-item">
  67.                         <a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse" data-bs-target="#auth"
  68.                            aria-expanded="false" aria-controls="auth">
  69.                             <i class="fa-regular fa-user pe-2"></i>
  70.                             Auth
  71.                         </a>
  72.                         <ul id="auth" class="sidebar-dropdown list-unstyled collapse" data-bs-parent="#sidebar">
  73.                             <li class="sidebar-item">
  74.                                 <a href="#" class="sidebar-link">Login</a>
  75.                             </li>
  76.                             <li class="sidebar-item">
  77.                                 <a href="#" class="sidebar-link">Register</a>
  78.                             </li>
  79.                         </ul>
  80.                     </li>
  81.                     <li class="sidebar-header">
  82.                         Multi Level Nav
  83.                     </li>
  84.                     <li class="sidebar-item">
  85.                         <a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse" data-bs-target="#multi"
  86.                            aria-expanded="false" aria-controls="multi">
  87.                             <i class="fa-solid fa-share-nodes pe-2"></i>
  88.                             Multi Level
  89.                         </a>
  90.                         <ul id="multi" class="sidebar-dropdown list-unstyled collapse" data-bs-parent="#sidebar">
  91.                             <li class="sidebar-item">
  92.                                 <a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse"
  93.                                    data-bs-target="#multi-two" aria-expanded="false" aria-controls="multi-two">
  94.                                     Two Links
  95.                                 </a>
  96.                                 <ul id="multi-two" class="sidebar-dropdown list-unstyled collapse">
  97.                                     <li class="sidebar-item">
  98.                                         <a href="#" class="sidebar-link">Link 1</a>
  99.                                     </li>
  100.                                     <li class="sidebar-item">
  101.                                         <a href="#" class="sidebar-link">Link 2</a>
  102.                                     </li>
  103.                                 </ul>
  104.                             </li>
  105.                         </ul>
  106.                     </li>
  107.                 </ul>
  108.             </div>
  109.         </aside>
  110.         <!-- Main Component -->
  111.         <div class="main">
  112.             <nav class="navbar navbar-expand px-3 border-bottom">
  113.                 <!-- Button for sidebar toggle -->
  114.                 <button class="btn" type="button" data-bs-theme="light">
  115.                     <span class="navbar-toggler-icon"></span>
  116.                 </button>
  117.                 <div class="collapse navbar-collapse" id="navbarScroll">
  118.                     <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
  119.                         <li class="nav-item">
  120.                             <a class="btn btn-success btn-sm" asp-controller="Login" asp-action="Logout" role="button">Logout</a>
  121.                         </li>
  122.                     </ul>
  123.                 </div>
  124.             </nav>
  125.             <main class="content px-3 py-2">
  126.                 <div class="container-fluid">
  127.                     <div class="mb-3">
  128.                         @RenderBody()
  129.                     </div>
  130.                 </div>
  131.             </main>
  132.         </div>
  133.     </div>
  134.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  135.             integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
  136.             crossorigin="anonymous"></script>
  137.     <script src="~/dashboard/script.js"></script>
  138.    
  139.     @await RenderSectionAsync("Scripts", required: false)
  140. </body>
  141. </html>

型
我还有两个javascript文件，分别位于project. site.js和dashboard/script.js文件中。

site.js

  1. $(function () {
  2.     var PlaceHolderElement = $('#PlaceHolderHere');
  3.     $('button[data-toggle="ajax-modal"]').click(function (event) {
  4.         var url = $(this).data('url');
  5.         var decodedUrl = decodeURIComponent(url);
  6.         $.get(decodedUrl).done(function (data) {
  7.             PlaceHolderElement.html(data);
  8.             PlaceHolderElement.find('.modal').modal('show');
  9.         })
  10.     })
  11.     PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
  12.         var form = $(this).parents('.modal').find('form');
  13.         var actionUrl = form.attr('action');
  14.         var sendData = form.serialize();
  15.         $.post(actionUrl, sendData).done(function (data) {
  16.             PlaceHolderElement.find('.modal').modal('hide'); 
  17.         })
  18.     })
  19. })

型

script.js

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

型

partial view _editCityModalPartial

  1. @model City
  3. <div class="modal fade" id="addCity">
  4.     <div class="modal-dialog">
  5.         <div class="modal-content">
  6.             <div class="modal-header">
  7.                 <h4 class="modal-title" id="addCityLabel">Edit City</h4>
  8.                 <button type="button" class="close" data-bs-dismiss="modal">
  9.                     <span>X</span>
  10.                 </button>
  11.             </div>
  12.             <div class="modal-body">
  13.                 <form action="/City/Edit">
  14.                     <div class="container">
  15.                         <div class="mb-2">
  16.                             <input type="hidden" asp-for="@Model.CityId" />
  17.                             <label asp-for="CityName" class="control-label"></label>
  18.                             <input asp-for="CityName" class="form-control" />
  19.                             <span asp-validation-for="CityName" class="text-danger"></span>
  20.                         </div>
  21.                         <div class="mb-2">
  22.                             <label class="control-label">Country</label>
  23.                             <select asp-for="CountryId" class="form-control" asp-items="ViewBag.Countries">
  24.                                 <option>---Select Country--</option>
  25.                             </select>
  26.                         </div>
  27.                     </div>
  28.                 </form>
  29.             </div>
  30.             <div class="modal-footer">
  31.                 <button type="button" class="btn btn-primary" data-save="modal" onclick="window.location.href='@Url.Action("Index", "New")'">Update</button>
  32.                 <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
  33.             </div>
  34.         </div>
  35.     </div>
  36. </div>

型
因此，当我删除_LayoutDashboard.cshtml从索引文件弹出工作完美，但添加此文件弹出根本不工作。请咨询。

jquery

1条答案

按热度按时间
ehxuflar

ehxuflar1#

LayoutDashboard中的jquery和bootstrap引用不正确，导致错误。请将_LayoutDashboard.cshtml中的js引用替换为your _Layout.cshtml中的js引用
//在我的项目中
取代

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

字符串
与

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

型
x1c 0d1x的数据

赞(0）分享  回复(0）举报  2024-01-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com