时间戳

首页 > 解决方案 > 如何让 cookieConsent 导航在移动设备上自动扩展？

jquery - 如何让 cookieConsent 导航在移动设备上自动扩展？

问题描述

背景

我有一个 ASP.Net Core v2.1 Web 应用程序，它在启动时将 CheckConsentNeeded 标志设置为 true。

services.Configure<CookiePolicyOptions>(options =>
        {
            // This lambda determines whether user consent for non-essential cookies is needed for a given request.
            options.CheckConsentNeeded = context => true;
            options.MinimumSameSitePolicy = Microsoft.AspNetCore.Http.SameSiteMode.None;
        });

我在主页上有一个注册表单，它在发布操作中使用 [ValidateAntiForgeryToken]。

问题

如果有人在 cookie 被接受之前尝试注册，他们会收到以下错误：

ERROR - ExceptionHandlerMiddleware - An unhandled exception has occurred while executing the request. System.FormatException: Input string was not in a correct format.

要求

我想在移动设备上自动展开 cookieConsent 面板，直到他们接受 cookie 以使其更明显地表明他们需要这样做，而不必通过手动单击汉堡图标来查看。

采取的行动

我可以看到 _cookieConsentPartial 中的代码给了我需要的标志（showBanner）：

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

@if (showBanner)
{

我希望我可以在这里添加一些 JQuery 代码来将类“in”添加到 .navbar-collapse 选择器中。

$.when($.ready).then(function () {
        var $navBar = $(".navbar-collapse");
        if (!$navBar.hasClass("in")) {
            $navBar.addClass("in");
        }
    });

但是，有 2 件事。

  1. 我不能在 cookieConsentPartial 中使用 JQuery，因为部分加载的位置高于脚本文件。
  2. 如果我在页面加载后在控制台中运行 JQuery 脚本，我会得到菜单而不是 cookieConsent 内容。汉堡点击切换也停止工作。

谁能建议在 Asp.Net Core 2.1 中实现此要求的最佳方法？

标签： jqueryasp.net-coreasp.net-core-mvcasp.net-core-2.0

解决方案

今天早上我又回到了这个问题上，结果证明它最终可以直接实施。

我只需要将“in”类添加到 _cookieConsentPartial 上的 navbar-header 下方的 navbar-collapse div。

<div class="navbar-header">
    <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="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>
<div class="collapse **in** navbar-collapse">
    <p class="navbar-text">
        <i class="fa fa-info-circle"></i> We use our cookies and third party cookies to improve our services, obtain statistics, allow you to remember your login details, and to facilitate your interaction with social networks.
    </p>
    ...

推荐阅读