Tagged: JQuery

4

Lazy loading of Images in ASP.Net MVC with RouteHandler and JQuery

In this short tutorial, I am going to narrate on how you can lazy load images in a ASP.Net MVC 4 page. In most of todays social media sites, we often come across lots and lots of images which kill most of the bandwidth unnecessarily. So keeping to optimize the rendering of images only ON DEMAND would be a good solution in both bandwidth optimization and performance perspectives.

In the code below, I am going to demonstrate on how to create a specific Route Handler in ASP.Net MVC 4, which returns an instance of HttpHandler. HttpHandler is going to serve image to the client browser, but to make client browser not to understand actual image URL, we have used Route Handler. Later we use JQuery LazyLoad plugin to get images only on demand i.e., only on focus. We have wide range of effects and different configuration on LazyLoad plugin, but I am settling for simple fade effect for making this tutorial simple and elegant.

13

JQuery POST & GET Request to WCF Service in ASP.Net MVC

In this Demo, we see how to call a Wcf Service Method from JQuery. We make POST and GET Request for the same Service.

We have a ASP.Net MVC Webform, it only consists of html Controls. We have a simple Registration form, which takes User Name and User Email. Once We client the Submit Hyperlink, JQuery will make a POST request to the WCF Service, which will add the data to our Users List.

To retrieve the data, we have a simple Html Text Input, in which we fill the User Name. Once we give the input and click Retrieve Link, JQuery makes a GET Request to WCF Service, which searches the List of users and send back the Data to browser. We Display result in the Div tag.

2

JQuery Quickies #2 – LightBox Plugin by Leandro Vieria Pinho

In this tutorial, I create a sample Database “Example” with a table “Images” which holds the information about images like ImageName, ImageDescription and ImagePath. Then I use a SqlDataSource in combination with Repeater to display the images from the database onto the page. Here we use LightBox plugin to open up a modalpopup window with the details of the image (shown in modalpopup) along with the flexibility of navigating between images without closing the modalpopup.

32

JQuery Quickies #1 – GalleryView Plugin by Jack Anderson

In this tutorial, I create a sample Database “Example” with a table “Images” which olds the information about images like ImageName, ImageDescription and ImagePath. Then I use a SqlDataSource in combination with Repeater to display the images from the database onto the page. Here we use GalleryView to make the slideshow of images in the repeater along with display of the particular image which is in focus.