Real Time Product Section

Product section of store that updates in real time.

Software Used

  • MVC5
  • SignalR
  • Bootbox
  • DataTables
  • Entity Framework

Setup

SignalR

> Install-Package Microsoft.AspNetCore.SignalR

Bootbox

> Install-Package Bootbox -version:4.3.0

DataTables

> Install-Package jquery.DataTables -version:1.10.11

Entity Framework

> Enable-Migrations
> Add-Migration [ModelName]

Overview

This project uses SignalR to create a real-time web application with ASP.NET MVC5. The product section updates every time a product is deleted. To display products it uses DataTables for pagintation, and bootbox for displaying on screen messages.

Screenshot

Enable SignalR

  1. Startup.cs
using Microsoft.Owin;
using Owin;


[assembly: OwinStartupAttribute(typeof(RealTimeProducts.Startup))]
namespace RealTimeProducts
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
            ConfigureAuth(app);
        }
    }
}
  1. _Layout.cshtml
@Scripts.Render("~/bundles/lib")
<script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
<script src="~/signalr/js"></script>
@RenderSection("scripts", required: false)
  1. index.cshtml (Product)
$.connection.hub
  .start()
  .done(function () {
    console.log("SignalR: Connected");
  })
  .fail(function () {
    alert("Error!");
  });


$.connection.myHub.client.announce = function (message) {
  console.log(message);
  location.reload();
};
Real Time StoreWeather Bot
© JosueDLA 2023