Я использую 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>