Question

我有一个页面，人们可以在其中创建笔记，它们通过ajax添加到页面中。每当创建新项目时，我都需要实现SignalR功能来更新页面。我不知道该怎么做的想法，任何帮助都会很高兴！

Answer 1

我有一个页面，人们可以在其中创建笔记，它们通过ajax添加到页面中。每当创建新项目时，我都需要实现SignalR功能来更新页面。

根据您的要求，我创建了以下示例，该示例对我而言效果很好，请参考。

集线器

public class ChatHub : Hub
{
    public async Task SendMessage(string user, string message)
    {
        await Clients.Others.SendAsync("NoteUpdateNotification", user, message);
    }
}

索引页

@model IEnumerable<NotesRTMSignalR.Models.NoteInfo>

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Description)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Author)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Title)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Description)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Author)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                    @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                    @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
                </td>
            </tr>

        }
    </tbody>
</table>

@section Scripts {
    <style>
        .newnote{
            background-color:yellow;
        }
    </style>


    <script>
        var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

        connection.on("NoteUpdateNotification", function (user, message) {
            console.log(user + " updated/added a note, the details is '" + message + "'");

            $("tr.newnote").removeClass("newnote");
            var note = JSON.parse(message);
            var tr = "<tr class='newnote'><td>" + note.Id +
                "</td><td>" + note.Title +
                "</td><td>" + note.Description +
                "</td><td>" + note.Author +
                "</td><td><a href=''>Edit</a> |<a href=''>Details</a> |<a href=''>Delete</a></td></tr>"

            $("tbody").append(tr);
        });

        connection.start().then(function () {
            console.log("connection started");
        }).catch(function (err) {
            return console.error(err.toString());
        });
    </script>
}

创建页面

<script>
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

    //connection.on("NoteUpdateNotification", function (user, message) {
    //    alert(user + " updated/added a note, the details is '" + message + "'");
    //});

    connection.start().then(function () {
        console.log("connection started");
    }).catch(function (err) {
        return console.error(err.toString());
    });

    $(function () {
        $("input[type='submit']").click(function (e) {

            var note = { "Id": $("input[id='Id']").val(), "Title": $("input[id='Title']").val(), "Description": $("input[id='Description']").val(), "Author": $("input[id='Author']").val() };
            //alert(JSON.stringify(note));
            $.ajax({
                url: "/Note/CreateNote",
                type: "POST",
                data: JSON.stringify(note),
                contentType: "application/json",
                success: function (res) {
                    connection.invoke("SendMessage", $("input[id='Author']").val(), JSON.stringify(note)).catch(function (err) {
                        return console.error(err.toString());
                    });

                    alert("Note Update/Add Notification Is Sent To Others");
                },
                failure: function (err) {

                }
            })
            e.preventDefault();
        })
    })
</script>

测试结果

注意：您可以先开始使用ASP.NET Core SignalR，然后根据您的方案和要求设置SignalR JavaScript客户端应用程序。

创建项目时页面更新

1 个答案: