时间戳

首页 > 解决方案 > 在 ASP.NET Core MVC 站点中使用 Bootstrap 4.3.1 的按钮不再起作用 Cookie 策略导航窗口

html - 在 ASP.NET Core MVC 站点中使用 Bootstrap 4.3.1 的按钮不再起作用 Cookie 策略导航窗口

问题描述

在将 Bootstrap 4 集成到我的 ASP MVC Core Web 项目并将一些 HTML 代码更改为 Cookie 策略窗口之后。我注意到接受按钮不再起作用。按钮在那里，您可以单击它，但它没有响应。

除了更改一些用于外观的 HTML 之外，唯一的其他更改是删除了为文本内容定义容器类的 div 标记。列出的 JQuery 代码保持不变。

该函数由位于 Visual Studio 项目中的 _Layout.cshtml 文件中的标记调用。它在对代码进行更改之前运行。

任何积极的见解都会有所帮助。尤其是如果我遗漏了某些东西或有什么不协调的地方。

using Microsoft.AspNetCore.Http.Features

@{
    var consentFeature = Context.Features.Get<ITrackingConsentFeature>();
    var showBanner = !consentFeature?.CanTrack ?? false;
    var cookieString = consentFeature?.CreateConsentCookie();
}

@if (showBanner)
{
    <nav id="cookieConsent" class="navbar navbar-light fixed-bottom float-sm-left" 
         style="background-color:transparent" role="alert">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#cookieConsent .navbar-collapse">
                    <span class="sr-only">Toggle cookie consent banner</span>
                    <span class="navbar-toggler-icon"></span>
                </button>
                <span class="navbar-brand"><span class="text-info" aria-hidden="false"></span></span>
                <div class="collapse navbar-collapse" style="background-color:rgba(49, 67, 179, 0.80); color:lightgoldenrodyellow">
                    <div class="container-fluid">
                        <h4><strong>COOKIE AND PRIVACY POLICY </strong></h4>
                        <p class="navbar-text" style="color:yellow">
                            This web site uses cookies and other technologgy for features and functions to
                            be viewed and operate normaly. You can acknowledge the site uses these features
                            by clicking the "Accept" button to the right of this message window. To view the
                            sites "Cookie and Privacy" policy page, click on the "Cookie and Privacy
                            Information" button.
                        </p>
                        <p class="navbar-text" style="color:whitesmoke">
                            NOTE: Clicking on the "Accpt" button only acknowledges you have read this
                            this message and is not a condition for access to this site.
                        </p>
                    </div>
                <div class="nav-container float-right">
                    <a asp-controller="Home" asp-action="Privacy" class="btn btn-info navbar-btn">Cookie and Privacy Information</a>                  
                    <button type="button" class="btn btn-light navbar-btn" data-cookie-string="@cookieString">Accept</button>
                </div>
            </div>
    </nav>
    <script>
        (function () {
            document.querySelector("#cookieConsent button[data-cookie-string]").addEventListener("click", function (el) {
                document.cookie = el.target.dataset.cookieString;
                document.querySelector("#cookieConsent").classList.add("hidden");
            }, false);
        })();
    </script>
}

标签： htmlasp.net-corebootstrap-4razor-pages

解决方案

似乎添加hidden类失败了。如果您想在单击接受按钮后隐藏 cookieConsent 导航，您可以尝试以下两种方法：

  1. 为路径中的“隐藏”类添加一些css，wwwroot/css/site.css列出的JQuery代码保持不变。

    .hidden {
   display: none;
 }

  2. 更改 JQuery 如下：

    document.querySelector("#cookieConsent").setAttribute("hidden","true");

推荐阅读