Search code examples
asp.net-mvc-5signalr-hubjquery-ajaxq

SignalR Hub method mapping mvc 5 serverside method


I developing an asp.net mvc 5 application where I need to use signalR. I have created the hub and I was able to connect with the hub. Now the main problem I'm facing how to map serverside methods with the hub. I am totally new with signalR if any can help me that will be a great help for me. Here is my code :

HUB:

 [HubName("statusLog")]
public class StatusLogHub : Hub
{

    [HubMethodName("sendExportStatus")]
    public void SendExportStatus()
    {
        IHubContext context = GlobalHost.ConnectionManager.GetHubContext<StatusLogHub>();
        Clients.All.updateStatus();
    }
}

Repository : 

public class EmailStatusLogRepository
{
    EMailDBContext _ctx = new EMailDBContext();
//I need to show this lstEmailStatus list in real time.        
    public IEnumerable<EmailStatusLog> GetExportStatus()
    {
        var lstEmailStatus = _ctx.emailStatusLogs.Where(x => x.IsActive == true && x.Date ==    DateTime.Now.ToString()).ToList();
        return lstEmailStatus;
    }

}


Controller :

public ActionResult GetExportStatus()
    {
        EmailStatusLogRepository objEmailStatusRepository = new EmailStatusLogRepository();
        return PartialView("_exportedReportList", objEmailStatusRepository.GetExportStatus());
    }

View:

 $("#btnExportStatus").click(function () {

            $.ajax({
                url: '@Url.Action("GetExportStatus")',
                contentType: 'application/html ; charset:utf-8',
                type: 'GET',
                dataType: 'html'
            }).success(function () {
                var connection = $.hubConnection();
                var hub = connection.createHubProxy("statusLog");
                hub.on("updateStatus", function (statusUpdated) {
                    $('#hitCountValue').text(statusUpdated);
                });

            });
            // Declare a proxy to reference the hub.

        });


    function getExportStatus() {
        var tbl = $('#statusTable');
        $(function (result) {
            tbl.empty().append(result);
        }).error(function () {

        });
    };

Solution

  • Suppose you want to create a hub connection in your CreateHubConnection server side method, then you should do something like this-

    public void CreateHubConnection()
    {
       StatusLogHub hub = new StatusLogHub ();
       hub.SendExportStatus();
    }
    

    Now in your hub method do whatever you want to do. Hope this will help you.

    Edit

    and in your client side-

    • first add all the SignalR libraries like-

      <script src="Scripts/jquery-1.6.4.min.js"></script>
      <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
      <script src="signalr/hubs"></script>
      

      And then create the connection and call the client method-

      <script type="text/javascript">
      $(function () {
          var log = $.connection.statusLog;
          $.connection.hub.start();
          //here we are calling the hub client method
          log.client.updateStatus = function () {
              //do whatever you want to
          };
      });
      </script>