|||

A simple image carousel prototype using Asp.net webforms and SignalR

If you are like and you were give a scenario” where you had to design an online carousel which would show some images stored on the application server then you might find this demo useful . There are many different ways to create such an application and a typical method that comes to mind when brainstorming is to create an Asp.Net MVC app which has a razor template that has a place holder for these images. The browse initiates a request for these images by a click of a button, a full server postback is performed which invokes some controller in the application which renders our razor template in the view with the place holders resolved as img tags pointing to these images on our server. The HTML response will also have the required css and js files to create the carousel animation.

I’ve been using SignalR lately in a few projects and love the simplicity of this library. It makes it so darn easy to invoke the client side code from the server side and vice versa. So i decided to whip up a quick demo.

The basic idea with the prototype is:

  • Create a signalr hub which knows the location of all the images on the server.

  • Implement a method on the hub which collects all the images and performs a base64string conversion on them and serializes these base64 encoded strings as an array to the client (in this case a client side javascript)

  • On the client side start the signalr hub in the document.ready, register a callback javascript function (this is the function which our server side code would call)

  • register the click event of the Get Images button on the client side which would invoke our server code to perform steps 1 and 2 above.

Here is what the final output looks like:

screenshot

Attached is the full source code of the implementation.


<div 
    id="scid:fb3a1972-4489-4e52-abe7-25a00bb07fdf:85fd7707-45d5-4b17-86b3-fe204497974f" 
    class="wlWriterEditableSmartContent" 
    style="float: none; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px">
    
</div>

Up next Simple logging with NLog Application logger Sharing common connection strings between projects
Latest posts Refactor react code to use state store instead of multiple useState hooks Notes on Python Threat Modelling - Using Microsoft STRIDE Model WCAG - Notes Flutter CI/CD with Azure Devops & Firebase - iOS - Part 1 Flutter CI/CD with Azure Devops & Firebase - Android - Part 2 How to samples with AWS CDK A hashicorp packer project to provision an AWS AMI with node, pm2 & mongodb Some notes on Zeebe (A scalable process orchestrator) Docker-Compose in AWS ECS with EFS volume mounts Domain Driven Design Core Principles Apple Push Notifications With Amazon SNS AWS VPC Notes Building and Deploying apps using VSTS and HockeyApp - Part 3 : Windows Phone Building and Deploying apps using VSTS and HockeyApp - Part 2 : Android Building and Deploying apps using VSTS and HockeyApp - Part 1 : iOS How I diagnosed High CPU usage using Windbg WCF service NETBIOS name resolution woes The troublesome Git-Svn Marriage GTD (Getting things done) — A simplified view Javascript Refresher Sharing common connection strings between projects A simple image carousel prototype using Asp.net webforms and SignalR Simple logging with NLog Application logger SVN Externals — Share common assembly code between solutions Simple async in .net 2.0 & Winforms Clean sources Plus Console 2 — A tabbed console window