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