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.
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:
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>