时间戳

首页 > 解决方案 > 通过信号器从部分视图发送消息

c# - 通过信号器从部分视图发送消息

问题描述

在我的剃须刀页面应用程序中，我需要从部分视图发送消息。我使用信号器。我的剃须刀页面：

@page 
@model Pokerweb.Pages.GamePageModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

<div id="grid"></div>

<script>

    $(function () {
        $('#load').on('click', function () {
            $('#grid').load('/GamePage?handler=PlayersPartial');
        });
    });
</script>

部分的：

@using Pokerweb.Models
@model Room

<h3>@Model.Sum</h3>

<table class="table table-striped">
    @foreach (var player in Model.Players)
    {
        <tr>
            <td>@player.PlayerName</td>
            <td>@player.Money</td>
        </tr>
    }
</table>

<input type="range" min="1" max="100" value="50" class="slider" id="myRange">

<button class="btn btn-primary" id="sendButton">Send</button>

聊天.js：

"use strict";

window.onload = function () {

    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    connection.on("ReceiveMessage", function () {
        $(function () {
            $('#grid').load('/GamePage?handler=PlayersPartial');
        });
    });

    connection.start().then(function () {
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });

    document.getElementById("sendButton").addEventListener("click", function (event) {
        connection.invoke("SendMessage").catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
};

通过 sendButton 单击我想要火脉冲，它在数据库中提供了一些更改，最后它为某些用户刷新了部分视图。因为结果应该是玩扑克的网页。几乎所有的事情都发生在一个房间的玩家之间。所以我想触发在chathub中对数据库做一些事情的冲动，然后向一个房间里的一群人发送空消息，以更新从更新的数据库生成的部分视图。

我的问题是，这里的代码没有发送按钮工作。应该是因为在构建发送按钮之前执行了js。我尝试了很多方法来解决这个问题，但没有一个有效。所以我需要得到有效的解决方案。谢谢大家的重播，对不起我的英语。

标签： c#asp.netasp.net-coresignalrrazor-pages

解决方案

一个问题似乎是<button>当您尝试使用 选择它时该元素没有退出document.getElementById("sendButton")。您应该在加载部分后尝试附加处理程序，例如：

"use strict";

function appendHandlers() {
    document.getElementById("sendButton").addEventListener("click", function (event) {
        connection.invoke("SendMessage").catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
}

window.onload = function () {

    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    connection.on("ReceiveMessage", function () {
        $(function () {
            $('#grid').load('/GamePage?handler=PlayersPartial').then(appendHandlers);
        });
    });

    connection.start().then(function () {
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });
};

推荐阅读