ItemDataBound in ASP.NET

The ItemDataBound event is raised after an item or row is data bound to the DataGrid control. This event provides you with the last opportunity to access the data item before it is displayed on the client. After this event is raised, the data item is nulled out and no longer available.

Within the method, we check if the current row is a header or a footer row.To do this we use ListItemType enumeration. ListItemType enumeration contains different types of items(header, footer, item, alternating item etc.)

To identify Header: if (e.Item.ItemType == ListItemType.Header)
To identify Footer: if (e.Item.ItemType == ListItemType.Footer)
To identify Item: if (e.Item.ItemType == ListItemType.Item)
To identify AlternatingItem: if (e.Item.ItemType == ListItemType.AlternatingItem)

ItemDataBound Function can be used for various functionalities:

How to hide any column of a particular row of a DataGrid?

procedure TClassName.dgrDataGrid_ItemDataBound(sender: System.Object; e: System.Web.UI.WebControls.DataGridItemEventArgs);
begin
   e.Item.Cells[‘ColumnName’].Attributes.Add('style','display:none');
end;

How to change contents of any column of a particular row of a DataGrid?

procedure TClassName.dgrDataGrid_ItemDataBound(sender: System.Object; e: System.Web.UI.WebControls.DataGridItemEventArgs);
begin
    if (e.item.ItemType =  listItemType.Item) or (e.item.ItemType =  listItemType.AlternatingItem) then
    begin
        if (e.Item.Cells[‘ColumnName’].Text = 'ABC') then e.Item.Cells[‘ColumnName’].Text := 'XYZ';
    end;
end;

How to change background color a particular row of a DataGrid?

procedure TClassName.dgrDataGrid_ItemDataBound(sender: System.Object; e: System.Web.UI.WebControls.DataGridItemEventArgs);
begin
    if (e.item.ItemType =  listItemType.Item) or (e.item.ItemType =  listItemType.AlternatingItem) then
    begin
        e.Item.Style['background'] := 'AliceBlue';                                  
        e.Item.Attributes.Item['OrigBackColor'] := 'AliceBlue'; //To retain the previous background color of the row
        //e.Item.BackColor := System.Drawing.Color.AliceBlue; This is the other way to color the background of the row.
    end;
end;

How to add javascript functions on each row of a DataGrid?

procedure TClassName.dgrDataGrid_ItemDataBound(sender: System.Object; e: System.Web.UI.WebControls.DataGridItemEventArgs);
begin
     if (e.item.ItemType =  listItemType.Item) or (e.item.ItemType =  listItemType.AlternatingItem) then
    begin
        e.Item.Attributes.Add('onselectstart', 'return OnSelectStartFunction();');
        e.Item.Attributes.Add('onclick',' return OnClickFunction();');
        e.Item.Attributes.Add('ondblclick',' return OnDoubleClickFunction();');
        e.Item.Attributes.Add('onmouseover','changeStyle();');
    end;
end;

In this way, you can use itemdatabound function to perform a lot of functionalities.

Protecting E-mail Addresses on Webpages: Beware of using mailto protocol

Placing an e-mail address on a Web page is a dangerous prospect nowadays. If the document on which the address appears generates even a medium amount of traffic, it is a given that a robot or other harvester will pick up the e-mail address and add it to dozens of spam lists.

How do these bots and harvesters collect the e-mail? They work by simply accessing the document and examining the document's source. For example, to insert a link to e-mail Jill at The Oasis of Tranquility, the following code can be inserted into a document:

<a href="mailto:jill@oasisoftranquility.com">Email Jill</a>

Although this shows as simply "Email Jill" on a user agent's screen, the harvester is able to look at the code to find mailto:jill@oasisoftranquility.com. The mailto protocol confirms that an e-mail address is within the anchor tag. The key to protecting your e-mail address is not to add it to documents in an unencoded format. Instead, obfuscate it using one of several methods, including the following:

1. Break it into pieces that are reassembled by a script, which can't be easily discerned by the harvesters.
2. Encode it using a method that can preserve its functionality

Tip: One low-security method for obscuring an e-mail address is to replace the at sign (@) with its entity equivalent, &#64;. This method relies on the assumption that most harvesters search documents for the literal "@" in their quest for e-mail addresses. By removing the literal at sign, you impede the harvester's ability to recognize e-mail addresses. By using the equivalent entity, you ensure that compliant browsers will still render the at sign properly.

However, most harvesters are now keen to this trick and recognize the entity as well as the literal at sign.

The first method is fairly straightforward and uses a script similar to the following:

<script type="text/JavaScript">
    document.write('<a href="');
    t1 = "mai";
    t2 = "lto";
    t3 = ":";
    t4 = "jill";
    t5 = "&#64;";
    t6 = "oasi";
    t7 = "softra";
    t8 = "nquil";
    t9 = "ity";
    t10 = ".";
    t11 = "com";
    text = t1=t2=t3=t4=t5=t6=t7=t8=t9=t10=t11;
    document.write(text);
    document.write('">Mail Jill</a>
</script>

The script breaks the e-mail portion into small chunks, assigns each chunk to a variable, concatenates the chunks into one variable, and then outputs the entire anchor tag. The key to this method is that the pieces of the e-mail never appear together in the file. For additional security the chunks could have their order scrambled — placing number 6 before 3, and so on.

The other method, encoding the address, is a little more complicated. It requires that you first run a program to encode the address and then use those results in your document. The encoding can be done in a variety of ways, one of which is shown in the following listing, an HTML document with form entry and JavaScript for the encoding:

<html>
<head>
    <title>Email Encoder</title>
    <script type="text/JavaScript">
    function encode (email) {
      var encoded = "";
        for (i = 0; i  <  email.length; i++) {
          encoded += "&#" + email.charCodeAt(i) + ";";
        };
        return (encoded);
     };
    </script>
</head>
<body>
<form action="" name="encoder"
    onsubmit="encoded.value = encode(email.value);
    return false;">
<table border="0" cellpadding="3px">
    <tr>
     <td>Enter your<br/>email address:</td>
     <td><input type="text" name="email" size="30" /></td>
     <td><input type="submit" value="Encode"/></td>
    </tr>
    <tr>
     <td>Encoded email:</td>
     <td colspan="2"><input type="text" name="encoded"
          size="60"/></td>
    </tr>
</table>
</form>
</body>
</html>

This document displays a form where you can enter your e-mail address. When you click the Encode button, the e-mail address you entered is converted, character by character, into entity equivalents and placed in the Encoded email field where you can copy it to the clipboard for use in your documents. Note that you can encode only the e-mail address or, optionally, the mailto: protocol string or even the entire anchor tag. Just be sure to replace the same amount of text in your document as you encoded.

Non Breaking Space vs Zero Width Space in HTML

Text in table cells is a fickle beast, especially when filled with long numbers. True text will typically allow for sane breaks even in a narrow column. However, not much can be done with numeric data or other data that cannot be arbitrarily broken when a column changes sizes.

For example, consider the following number:

1,234,567,890.34

How would you break such a number in a column that supports only a four-character width? It's a tough decision, but probably one you would prefer to make yourself rather than leave it up to HTML and CSS.

Tip:  When deciding where to break numbers, keep in mind that the best places to break are around punctuation (commas, periods) or currency symbols. Doing so will preserve as much readability of your numbers as possible.

You have two essential tools to use when controlling line breaks, the nonbreaking space and the zero-width space.

Non Breaking Space

The nonbreaking space is best known by its HTML entity code, &nbsp;. This character looks and acts like a space, except in that it doesn't allow the browser to break the line at this space. Although it is commonly used to space-fill elements, the nonbreaking space does have its textual uses. For example, you typically would not want the following line broken at the embedded spaces:

12344 Mediterranean Circle

To prevent the line from breaking, you would replace the spaces with nonbreaking space entities, similar to the following:

12344&nbsp;Mediterranean&nbsp;Circle

Zero Width Space

The zero-width space is somewhat opposite to the nonbreaking space — it is not visible but allows the browser to break at the character. The zero-width space can be inserted by using its HTML entity code, &#8203;

Returning to our earlier example number, we can choose where we'd likeit to be broken if it must break (the original number is on the first line, the doctored number on the second):

1,234,567,890.34
1, &#8203;234, &#8203;567, &#8203;890.&#8203;34

Now, if the number needs to be broken, it will be broken after a comma or after the decimal point.

Difference between AJAX and jQuery

AJAX is a JAVASCRIPT TOOL whle JQUERY is a JAVASCRIPT LIBRARY.

AJAX is a denomination of several programming techniques. AJAX is not a specific technology but a combination of varying technologies to provide a new functionality. AJAX is not a new programming language, but a new way to use existing standards.Whenever you request a new set of data from web site, it clears the whole page and loads the new one. AJAX is used to circumvent this behavior and allow new data to be retrieved without modifying the whole page.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

jQuery is a javascript framework that makes working with the DOM easier by building lots of high level functionality that can be used to search and interact with the DOM. By using we can make Ajax calls.

jQuery is a lightweight javascript library that ease the writting of javascript by levelling the differences between browsers and giving a common, simplified syntax. jQuery performs some commonly desired things so that author's don't need to reinvent some common wheels. jQuery focuses more on interactions with HTML elements. jQuery simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development. jQuery Libraries can be downloaded jquery.com.

jQuery handles Front End tasks while AJAX handles backend (server calls)

jQuery does all the work on the front end, therefore you would need to have a full understanding of it in order to properly set-up your page. You would not need to learn the exact mechanisms of AJAX in order to utilize it as jQuery gives you an AJAX command to retrieve whichever data you need from the server.

AJAX and jQuery are often used together

AJAX can’t be utilized with simple HTML since HTML doesn’t allow the page to be changed after it has fully loaded. In order to use AJAX, you would need a client side scripting language that allows you to detect the actions of the user and modify elements on the page accordingly. jQuery does that exactly, that is why both are often used together to present web pages that a user can interact with easily without repetitive loading.

Problem with AJAX and jQuery

Although the use of jQuery and AJAX makes the browsing experience a lot better for the user, the effect to the server hosting these files are not as desirable. Every time you make another AJAX request, a new connection to the server is made. Too many connections can sometimes be difficult for the server to cope with. Most hosting companies have made steps in order to prevent overloads since jQuery and AJAX are truly here to stay.

Summary:

1. jQuery is a lightweight client side scripting library while AJAX is a combination of technologies used to provide asynchronous data transfer.
2. jQuery and AJAX are often used in conjunction with each other.
3. jQuery is primarily used to modify data on the screen dynamically and it uses AJAX to retrieve data that it needs without changing the current state of the displayed page.
4. Heavy usage of AJAX functions often cause server overload due to the greater number of connections made.

Preloading Images: A trick to overcome delays in image-rich webpages loading

One of the things that can really slow down the display of Web pages is an abundance of images, each one of which can contain the equivalent of 17,000 to 20,000 characters.

There is a trick of Image Preloading to help overcome the delays experienced while image-rich documents load. Through the use of JavaScript, image files are loaded into image objects. The net result is that the graphics are not displayed but are loaded into the browser's cache for later use. When it is time for the browser to actually display the image(s), they are taken from the local cache instead of having to make the trip across the Internet.

The script embedded in the following document is an example of a preload script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   
    <title>Preloading Images</title>
    <script type="text/JavaScript">
  
    // Assign path of images to be preloaded to array, one image per index
   
    var imagenames = [];
    imagenames[0]   = "images/header.gif";
    imagenames[1]   = "images/logo.jpg";
    imagenames[2]   = "images/picture1.gif";
    imagenames[3]   = "images/picture2.gif";
    imagenames[4]   = "images/picture3.gif";
    imagenames[5]   = "images/rule.gif";
    imagenames[6]   = "images/button01.gif";
    imagenames[7]   = "images/button02.gif";
    imagenames[8]   = "images/button03.gif";
    imagenames[9]   = "images/footer.gif";
    imagenames[10]  = "images/gradient.gif";
    imagenames[11]  = "images/sphere.gif";
  
    // Create new image object for each image and then assign a path to the src, preloading the actual image
   
  function preload(imagenames)
   {
         var images = [];
         for (var i=0; i  <  imagenames.length; i++)
        {
                images[i] = new Image();
                images[i].src = imagenames[i];
         }
    }
   
   // Run script, preloading images, before document loads (alternately, place call in an onLoad  in body tag to preload images after document loads)
  
   preload(imagenames);
  
   </script>
</head>
<body>
    <p>Document body goes here.</p>
</body>
</html>

The script builds an array of image paths and then iterates through them, creating an image object and assigning an src property to cause the image to actually be preloaded. The script can be run via two different means: by a function call in the <head>, which causes the script to run before the document loads, or by an onLoad handler in the <body> tag, which causes the script to run after the document loads.

Note:  Image preloaders aren't useful for individual documents; they are most useful for sites of multiple documents that reuse the same images over and over (buttons, rules, backgrounds, and so on). When seeding the loader, don't forget to include images from all documents your audience may see.

The former, before the document loads, is handy when the document itself contains many images — running the preloader first can speed the display of the initial document. The latter, after the document loads, is better chosen when subsequent documents are the documents with the majority of images. This allows the initial document to load more quickly because it doesn't have to wait for the script to run — the document is displayed for the user to peruse while the script runs in the background.