Search code examples
ajaxasp.net-core-2.0syncfusion

Notifying clients from (boxed) Syncfusion Ajax call

I'm trying to integrate the schedule component from Syncfusion. The component has a URL adaptor to connect to the controller; GetData() and Batch() for Crud Operations. Batch has a payload indicating what actions to perform. At the end, the Batch method would requery the database and send data identical to GetData() back. Unfortunately, there is no built-in method to notify clients of anything going wrong - whether there is an exception, server-side validation kicks in or similar. What I'd like to do is to add a placeholder outside the compentent to receive and display server messages (be it a notification popup, a or whatever. Since I can't influence the Ajax call itself, I was wondering if I had to get started with SignalR (still in beta for .Net Core 2 as far as I know), or if I may have missed something more obvious? I have read a lot about push notifications etc - but these are not quite what I'm after, it'd be slightly over the top I think.

To summarise, let's say I have

<div id="messages"></div>
<div id="component">HereGoesTheScheduleWhichICantDoMuchWith</div>

Now in the Batch() method, it would be great to call a SendMessage("Sorry,you can't do this") - the text of which would ideally then appear in the messages-div. How would you go about this?

Solution

  • I have now solved this, using SignalR (currently 1.0.0-alpha2-final) and for a nice view on the Client, PNotify. Presently, it only works if the client is authenticated, if it needs to work anonymously you'd need to figure out a way to track SignalR's connection id.

    1. On the page with the Syncfusion Schedule component, I connect to SignalR.

      let connection = new signalR.HubConnection("/signalr", { transport: signalR.TransportType.ServerSentEvents });

      connection.on("Notify", (title, message) => { new PNotify({ title: title, text: message }); }); connection.start();

    2. The Hub (SignalRHub : Hub) creates a notification group for the user connecting:

      public override Task OnConnectedAsync() { Groups.AddAsync(Context.ConnectionId, Context.User.Identity.Name);
      return base.OnConnectedAsync(); }

    3. The associated controller gets IHubContext<SignalRHub> signalRHub injected.

    4. Now in the Batch-Method for the Syncfusion component, which returns Json and can't itself carry messages or notifications, you can notify the user:

      _signalRHub.Clients.Group(User.Identity.Name).InvokeAsync("Notify", "A title", "A message");

    In my particular case, I'm sending over an object to control layout, animation and popup duration for PNotify (e.g. longer for an exception to allow copy/paste etc) - as you please. Returning an object could be done using:

    _signalRHub.Clients.Group(User.Identity.Name).InvokeAsync("Notify", JsonConvert.SerializeObject(new { title = "Some Title", message = "notification", type = "notice"}););

    Obviously, connection.on("Notify"... needs to be changed accordingly.

    I hope this is clear enough and might help someone else.