如何让 cookieConsent 导航在移动设备上自动扩展?

How do I get the cookieConsent nav to auto expand on mobile?

背景

我有一个 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;
        });

我在主页上有一个注册表单,在 post 操作中使用了 [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 代码以将 class "in" 添加到 .navbar-collapse 选择器。

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

但是,有两件事。

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

谁能提出在 Asp.Net Core 2.1 中实现此要求的最佳方法?

今天早上我又回到了这个问题,结果证明最终实施起来很直接。

我只需要将 "in" class 添加到 _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>
    ...