- Details
- Written by: Stanko Milosev
- Category: Core
- Hits: 999


using System.Threading; using Microsoft.AspNetCore.SignalR; namespace SignalRProgressBar.Hubs { public class ProgressHub : Hub { public string msg = "Initializing and Preparing..."; public int count = 100; public void CallLongOperation() { for (int x = 0; x <= count; x++) { // delay the process to see things clearly Thread.Sleep(100); if (x == 20) msg = "Loading Application Settings..."; else if (x == 40) msg = "Applying Application Settings..."; else if (x == 60) msg = "Loading User Settings..."; else if (x == 80) msg = "Applying User Settings..."; else if (x == 100) msg = "Process Completed!..."; string myMessage = string.Format(msg + " {0}% of {1}%", x, count); Clients.All.SendAsync("ReceiveMessage", myMessage); } } } }In Startup.cs in the method ConfigureServices I added SignalR:
public void ConfigureServices(IServiceCollection services) { services.AddSignalR(); }In EndPoints I added Hub:
app.UseEndpoints(endpoints => { endpoints.MapHub<ProgressHub>("/progressHub"); });Then I added wwwroot folder, and support for static files as I already explained here After that I added index.html page in wwwroot folder, and I added Signalr JavaScript using client library:


<script defer src="aspnet-signalr/signalr.min.js"></script>In folder js I have added my Javascript file, which look like this:
var connection = new signalR.HubConnectionBuilder().withUrl("../progressHub").build(); connection.start().then(function () { connection.invoke("CallLongOperation").catch(function (err) { return console.error(err.toString()); }); }); connection.on("ReceiveMessage", function (message) { document.getElementById('progressbar').value = document.getElementById('progressbar').value + 1; document.getElementById('progressbarText').innerText = message; });My html looks like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script defer src="aspnet-signalr/signalr.min.js"></script> <script defer src="js/progress.js"></script> </head> <body> <div style="width: 30%; margin: 0 auto;"> <label id="progressbarText" style="font-family: Tahoma; font-size: 0.9em; color: darkgray; margin-top: 230px; padding-bottom: 5px; display:inline-block" for="progressbar"> Initializing and Preparing... </label> <br /> <progress id="progressbar" value="1" max="100"></progress> </div> </body> </html>Notice line in controller:
Clients.All.SendAsync("ReceiveMessage", myMessage);and line in Javascript:
connection.on("ReceiveMessage", function (message) { document.getElementById('progressbar').value = document.getElementById('progressbar').value + 1; document.getElementById('progressbarText').innerText = message; });This is how SignalR communicates with client and server using WebSocket. Method name on both sides has to be the same. Example download from here
- Details
- Written by: Stanko Milosev
- Category: Core
- Hits: 1395
using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Hosting; namespace Radius { public class Startup { // This method gets called by the runtime. Use this method to add services to the container. // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940 public void ConfigureServices(IServiceCollection services) { services.AddControllers(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseHttpsRedirection(); app.UseDefaultFiles(); app.UseStaticFiles(); app.UseRouting(); app.UseCors(); app.UseEndpoints(endpoints => { endpoints.MapControllers(); }); } } }
- Details
- Written by: Stanko Milosev
- Category: Core
- Hits: 1375
<!DOCTYPE html> <head> <meta charset="utf-8" /> <script defer type="text/javascript" src="lib/jquery-3.5.1.js"></script> <script defer type="text/javascript" src="js/index.js"></script> </head> <body> <button id="button" type="button">Click Me!</button> </body>index.js:
$( "#button" ).click(function() { var json = JSON.stringify({"cities": ["Aurel Vlaicu", "Asquins", "Arnoldstein"]}); $.ajax({ url: "api/Empty/", type: "POST", data: json, dataType: "json", contentType: "application/json; charset=utf-8", success: function (data) { alert("Success."); } }).done(function (data) { try { json = $.parseJSON( JSON.stringify(data)); } catch (e) { alert("Error not JSON. " + e.message) } }).error(function (xhr, ajaxOptions, thrownError) { alert("Error."); }).fail(function (data) { alert("Sorry. Server unavailable. "); }); });.NET side:
[HttpPost] public ActionResultNotice that in "$.ajax.done" I added try..catch block, and JSON.stringify because of dataType: "json" jQuery will automatically parse string into JSON.Get([FromBody] Filter filter) { string returnValue = string.Empty; foreach (var city in filter.cities) { returnValue = $"{city}, {returnValue}"; } return Ok(JsonSerializer.Serialize(returnValue)); }
- Details
- Written by: Stanko Milosev
- Category: Core
- Hits: 1696
<!DOCTYPE html> <head> <meta charset="utf-8" /> <script defer type="text/javascript" src="lib/jquery-3.5.1.js"></script> <script defer type="text/javascript" src="js/index.js"></script> </head> <html xmlns="http://www.w3.org/1999/xhtml"> <button id="button" type="button">Click Me!</button> </html>index.js:
$( "#button" ).click(function() { var json = JSON.stringify({"cities": ["Aurel Vlaicu", "Asquins", "Arnoldstein"]}); $.ajax({ url: "api/Empty/", type: "POST", data: json, contentType: "application/json; charset=utf-8" }).done(function (data) { alert("Success."); }).fail(function (data) { alert("Sorry. Server unavailable. "); }); });Asp.Net core API:
using Microsoft.AspNetCore.Mvc; namespace AspDotNetCorePostExample.Controllers { [Route("api/[controller]")] [ApiController] public class EmptyController : ControllerBase { [HttpGet] public string Get() { return "Hello world"; } [HttpPost] public string Get([FromBody] Filter filter) { string returnValue = string.Empty; foreach (var city in filter.cities) { returnValue = $"{city}, {returnValue}"; } return returnValue; } public class Filter { public string[] cities { get; set; } } } }Notice in jQuery that in Ajax call I didn't add dataType: "json" since my API returns string and not JSON. In API notice [FromBody] in method signature, and Filter class which is defined exactly the same as JSON var json = JSON.stringify({"cities": ["Aurel Vlaicu", "Asquins", "Arnoldstein"]}); which I am sending to API. Example download from here