ViewState Decoder AddOn for Firefox

This is my first shot at creating add-ons for Firefox. This add-on can decode and show viewstate contents of an *.aspx page. Once you intall this add-on, it shows up a ‘Show Viewstate’ item in context menu of Firefox. When this menuitem is clicked, a popup comes up showing the viewstate details. There are a couple of things I want to make clear here:

  • This add-on does NOT decrypt viewstate. It means it does not work on encrypted viewstate.
  • This add-on does NOT perform deserialization of viewstate. It was just designed to give a sneak-peek of whats in the viewstate. This information could be useful to developers and testers of web applications.

The contents of ViewState are serialized using ‘LOSFormatter’ which performs ASCII serialization and encodes the output using Base64 encoding. This add-on merely performs a Base64 decoding and shows the content of viewstate.

Before downloading

THIS SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTIES OF ANY KIND. THE AUTHOR IS IN NO WAY RESPONSIBLE FOR ANY DAMAGE CAUSED BY INSTALLATION AND/OR USE OF THIS SOFTWARE. THIS SOFTWARE IS EXPERIMENTAL WORK AND NOT THROUGHLY TESTED. USE IT AT YOUR OWN RISK.

ViewStatePeeker after installation

Context menu showing 'Show Viewstate' item.

Window showing viewstate details

ASP.NET Webforms Tooltip

Download source code

These days I get lot of questions from people asking me how to use my tooltip script to show a webform. This requirement is typically when:

  • You already have a say ‘DetailsForm.aspx’ page which shows up when user clicks on any row in Datagrid/DataGridView.
  • You are using older version of ASP.NET that doesn’t support AJAX extensions (and for some reasons you can’t upgrade).
  • You don’t know or don’t want to use AJAX.

The solution for your problem is IFRAME. I have modified my <DIV> based tooltip and created an IFRAME based tooltip. This enables you to show webpages directly. So the concept is, when user clicks on ‘More Info’ link, instead of taking him to ‘DetailsForm.aspx’, show him the page inside a tooltip. This saves you the effort of writing complex javascript or using AJAX. This method is simple and can prove very useful in many scenarios.

In the next section, I will describe a sample example which does that. You can download the source code. Go through ‘readme.txt’ file before running the downloaded code.

Tooltip showing a webform

Setting up the main page (Default.aspx)

This page contains the datagrid, or datagridview to be more specific. Though this example was written for ASP.NET 2.0 , it can be adopted very easily for older version of ASP.NET. Our main page contains a simple datagrid , which shows data from Northwind database, Employee table. There is a SqlDataSource object which deals with database. I have added a template column showing ‘More Info’ hyperlink to this datagrid. I am not going to explain things step by step here. You can easily figure out them from the downloaded code.

the details form
Main page (Default.aspx) containing the datagrid and an IFRAME which will be used to display tooltip. As I said earlier, I have added an IFRAME to this page. Our tooltip will make use of this IFRAME. Also, there is a reference to my IFRAME script.

<iframe id="a" src="DetailsForm.aspx" scrolling="no"  
style="border:solid 1px green;font-family:Tahoma ; font-size:small;
background-color:white;width: 450px; height: 200px;
border: solid 1px gray; text-align: center;filter: alpha(Opacity=85);opacity:0.85;display:none" frameborder="0">
</iframe>

Creating the DetailsForm page (Details.aspx)

the details form

This page is a readonly page that shows detailed information. It contains all neccessary controls to show information about selected employee. I have not implemented it fully in my code. It just shows some random information for now. This is left as homework for those using my code. But I would certainly discuss how it is supposed to work. The DetailsForm.aspx receives an EmployeeID in query string. It fetches details for that employee from database and populates data.

public partial class DetailsForm : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["EmployeeId"] != null)
{
int empId;
if(Int32.TryParse(Request.QueryString["EmployeeId"],out empId))
{
PopulateDataForEmployee(empId);
}

}
}

private void PopulateDataForEmployee(int employeeId)
{
//fetch data for employeeId
//populate controls

//below is some dummy code.
//Homework : Make this work :-)

lblBday.Text = Guid.NewGuid().ToString();
lblCountry.Text = lblBday.Text.Substring(0, 10).ToUpper();
lblNotes.Text = lblBday.Text + lblCountry.Text;
lblRptTo.Text = Guid.NewGuid().ToString();
}
}

Writing required javascript.

To the main page (Default.aspx) we add the following javascript functions to show and hide our tooltip. (For more information on the tooltip script visit this page.)

<script src="IfrmTooltip.js"></script>
<script language="javascript">
var t1;
function showDetails(e,empid)
{
if(t1)t1.Show(e,"<br><br>Loading...");
var url = 'DetailsForm.aspx?EmployeeId=' + empid;
document.getElementById("a").src = url;
}

function hideTooltip(e)
{ if(t1)t1.Hide(e); }

function init()
{ t1 = new ToolTip("a",true,40);}

</script>

Now, in the code behind file of the main page (Default.aspx) we need to write the code that emits out client-side javascript for showing the tooltip , every time the user oves cursor over ‘More Info’ hyperlink. So here is the code for that:

if (e.Row.RowType == DataControlRowType.DataRow)
{
Control ctrl = e.Row.Cells[5].FindControl("lnkMoreInfo");
if (ctrl == null) return;
LinkButton l = (LinkButton)ctrl;
string empId = e.Row.Cells[0].Text;
l.Attributes.Add("onmouseover", "showDetails(event," + empId + ")");
l.Attributes.Add("onmouseout", "hideTooltip(event)");
}

Thats it ! This is all that was needed. If you now run the example you will see a nice tooltip for each row of the datagrid showing details for this row. This was easy, and we didn’t use any XHR as such, still created pretty much AJAX like functionality.

Spice up ASP.NET validation with AJAX Control Toolkit

Introduction of AJAX Control Toolkit has opened many interesting possibilities for developing rich UI in ASP.NET. Add an awesome IDE like Visual Studio to it, and you can get astounding results without doing much. In this article we will see how to enhance client side validators using AJAX Control Toolkit. Given below are screen shots of what we are trying to achieve. The whole purpose is to improve user experience with very little effort.

Callouts for each validator.

Modal dialog showing errors on click of submit button.

Creating a simple form

Using, Visual Studio (or Visual Web Developer) create a new ‘AJAX Control Toolkit Website’. I created a simple webform which looks like to this:

A simple ASP.NET Form.

As you can see, it looks like any other form you might design with ASP.NET. It has few input boxes, and labels corresponding to them. I have added some validators for each textbox. Name, email are made mandatory using ‘RequiredFieldValidator’. Age must be between 18-100, which is validated by ‘RangeValidator’. There are ‘RegularExpressionValidator’s for email and Fax numbers. And yes, we have a ‘Submit’ button too! A simple ASP.NET page.

Adding those cool validation callouts

First we place a ‘ValidationSummary’ control on the page. So all our errors can be shown in one place. This will be useful to implement the modal dialog in next section. Notice that I have set the ‘Text’ property of validators to ‘*‘, since we want the actual error message to be shown on the validation summary. Callouts were accomplished using the ‘ValidatorCalloutExtender’ from AJAX Control Toolkit. Just drag and drop a ‘ValidatorCalloutExtender’ onto the screen from toolbox. Set the ‘TargetControlID’ of this extender to the ID of our validator. I have five validators on my page, so I used equal number for ‘ValidatorCalloutExtender’. One for each validator. Modify ‘TargetControlID’ of each extender to point to a validator.

After adding validation summary and ValidatorCalloutExtenders.

Incredibly, that is all which is need to get those nice callouts. Run your page and click submit without entering anything in the form. You should see those callouts. Try entering wrong information in any of the textboxes, a callout will magically appear near it, showing the error message of the validator that failed.

Creating the Modal Dialog (With diabled background !)

The best part of our modal dialog box is that it disables the parent/window completely. It adds a translucent layer over the background which makes it look really neat. Here again, the AJAX Control Toolkit comes to our help. The ‘ModalPopupExtender’ is excatly meant to do such things. Just drag and drop one the screen. After that we create a DIV that will act as popup window for us. The markup for the div is given below.

<ajaxToolkit:ModalPopupExtender ID="ModalExtnd1" 
runat="server" TargetControlID="lblHidden"
PopupControlID="SummaryDiv" BackgroundCssClass="popupbg" >
</ajaxToolkit:ModalPopupExtender>

<div id="SummaryDiv" class="popupdiv">
<table width="100%" style="font-family: 'Trebuchet MS', Tahoma, Verdana">
<tr><td bgcolor="skyblue">
Errors on this page !
</td></tr>
<tr><td>
<asp:ValidationSummary id="ValSum1" runat="server" Font-Names="Arail">
</asp:ValidationSummary>
</td></tr>
<tr><td align="center">
<input type="button" value="OK" onclick="$find('ModalExtnd1').hide();"/>
</td></tr>
</table>
</div>

<asp:Label ID="lblHidden" runat="server" Text="hidden" CssClass="hidelbl">
</asp:Label>

We have set ‘PopupControlID’ property of ModalPopupExtender, to ‘SummaryDiv’ which is actually the id of the <div> we just created. The ‘TargetControlID’ property of ModalPopupExtender, just needs to be set to something. In our case we will set it to point to a hidden label. This is because want to supress default show/hide functionality of this extender. Our <div> consists of a HTML button, on clicking of which the modal dialog box is hidden. Also note that we have moved the validation summary inside our <div> tag.

Form after addition of ModalPopupExtender and the <div> .

Let us now see the CSS for our example.

<style type="text/css">
.popupdiv{background-color:ivory;border:solid 1px skyblue;width:250px;display:block}
.popupbg{background-color:gray; filter: alpha(opacity=60); opacity:0.60}
.hidelbl{display:none;}
</style>

There are three classes defined here. The ‘popupbg’ class is assigned to ‘BackgroundCssClass’ poperty of ModalPopupExtender. Note that we are explicity setting the opacity of background layer of the modal dialogbox. Now, some javascript. The page contains a javascript function which is called to show or hide the modal dialog, on click of the submit button. This function has to be intelligent enough to show the modal dialog only if a client validation fails.

<script type="text/javascript">
function ShowModalDialog()
{var x= $find("ModalExtnd1");
Page\_ClientValidate();
if(!Page\_IsValid)
x.show();
}

function init()
{document.getElementById('SummaryDiv').style.display='none';}
</script>

Here we make use of ASP.NET’s client side validator API. Call to ‘Page_ClientValidate’ causes all validators to fire. If any one fails the golbal javascript variable ‘Page_IsValid’ is set to false. Now to show/hide the modal dialog box we will attach a handler to the submit button as follows in serverside code:

protected void Page\_PreRender(object sender, EventArgs e)
{
btnSubmit.Attributes.Add("onmouseup", "ShowModalDialog();");
}

Now just run the example. Enter some junk data, you should see the modal dialog box.

Modal dialog showing errors on click of submit button. Notice the callout is visible behind the translucent background.

But there is one small problem, which at least I faced. If ‘display’ for the <div> is set to ‘none’ it doesn’t show up, though the background is disabled. So I had to set the display to ‘block’. But this gives other problem, the <div> is visible for fraction of second, as the page loads. To solve this I had to adopt this (somewhat inelegant) approach.On the page set:

<body onload="init();">

Run the example again. This time the

does not flash when the page loads. Impressed ? show it to your boss too ! Using this approach you should be easily able to add more gloss to your old ASP.NET webforms. Any suggestions , views and criticsm are always welcomed.

AJAX Line Graph with Silverlight Demo

Javascript-only demos of Silverlight based AJAX line graphs. There is no AJAX happening here. For that you need to download the code and run it from your server.

For code and ‘how to’ visit : http://www.codeproject.com/silverlight/Silverlight_AJAX_Graph.asp

Download Silverlight from here: www.microsoft.com/silverlight/downloads.aspx

Linux/Unix users can download Moonlight plugin to see this demo : http://www.mono-project.com/Moonlight

Sliverlight based photo viewer



Before Using:

If you do decide to use it on your own website, do consider adding a link to this page ! Comments and suggestions always welcomed.

My First Game Programing Experience with Ruby

This is in no way a game programming article. I am just narrating my experience of writing a simple game for first time in life. All those who are interested in writing a computer game but have absolutely no idea of how to go about might find some information here.

Screenshot from my game.

Whats/Why Ruby ?

Ruby is an interpreted pure object oriented language. It is certainly not the best language to write games in. But you can still use it to develop some very simple games. Actually, I am learning Ruby these days to try out Rails. The idea of learning a new language by writing a game thrilled me. This article is in no way Ruby specific.

Doing Graphics ?

This is one important question for all new comers to game programing. Even I had no idea about it. In the past I tried writing a game or two with entry level C++ libraries, (and once even with javascript!), but I was not impressed. Then I understood that any library that could do graphics is not really sufficient. So I had to learn some library that was specifically meant for game programing. Now, I am an average programmer, so I am always on lookout for easy alternatives. This is when I came across SDL. SDL (Simple DirectMedia Layer) is a cross-platform library for multimedia programing. It provides low level access to keyboard, joystick, mouse,audio and 3D hardware. SDL is written in C, but it has bindings to several languages (including Ruby). This makes it really useful. The advantage of using SDL with Ruby is you can exploit cool OOP features of Ruby and not worry about things like garbage collection,compilation,OS. The biggest disadvantage is ‘speed’. But then I am not writing a ‘3D first person shooter’ game. If you still wonder (like I used to) ‘how can I play two audio files simultaneously’ check out the SDL API for playing sound. SDL makes it really easy.

Another screenshot from my game.

Heard of Sprites ?

Well, I had not, till recently. This is a very important concept of game programing. You probably cant write any good 2D game without knowing about ‘sprites’. So what are they? Have you notice the way charactors or objects in games are animated . When a charactor walks you can actually see his legs moving. Even stationary object exhibit some form of animated behavior. This all is achieved through ‘sprites’. A sprite is collection of images, which are shown one after another to animate an object. Generally these images are stored sequentially (frame wise) in a bigger image. This has following advantages:

  • Each image need not be loaded separately from disk.
  • Once you load single image containing the entire collection into memory, this speeds up retrieval and display of each frame, since they lie in adjacent memory locations. This can be very useful for certain types of computers\consoles.

UFO sprite. (Notice the slight difference in height of two images which animates the UFO)

My truck ! (Left facing image when user clicks left arrow and another for right arrow).

Spaceship. Four images for movement in four directions.

Sprites are generally designed by specialized people. Generating sprites requires lot of creativity and experience. You should be able to create cool animation with minimum frames. Most good game programmers will find this part tricky. If you are making a commercial game then you better hire some artist for sprites. However for my simple game, I used GIMP to create some basic sprites. These are png files with transparent background.

Collision Detection

Another important element of any game. As the name suggests it refers to detecting when boundaries of two objects overlapped or touched each other. For example, a missile hitting a target. The missile and target both could be sprites. A game can contain many sprites and every sprites may require to be checked for collision. Collision detection involves lot of processing. In my game , I need to check for collisions between every missile and UFO on screen. This off course can be optimized, but that is where complexity is involved.

Game Loop

A game look is similar to windows message loop. Simply put, its a while loop which looks something like this:

while(! IsGameOver)
{
// Scan user input
// Move all sprites by 1 step
// Detect collisions
// Update game status (IsGameOver =true or false)
// Optional delay
}

I think it will require lot of skill and practice for person like me to write efficient game loops. Also, it seems if processing time for one step in the loop is greater than the delay, your game speed becomes heavily dependent on CPU speed. Well, that was all I learned from writing a very simple game with Ruby. I hope after going thorough this article newcomers will atleast know what to search for on search engies before writing their own game. And if you do write one, do share with me !

[All trademarks and registered trademarks appearing on ashishware.com are the property of their respecive owners.]

AJAX Bar Graph using ASP.NET

Offline demo. Download and run the code to see it actually working.

Downloading and Viewing the demos

  • Download the code
  • Using Visual Studio 2005 , create a new ATLAS (ASP.NET AJAX) project. If you don’t have ASP.NET AJAX installed, get it from here.
  • Extract and add ALL the contents of graph.zip to newly created project.
  • All the files should be at same level as Default.aspx of new project.
  • Set AJAXGraph1.aspx as start page and run the project.

Using AJAX bar graph in your applications

This article explains creation of simple AJAX based graph using HTML elements. To actually see it in action download the zip archive and run the demos.

Screenshots of graphs from AJAXGraph1.aspx and AJAXGraph2.aspx (present in the zip archive).

Creating new ASP.NET AJAX website.

Here I assume that you have ASP.NET AJAX (previously ATLAS) installed. You should be able to open your IDE and simply create a new “Atlas” website. This should open a new project with Default.aspx. This is the file you should be using. Make sure it has this tag:

<atlas:ScriptManager ID="ScriptManager1" runat="server" />

Writing the server side method

In the code-behind file ‘Default.aspx.cs’ , we write a new web-method for use in AJAX. This method merely returns a random integer. In real life application, it would query some database and retrieve the result. I have put a random delay to simulate processing and network delay. Make sure you include the ‘System.Web.Services’ namespace.

using System.Web.Services;

//Class declaration
[WebMethod]
public int GetNextValue()
{
//In real life get data from database and return to the caller
Random r = new Random();
System.Threading.Thread.Sleep(r.Next(100, 500));
return r.Next(1, 199);

}

HTML required for Graph

The graph is basically a table with multiple columns. Every column has a

tag , whose height is adjusted as per data received from AJAX request. So first, add following HTML to Default.aspx page.

<table class="gridTable">
<tr valign="bottom">
<td><div id="d1" class="gridDiv"></div> </td>
<td><div id="d2" class="gridDiv"></div></td>
<!-- add desired number of <td> tags here -->
<td><div id="d14" class="gridDiv"></div></td>
</tr>
</table>

There should be as many ‘s as the number of bars we want for our graph. One important thing to note here is that, each

tag should have a unique id. You can use CSS to set background images, borders and even opacity of various elements in above HTML.

Add the magic Javascript

Download my AJAX graph javascript from here. Add reference of this script file in Default.aspx

<script  type="text/javascript" src=AJAXGraph.js></script>

Once this is done time to write your own javascript. This section is important. Most of the time copy paste might work , but at times you will want to implement your own custom behavior. Add the following javascript just after the above above script line, before the <body> tag:

<script language="javascript">
var start =1;var mygraph;

function OnComplete(a)
{
mygraph.PlotValue(a);
if(start ==0)return;
window.setTimeout("PageMethods.GetNextValue(OnComplete,null)",500);
}

function init()
{ mygraph = new AJAXGraph(['d1','d2','d3','d4','d5','d6','d7','d8','d9','d10','d11','d12','d13','d14','d15','d16']);
PageMethods.GetNextValue(OnComplete,null);
}
</script>

There are a few important things to explain here. First , notice the long list of parameters (d1..d16) being passed while constructing a new AJAXGraph object. This is actually list of the

tags enclosed in the ‘s. Looks a bit awkward, but right now I don’t have better way of doing this. The init() function is called when ‘onload’ event fires. Don’t miss this line:

<body onload="init()">

The PageMethods object houses javascript functions for every ‘WebMethod’ defined in code behind. So, PageMethods.GetNextValue(OnComplete,null) will execute the ‘GetNextValue’ method on server. The ‘OnComplete’ function acts like a callback function for AJAX request. When a response is received , it gets called. Call to ‘mygraph.PlotValue’ will automatically plot the new value received from server onto the graph. Note that the value returned from server should not be greater than the height of table itself. The value actually represents height in pixels of a bar in the graph. You should ideally process value returned form server so that it is under required limit. Also note that server method only returns an integer, so consumes less network bandwidth. You can vary the speed at which the graph refreshes by varying the second parameter in the call to window.setTimeout, in the ‘OnComplete()’ function. For more clearer picture, you can always refer to the source of downloaded files. Just by changing the CSS classes you can create some stunning looking UI. Check out the screenshots below.

Hope you found this article interesting. As always, mail me your suggestions and questions.

AJAX tooltip for ASP.NET Datagrid



Introduction

This article is about creating a AJAX based tooltip for the ASP.NET DataGrid. In a simple demonstration, I’ll show how to put things together and get them working. The main page consists of normal DataGridView, showing customer information and a template column which says ‘Recent Orders’ . When the user moves his/her cursor over the text, a cool animated translucent tooltip appears for the row, showing ten recent orders by that customer.

The ingredients (this is required):
1. Northwind database
2. ASP.NET 2.0 (Version 1.x might work)
3. My tooltip script Tooltip.js
4. Prototype.js
5. Some experience with ASP.NET and datagrid.

Downloading and running the code

  • Download the DataGridTT.zip.
  • Download the prototype.js and add it to the project.
  • Modify the web.config file of the downloaded project. Change the ‘NorthwindConnectionString’, so that it points to the ‘Northwind’ database on your server.

Create Main Page

I am not spending time explaining this. You should refer to the source for this. The main page consists of a simple datagrid, bound to a typed dataset. The query used for fetching data from Northwind database is:

SELECT  ContactName, CompanyName, ContactTitle, Country, City, Phone, CustomerID
FROM Customers

This is how the datagrid looks in designer.

Tooltip in action.

The column with ‘Recent Orders’ is a template column with a ‘Label’ control over it. You should be able to figure out things if you have Visual Studio 2005 and the source code. There is nothing really special here.

Creating the server side AJAX method

Okay, now we require a URL from where we can get data for our tooltip. I have chosen to create a empty (totally blank) *.aspx page, called CustomerInfo.aspx. If you see the code for his page, it has code for only two functions ‘Page_Load’ and ‘DSToJSON’ . This page expects a parameter ‘CustID’ which is nothing but the CustomerID corresponding to the row of grid for which tooltip is displayed. The page ‘CustomerInfo.aspx’ retrieves data from the database based on ‘CustID’ using the following query:

SELECT  TOP 10 Orders.ShippedDate, Orders.ShipCity, Orders.ShipCountry,
Products.ProductName, [Order Details].Quantity, Customers.CustomerID
FROM Orders INNER JOIN
[Order Details] ON Orders.OrderID = [Order Details].OrderID INNER JOIN
Products ON [Order Details].ProductID = Products.ProductID INNER JOIN
Customers ON Orders.CustomerID = Customers.CustomerID INNER JOIN
Customers AS Customers_1 ON Orders.CustomerID = Customers_1.CustomerID
WHERE (Orders.CustomerID = @CustID)

There is an important method, ‘DSToJSON’ which converts dataset containing results of above query to JSON representation. If you are new to JSON visit this link. This method returns JSON string for the data which is output to the caller via Response.Write method. The code for this method is given below:

private string DSToJSON()
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("{\"Orders\":{ \"Items\": [");

foreach (OrderDetails.OrderDetailRow dr in details_ds.OrderDetail.Rows)
{
sb.Append("{\"Date\": \"");
if(!dr.IsShippedDateNull())
sb.Append(dr.ShippedDate.ToShortDateString());
else
sb.Append("--NA--");

sb.Append("\", \"City\": \"");
sb.Append(dr.ShipCity);
sb.Append("\", \"Name\": \"");
sb.Append(dr.ProductName);
sb.Append("\", \"Quantity\": \"");
sb.Append(dr.Quantity);
sb.Append("\"},");

}
sb= sb.Remove(sb.Length - 1, 1);
sb.Append("] }}");

return sb.ToString();

}

Client Side code

Now we will have to add some client side code to our main page for displaying the tooltip. As discussed earlier, I will be using my Tooltip.js javascript for the tooltip. You should visit this link and find out more about. You will find following client side javascript functions in the Default.aspx._

function init()

Creates the tooltip using a hidden tag as template. Called when window.load fires. This function is called using prototype libraries ‘Event.observe’ mechanism.

function showDetails(e,custId)

Initiates an AJAX request for the ‘custId’ to fetch data from the sever , using ‘Ajax.Request’ method from prototype.js for AJAX. Shows ‘Loading…’ text in the tooltip.

function showTooltip(res)

Processes the response form server, creates pretty looking HTML table containing the data and shows it into the tooltip.

function hideTooltip(e)

Hides the tooltip Refer to the Default.aspx file for the code of these functions. Here one important thing I would like to tell you is to place the datagrid in a with some descent height. This is required for proper functioning of tooltip. So when the mouse pointer moves over any ‘Recent Orders’ label ‘showDetails()’ needs to be called and ‘hideTooltip()’ when it moves out of it.

Connecting client and server for AJAX

Once we have all the things ready on client side, it is now time to write server side code that outputs correct HTML that will make things happen. This part is the most important. In the handler of ‘RowDataBound’ of the grid we write following code

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{ Control ctrl = e.Row.Cells[6].FindControl("lblTooltip");
if (ctrl == null) return;
Label l = (Label)ctrl;
string custID = e.Row.Cells[7].Text;
l.Attributes.Add("onmouseover", "showDetails(event,'" + custID + "')");
l.Attributes.Add("onmouseout", "hideTooltip(event)");
}
}

All the above code does is attaching appropriate function calls to the ‘onmouseover’ and ‘onmouseout’ events of the label in the template column. Also notice the ‘CustId’ is also getting passed for the corresponding row. This is very important for the system to work. Thats it , we are done ! I strongly recommend that you should download and study the code a bit before trying out this. This was just an example where we considered a simple case. With more creativity and code , it will be possible to produce more useful functionality and spectacular looking interface. Please email me your opinion, suggestions and criticism .

Clipboard Image Archiver

With Clipboard Image Archiver , you can simply copy and paste images from any source to a single destination. This program archives images copied to clipboard and stores them in a compact compressed format. You can anytime extract your archived images to a single folder or export them to a zip file. Also, you can choose the file format in which you want to archive an image.

Try it NOW ! Download Now (Read instructions before use)

More details and source code

http://www.codeproject.com/csharp/clipboard_image_archiver.asp

Clipboard Image Archiver Manual

License

DISCLAIMER: This software is provided to you without warranties of any kind. The author is not responsible for any kind of loss arising from use of this software. USE IT AT YOUR OWN RISK. This software is free for PERSONAL use only. If you plan to bundle this software with your commercial application you need to obtain WRITTEN PERMISSION from the author. This program uses the open source SharpZip library that can be obtained from here Contact the author via email address mentioned on this page: http://ashishware.com/FAQ.shtml OR drop a comment.

Installation

  • If you don’t have .NET 2.0 runtimes you need to download them from here and install. If you already have move to next step.
  • Extract the downloaded file to a location of your choice to say ‘C:\myfolder’
  • Extract the ‘ICSharpCode.SharpZipLib.dll’ file from downloaded archive to the same folder (C:\myfolder).

Usage

  • Double click on the ‘ClipboardImageArchiver.exe’ file. You will see the following screen. For now just click the minimize button (‘-‘) on the top right of the dialog. You can move this screen around by dragging the bar on top of it.

  • You should see a popup in bottom of the screen and a small icon showing text ‘Zc’.

  • Copy any image to clipboard. In IE you can right click an image and then click ‘Copy’.

  • Right click on the task bar icon. On the menu that comes up, click ‘Paste’.

  • You can change the format in which image is saved, using the ‘Format’ option in menu.

  • Once you have pasted all images you need, you will want to get them as a zip archive or extract individual images.

  • Again click on the taskbar icon, and select ‘Settings’. This will bring up the screen in step 1. Select an existing zip file or create a new one say (C:\myfolder\newfile.zip). Press the extract button. Open the ‘newfile.zip’, you should see all images you pasted! SELECTING AN EXISTING ZIP FILE WILL DELETE ITS CONTENTS BEFORE WRITING OUTPUT.

  • You can also choose to get individual images, by checking the ‘Image Files’ radio and selecting a directory to extract files.

  • By default, ‘data.data’ file is used for archiving of images. You will find this file in ‘C:\myfolder\‘. If you want to get rid of old archived files, simple delete or rename(recommended) the _’data.data’ file.

Help/Donate

I wrote this program in my free time, with no commercial interests in mind. You can help me in following ways:

  • If you found this program useful do write back.
  • Please report any bugs or feature requests.
  • Add a link to my website.
  • Inform your friends about this program.

Thank you !