自定义警报标签助手未显示在实时服务器上答案

【问题标题】：Custom Alerts Tag Helper not displaying on live server自定义警报标签助手未显示在实时服务器上
【发布时间】：2020-07-20 18:18:49
【问题描述】：

我使用以下指南在我的 .NET 2.2 应用程序中实现了一个自定义警报系统：https://www.matheus.ro/2017/12/18/how-to-create-a-simple-alert-system-using-tag-helpers-in-asp-net-core-mvc/

当我在本地运行它时效果很好，但是我昨晚部署到 Azure 上的实时服务器并注意到没有出现任何警报。

这可能是什么原因？我不确定如何有效地调试这个问题。

AlertsTagHelper.cs：

    [HtmlTargetElement("alerts")]
    public class AlertsTagHelper : TagHelper
    {
        private const string AlertKey = "SEPMTool.Alert";
        [ViewContext]
        public ViewContext ViewContext { get; set; }
        protected ITempDataDictionary TempData => ViewContext.TempData;
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "div";
            if (TempData[AlertKey] == null)
                TempData[AlertKey] = JsonConvert.SerializeObject(new HashSet<Alert>());
            var alerts = JsonConvert.DeserializeObject<ICollection<Alert>>(TempData[AlertKey].ToString());
            var html = string.Empty;
            foreach (var alert in alerts)
            {
                html += $"<div class='alert {alert.Type}' id='inner-alert' role='alert'>" +
                            $"<button type='button' class='close' data-dismiss='alert' aria-label='Close'>" +
                                $"<span aria-hidden='true'>&times;</span>" +
                            $"</button>" +
                            $"{alert.Message}" +
                        $"</div>";
            }
            output.Content.SetHtmlContent(html);
        }
    }

AlertExtensions.cs：

public static class AlertExtensions
    {
        private const string AlertKey = "SEPMTool.Alert";
        public static void AddAlertSuccess(this Controller controller, string message)
        {
            var alerts = GetAlerts(controller);
            alerts.Add(new Alert(message, "alert-success"));
            controller.TempData[AlertKey] = JsonConvert.SerializeObject(alerts);
        }
        public static void AddAlertInfo(this Controller controller, string message)
        {
            var alerts = GetAlerts(controller);
            alerts.Add(new Alert(message, "alert-info"));
            controller.TempData[AlertKey] = JsonConvert.SerializeObject(alerts);
        }
        public static void AddAlertWarning(this Controller controller, string message)
        {
            var alerts = GetAlerts(controller);
            alerts.Add(new Alert(message, "alert-warning"));
            controller.TempData[AlertKey] = JsonConvert.SerializeObject(alerts);
        }
        public static void AddAlertDanger(this Controller controller, string message)
        {
            var alerts = GetAlerts(controller);
            alerts.Add(new Alert(message, "alert-danger"));
            controller.TempData[AlertKey] = JsonConvert.SerializeObject(alerts);
        }
        private static ICollection<Alert> GetAlerts(Controller controller)
        {
            if (controller.TempData[AlertKey] == null)
                controller.TempData[AlertKey] = JsonConvert.SerializeObject(new HashSet<Alert>());
            ICollection<Alert> alerts = JsonConvert.DeserializeObject<ICollection<Alert>>(controller.TempData[AlertKey].ToString());
            if (alerts == null)
            {
                alerts = new HashSet<Alert>();
            }
            return alerts;
        }
    }

Alert.cs：

public class Alert
    {
        public string Message;
        public string Type;

        public Alert(string message, string type)
        {
            Message = message;
            Type = type;
        }
    }

_Layout.cshtml

@using Microsoft.AspNetCore.Hosting
@inject IHostingEnvironment HostingEnvironment

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="description" content="A Software Engineering Project Management Tool by Ben Hayward">
    <title>@ViewBag.Title</title>
    <link href="~/assets/img/favicon.ico" rel="icon" type="image/x-icon">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Gothic+A1" rel="stylesheet">
    <link href="~/dist/assets/css/theme.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
    <div class="layout layout-nav-side">
        <partial name="_LoginPartial" />
        <div class="main-container">
            <div id="mainContent" v-cloak>
                <partial name="_BreadcrumbBarPartial" />
                <alerts></alerts>
                @RenderBody()
            </div>
        </div>
    </div>

    <script type="text/javascript" src="~/assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="~/assets/js/popper.min.js"></script>
    <script type="text/javascript" src="~/dist/assets/js/bootstrap.js"></script>

    <script type="text/javascript" src="~/assets/js/autosize.min.js"></script>
    <script type="text/javascript" src="~/assets/js/flatpickr.min.js"></script>
    <script type="text/javascript" src="~/assets/js/prism.js"></script>
    <script type="text/javascript" src="~/assets/js/draggable.bundle.legacy.js"></script>
    <script type="text/javascript" src="~/assets/js/swap-animation.js"></script>
    <script type="text/javascript" src="~/assets/js/dropzone.min.js"></script>
    <script type="text/javascript" src="~/assets/js/list.min.js"></script>

    <!-- Required theme scripts (Do not remove) -->
    <script type="text/javascript" src="~/dist/assets/js/theme.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script src="~/build/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)

    <script>
    var app = new Vue({
        el: "#mainContent",
        mixins: vueMixins
    });
    @if (HostingEnvironment.IsDevelopment())
    {
        @:Vue.config.devtools = true;
    }
    </script>

</body>
</html>

_ViewImports.cshtml：

@using SEPMTool
@using SEPMTool.Models
@addTagHelper *, SEPMTool
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper "*, cloudscribe.Web.Pagination"

控制器中的警报触发器：

            if (await _context.SaveChangesAsync() > 0)
            {
                this.AddAlertSuccess($"{projectTask.TaskName} was created successfully");
                return RedirectToAction("Details", new { id = projectTask.ProjectId });
            }

【问题讨论】：

浏览器控制台是否出现错误？
你是如何触发这个警报的？
@PankajRawat 对不起，我忘了包括警报是如何触发的，我现在已经编辑了帖子，触发器位于底部。另外，我在浏览器上没有收到任何错误
应用部署在单个应用服务还是多个（VMS客户）上？
部署在单个 Azure 应用服务上

标签： c# asp.net-mvc twitter-bootstrap azure

【解决方案1】：

我找到了这个问题的解决方案，它是由需要同意 cookie 引起的，任何人都无法接受它。

归功于：@Smurtagh

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

【讨论】：

【解决方案2】：

当应用程序部署在多台服务器上时，在这种情况下，应用程序可能不会一直显示消息。以上代码使用 tempData

TempData 在内部使用会话变量来存储请求之间的数据。会话数据将存储在单个服务器上。然后你必须确保一个用户的所有请求都应该在同一台服务器上。检查 Azure 应用服务级别或负载均衡器级别中的会话关联/ARR 关联设置。

【讨论】：

ARR 亲和性设置为“开”，我将其设置为“关”并重新启动应用，不幸的是，问题仍然存在。