Book Image

ASP.NET jQuery Cookbook

By : Sonal Aneel Allana
Book Image

ASP.NET jQuery Cookbook

By: Sonal Aneel Allana

Overview of this book

<p>jQuery is a powerful, lightweight JavaScript library that simplifies various web development tasks. With the integration of jQuery with Visual Studio 2010, it has become increasingly popular for ASP.NET developers to use jQuery's awesome power in their applications. Combining jQuery and ASP.NET creates applications that are anything but lightweight. Using this Cookbook you will become adept at using this library in your ASP.NET web applications.</p> <p>This cookbook shares the most powerful, impressive, and just plain handy jQuery secrets for ASP.NET developers. From substitute server-side code to corresponding client script, it shows ASP.NET developers how to get the most from jQuery in a simple, effective, and easy manner.</p> <p>The cookbook takes a pragmatic approach in applying the jQuery library to ASP.NET applications. It will help you to master the use of jQuery with ASP.NET by taking you step-by-step through hands-on, practical recipes. With its help, you can learn to manipulate various ASP.NET controls like TextBox, CheckBoxList, DropDownList, BulletedList, Hyperlink, Image, and GridView as well as custom user controls. The book teaches client validation techniques thus providing a substitute for the server-side Validation Control. It explores various graphic and animation effects that can be accomplished very easily with the library to give a better interactive experience to the end user. It explores AJAX in depth and describes the use of Firebug to view / troubleshoot the corresponding request / response dialog. You will also learn to develop rich content using client scripting.</p>

Related Content you might be interested in

Current Title:

Small book image
ASP.NET jQuery Cookbook
Sonal Aneel Allana
Apr, 2011 | 308 pages
No titles found
Table of Contents (15 chapters)
ASP.NET jQuery Cookbook
ASP.NET jQuery Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Working with ASP.NET Controls
Working with ASP.NET Controls
Introduction
Creating default text for TextBoxes
Auto focus on the first TextBox and tab on the Enter key
Disallowing cut/copy/paste operations on a TextBox
Highlighting text in a TextBox and copying to the clipboard
Displaying selected items of a CheckBoxList
Selecting/deselecting all items in CheckBoxList
Getting selected text and value from DropDownList
Appending items at runtime to a DropDownList
Creating 'Back to Top' ASP.NET hyperlink
Updating URL of ASP.NET hyperlink at runtime
2
Validation of ASP.NET Controls
Validation of ASP.NET Controls
Introduction
Getting started
Validation of a sample user login form
Validation of basic field types in a user profile form
Character limit validation in Multiline ASP.NET TextBox
Validation of date range in ASP.NET Form
Validation of ASP.NET CheckBoxList
Validation of ASP.NET RadioButtonList
Validation of ASP.NET ListBox Control
Validation of ASP.NET DropDownList Control
3
Working with GridView Control
Working with GridView Control
Introduction
Highlighting rows/cells of a GridView on hover
Removing GridView rows/cells on click
Removing a GridView column on clicking the header
Dragging and dropping GridView rows
Changing cursor style for selective rows of a GridView
Formatting a GridView and applying animation effect
Retrieving the content of a GridView cell on click
4
Working with Image Control
Working with Image Control
Introduction
Adding/removing hyperlinks on images
Displaying image captions
Changing image opacity on mouseover
Viewing enlarged images on mouseover on thumbnail
Swapping images on a page
Cropping images on a page
Creating an image gallery viewer
Zooming images on mouseover
5
Animations in ASP.NET
Animations in ASP.NET
Introduction
Enlarging text on hover
Creating a fade effect on hover
Sliding elements on a page
Preventing animation queue buildup
Animating a panel
Chaining animations together
Hiding and displaying panels
Creating disappearing effect
6
AJAX and ASP.NET (Part I)
AJAX and ASP.NET (Part I)
Introduction
Setting up AJAX with ASP.NET using jQuery
Using Firebug to view AJAX request/response
Consuming page methods with AJAX
Consuming web services with AJAX
Populating ASP.NET DropDownList using AJAX
Creating an auto complete search box
7
AJAX and ASP.NET (Part II)
AJAX and ASP.NET (Part II)
Introduction
Displaying a progress indicator during AJAX calls
Reading XML data with AJAX
Catching and displaying AJAX errors
Using AJAX to load scripts in web pages
Cross site AJAX querying using jQuery
Using complex data types with AJAX
8
Client Templating in jQuery
Client Templating in jQuery
Introduction
Using jQuery Templates to display data
Displaying arrays using nested templates
Calling JavaScript functions and conditional statements in templates
Creating an ASP.NET CheckBoxList in templates
Using templates to format data returned from web services
Using callback functions with jQuery templates
Calling external templates using jQuery
Index
Index

Viewing enlarged images on mouseover on thumbnail

In this recipe, let's see how to view enlarged images on mouseover on the thumbnails.

Getting ready

  1. Add a new web form Recipe4.aspx to the current project.

  2. Add a couple of Image controls to the page. Define a css class thumbnail as shown next and set the CssClass of the Image controls to this class:

    .thumbnail
    {
      position:relative;
      width:100px;
      height:68px;
      
    }

  3. Create a div area below the Image controls where we will display the enlarged image:

    <div id="imgContainer" ></div>

  4. Create a css style for the enlarged image as follows:

    .image
    {
      position:relative;
      width:400px;
      height:250px;
    }

Thus, the complete ASPX markup for the form is as follows:

<form id="form1" runat="server">
    <div align="center">
    <fieldset style="width:600px;height:390px;">
    <table border="0" cellpadding="3" cellspacing="3">
       <tr><td colspan="2" class="header">MOUSEOVER...
Previous Section
End of Section 6
Next Section