Как запустить метод концентратора KendoUI SignalR из успешной отправки формы Ajax? - PullRequest
0 голосов
/ 14 апреля 2020

Я использую KendoUI для ASP. NET Ядро и Сетка, которая имеет возможность SignalR. Если пользователь отправляет стандартную форму в приложении, запускается метод обновления контроллера-концентратора, и можно увидеть обновление данных в реальном времени, у меня проблема в том, что формы на сайте в основном Ajax Ненавязчивые формы.

У меня вопрос: как запустить метод концентратора «Обновление» после успешной отправки формы? Я посмотрел в Интернете, и было предложение, что вы должны invoke метод хаба, однако я не мог заставить этот подход работать. Вот мой код, пожалуйста, помогите:

Концентраторы / productsHub.cs

namespace MyProject.UI.Hubs
{
    public class ProductsHub : Hub
    {
        private readonly IProductsService _productsService;
        public ProductsHub(IProductsService productsService)
        {
            _productsService = productsService;
        }

        public override Task OnConnectedAsync()
        {
            Groups.AddToGroupAsync(Context.ConnectionId, GetGroupName());
            return base.OnConnectedAsync();
        }
        public override Task OnDisconnectedAsync(Exception e)
        {
            Groups.RemoveFromGroupAsync(Context.ConnectionId, GetGroupName());
            return base.OnDisconnectedAsync(e);
        }
        public IEnumerable<Products> Read()
        {
            var data = _productsService.GetProducts();
            return data;
        }
        public Products Create(Products product)
        {
            Clients.OthersInGroup(GetGroupName()).SendAsync("create", product);
            return product;
        }
        public void Update(Products product)
        {
            _productsService.UpdateProduct(product);
            Clients.All.SendAsync("update", product);
        }
        public void Destroy(Products product)
        {
            Clients.OthersInGroup(GetGroupName()).SendAsync("destroy", product);
        }
        public string GetGroupName()
        {
            return GetRemoteIpAddress();
        }

        public string GetRemoteIpAddress()
        {
            return Context.GetHttpContext()?.Connection.RemoteIpAddress.ToString();
        }
    }
}

Вот код для сетки кендо, обратите внимание, что я использую настройка помощника по тегам для этого, которая в настоящее время не имеет метода определения источника данных, который будет использоваться с SignalR в качестве транспорта, по этой причине источник данных сетки хранится в файле javascript.

Index.cs html

<kendo-grid name="liveProducts" datasource-id="liveProductsDataSource">
    <columns>                                        
        <column field="title" title="Title" />
        <column field="shortdescription" title="Description" />
        <column field="price" title="Price" />                                        
    </columns>
</kendo-grid>

site. js

var productsHub = new signalR.HubConnectionBuilder().withUrl("/productsHub", { transport: signalR.HttpTransportType.LongPolling }).build();

var hubStart = productsHub.start();

var liveProductsDataSource = new kendo.data.DataSource({
    type: "signalr",
    autoSynce: true,
    schema: {
        model: {
            id: "Id",
            fields: {
                "Id": { editable: false, nullable: true }
            }
        }
    },
    transport: {
        signalr: {
            promise: hubStart,
            hub: productsHub,
            server: {
                read: "read",
                update: "update",
                destroy: "destroy",
                create: "create"
            },
            client: {
                read: "read",
                update: "update",
                destroy: "destroy",
                create: "create"
            }
        }
    }
});

Вот функция onSuccess, которая запускается при успешной отправке формы, именно здесь я ожидаю активировать метод обновления концентратора, чтобы SignalR знал, что что-то изменилось. Этот метод не работал, так как я пытался использовать invoke, но я не уверен, что использовал его правильно.

function onSuccess(e) {
    productsHub.Invoke("update");
}

Ради хорошего порядка, вот код для моей формы также.

@model Products
@{
    ViewData["Title"] = "Form";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="dashboard">
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>@ViewData["Title"]</h1>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <form method="post" data-ajax-url="Test/AddProduct" data-ajax="true" data-ajax-method="post" data-ajax-success="onSuccess" data-ajax-failure="onFail" data-ajax-update="onUpdate">
                    <div class="form-group">
                        <label asp-for="Title"></label>
                        <input type="text" asp-for="Title" required class="form-control" />
                    </div>

                    <div class="form-group">
                        <label asp-for="Price"></label>
                        <input type="number" asp-for="Price" required class="form-control" />
                    </div>

                    <div class="form-group">
                        <label asp-for="StockLevel"></label>
                        <input type="number" asp-for="StockLevel" required class="form-control" />
                    </div>

                    <div class="form-group">
                        <input type="checkbox" asp-for="ShowOnWeb" class="form-control form-check-inline" />
                        <label asp-for="StockLevel" class="form-check-label"></label>
                    </div>

                    <div class="form-group">
                        <input type="checkbox" asp-for="OfferOnWeb" class="form-control form-check-inline" />
                        <label asp-for="OfferOnWeb" class="form-check-label"></label>
                    </div>

                    <div class="form-group">
                        <input type="checkbox" asp-for="FeatureOnWeb" class="form-control form-check-inline" />
                        <label asp-for="FeatureOnWeb" class="form-check-label"></label>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-dark">Submit</button>
                    </div>
                </form>
            </div>               
        </div>
    </div>
</div>
...