单击按钮时如何在另一个页面中弹出引导警报答案

【问题标题】：How to make bootstrap alert popup in another page when clicking on a button单击按钮时如何在另一个页面中弹出引导警报
【发布时间】：2021-04-07 00:13:22
【问题描述】：

我正在尝试创建一个管理页面，如果我单击“发送”按钮，则会发送消息，并且会在员工页面上弹出引导警报。我已经设置了引导警报，第一次显示消息。关闭并再次发送消息后，我没有看到任何警报。我认为当我单击发送按钮时需要触发它，但我正在为如何做到这一点而苦苦挣扎。希望任何人都可以告诉我一个简单的方法。这是管理页面发送的代码：

<form action="" method="post">
    <fieldset>
        <tr>
            <div class="form-group">
                <td>Send message</td>
                <input type="text" id="msg" name="Bericht"/>
            </div>

            <div class="form group">
                <button type="submit" id="sendButton"  asp-page-handler="Submit" >Send</button>
            </div>

        </tr>   
    </fieldset>

</form>

这是员工页面的代码，管理页面应该有一个弹出引导警报

<script src="~/lib/signalr.js"></script>

<script type="text/javascript">
// Start the connection.
var connection = new signalR.HubConnectionBuilder()
    .withUrl('/speedalarmhub')
    .build();


    connection.on('ReceiveMessage', function (message) {
                
                var encodedMsg = message;
                
                // Add the message to the page.
                
                document.getElementById("output").innerHTML = encodedMsg;
                
                

    });
    // Transport fallback functionality is now built into start.
    connection.start()
        .then(function () {

            console.log('connection started');
            connection.invoke('SendMessage');
        })
        .catch(error => {
            console.error(error.message);
        });
</script>

<div class=container>
    <div class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        <p id="output"></p>
    </div>
</div>

这是提交处理程序的代码

public void  OnPostSubmit(NotificationModel notif)
        {
            DateTime datenow = DateTime.Now;
            CreateNotification(datenow, notif.Bericht);
        
        }


        public void CreateNotification(DateTime convdayid, string Bericht) 
        {

            
            var cs = Database.Database.Connector();

            using var con = new NpgsqlConnection(cs);
            con.Open();

            var sql = "INSERT INTO notification(bericht, datumnu) VALUES(@Msg, @Date)";
            using var cmd = new NpgsqlCommand(sql, con);
            cmd.Parameters.AddWithValue("Msg", Bericht);
            cmd.Parameters.AddWithValue("Date", convdayid);
            
            

            cmd.Prepare();

            cmd.ExecuteNonQuery();
            con.Close();  
        }

【问题讨论】：

如果您要在跳转到新页面时弹出一些消息？好了，当前页面渲染结束，然后渲染新页面。一旦创建了该页面，它就会向下移动到浏览器端。这表明您必须设置一些持久值（可能是 session()），然后在新页面加载事件中，您要做的最后一件事是注入 JavaScript 以运行 + 显示弹出窗口。由于您将该页面留给另一个新页面，因此您确实无法使用客户端代码+服务器端代码在当前页面中触发客户端弹出窗口或消息。所以必须触发新页面。

标签： javascript html asp.net asp.net-core razor

【解决方案1】：

我正在尝试创建一个管理页面，如果我单击“发送”按钮，将发送消息，并且将在员工页面上弹出引导警报。

为了实现你向所有连接的用户（员工）推送通知，然后用接收到的数据更新客户端UI的需求，你可以参考下面的代码sn-p来修改你的项目。

通过将IHubContext 的实例添加到您的构造函数中，将其注入到管理页面模型类中

private readonly IHubContext<ChatHub> _hubContext;

public AdminPanelModel(IHubContext<ChatHub> hubContext)
{
    _hubContext = hubContext;
}

更新 CreateNotification 方法以向连接的客户端推送通知

public async Task CreateNotification(DateTime convdayid, string Bericht)
{
    //...
    //your code logic here
    //...

    await _hubContext.Clients.All.SendAsync("ReceiveMessage", $"{Bericht}");

测试结果

注意： 有关“从中心外发送消息”的更多信息，请查看此文档： https://docs.microsoft.com/en-us/aspnet/core/signalr/hubcontext?view=aspnetcore-5.0

【讨论】：