Wednesday, October 21, 2009

Nested GridView in ASP.NET

http://www.codeproject.com/KB/webforms/EditNestedGridView.aspx

Nested GridView in ASP.NET

http://www.codeproject.com/KB/webforms/EditNestedGridView.aspx

Wednesday, August 26, 2009

Export GridView To Word/Excel/PDF/CSV in ASP.Net

Export GridView To Word/Excel/PDF/CSV in ASP.Net

In this article, I will explain how to export GridView to Word, Excel, PDF and CSV formats.

Exporting to Word, Excel and CSV can be easily achieved using ASP.Net without any third party tools, but for exporting GridView to PDF I am using iTextSharp which is a free library for exporting html to PDF.


To start with I have a GridView in which I am showing Customers records from the NorthWind Database.

The HTML markup of the GridView is as shown below



<asp:GridView ID="GridView1" runat="server"

AutoGenerateColumns = "false" Font-Names = "Arial"

Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B"

HeaderStyle-BackColor = "green" AllowPaging ="true"

OnPageIndexChanging = "OnPaging" >

<Columns>

<asp:BoundField ItemStyle-Width = "150px" DataField = "CustomerID"

HeaderText = "CustomerID" />

<asp:BoundField ItemStyle-Width = "150px" DataField = "City"

HeaderText = "City"/>

<asp:BoundField ItemStyle-Width = "150px" DataField = "Country"

HeaderText = "Country"/>

<asp:BoundField ItemStyle-Width = "150px" DataField = "PostalCode"

HeaderText = "PostalCode"/>

</Columns>

</asp:GridView>



In the figure below the GridView is shown with four buttons

1. Export To Word

2. Export To Excel

3. Export To PDF

4. Export To CSV


GridView with Sample Data


Export to Microsoft Word Format



C#

protected void btnExportWord_Click(object sender, EventArgs e)

{

Response.Clear();

Response.Buffer = true;

Response.AddHeader("content-disposition",

"attachment;filename=GridViewExport.doc");

Response.Charset = "";

Response.ContentType = "application/vnd.ms-word ";

StringWriter sw= new StringWriter();

HtmlTextWriter hw = new HtmlTextWriter(sw);

GridView1.AllowPaging = false;

GridView1.DataBind();

GridView1.RenderControl(hw);

Response.Output.Write(sw.ToString());

Response.Flush();

Response.End();

}



VB.Net

Protected Sub btnExportWord_Click(ByVal sender As Object,

ByVal e As EventArgs)

Response.Clear()

Response.Buffer = True

Response.AddHeader("content-disposition",

"attachment;filename=GridViewExport.doc")

Response.Charset = ""

Response.ContentType = "application/vnd.ms-word "

Dim sw As New StringWriter()

Dim hw As New HtmlTextWriter(sw)

GridView1.AllowPaging = False

GridView1.DataBind()

GridView1.RenderControl(hw)

Response.Output.Write(sw.ToString())

Response.Flush()

Response.End()

End Sub



The above function renders the GridView contents as Microsoft Word format. You will notice I have disabled paging before exporting, so that all the pages are exported.

The Output Exported File


GridView data exported to Word Document


Export to Microsoft Excel Format



For exporting the document to Excel if you do it directly as done in case of word the row background color is applied throughout to all the columns in the Excel Sheet hence in order to avoid it. I have done a workaround below.

First I am changing the background color of each row back to white.

Then I am applying the background color to each individual cell rather than the whole row. Thus when you export now you will notice that the formatting is applied only to the GridView cells and not all

Also I am applying textmode style class to all cells and then adding the style CSS class to the GridView before rendering it, this ensures that all the contents of GridView are rendered as text.



protected void btnExportExcel_Click(object sender, EventArgs e)

{

Response.Clear();

Response.Buffer = true;



Response.AddHeader("content-disposition",

"attachment;filename=GridViewExport.xls");

Response.Charset = "";

Response.ContentType = "application/vnd.ms-excel";

StringWriter sw = new StringWriter();

HtmlTextWriter hw = new HtmlTextWriter(sw);



GridView1.AllowPaging = false;

GridView1.DataBind();



//Change the Header Row back to white color

GridView1.HeaderRow.Style.Add("background-color", "#FFFFFF");



//Apply style to Individual Cells

GridView1.HeaderRow.Cells[0].Style.Add("background-color", "green");

GridView1.HeaderRow.Cells[1].Style.Add("background-color", "green");

GridView1.HeaderRow.Cells[2].Style.Add("background-color", "green");

GridView1.HeaderRow.Cells[3].Style.Add("background-color", "green");



for (int i = 0; i < GridView1.Rows.Count;i++ )

{

GridViewRow row = GridView1.Rows[i];



//Change Color back to white

row.BackColor = System.Drawing.Color.White;



//Apply text style to each Row

row.Attributes.Add("class", "textmode");



//Apply style to Individual Cells of Alternating Row

if (i % 2 != 0)

{

row.Cells[0].Style.Add("background-color", "#C2D69B");

row.Cells[1].Style.Add("background-color", "#C2D69B");

row.Cells[2].Style.Add("background-color", "#C2D69B");

row.Cells[3].Style.Add("background-color", "#C2D69B");

}

}

GridView1.RenderControl(hw);



//style to format numbers to string

string style = @"<style> .textmode { mso-number-format:\@; } </style>";

Response.Write(style);

Response.Output.Write(sw.ToString());

Response.Flush();

Response.End();

}





VB.Net



Protected Sub btnExportExcel_Click(ByVal sender As Object,

ByVal e As EventArgs)

Response.Clear()

Response.Buffer = True



Response.AddHeader("content-disposition",

"attachment;filename=GridViewExport.xls")

Response.Charset = ""

Response.ContentType = "application/vnd.ms-excel"



Dim sw As New StringWriter()

Dim hw As New HtmlTextWriter(sw)



GridView1.AllowPaging = False

GridView1.DataBind()



'Change the Header Row back to white color

GridView1.HeaderRow.Style.Add("background-color", "#FFFFFF")



'Apply style to Individual Cells

GridView1.HeaderRow.Cells(0).Style.Add("background-color", "green")

GridView1.HeaderRow.Cells(1).Style.Add("background-color", "green")

GridView1.HeaderRow.Cells(2).Style.Add("background-color", "green")

GridView1.HeaderRow.Cells(3).Style.Add("background-color", "green")



For i As Integer = 0 To GridView1.Rows.Count - 1

Dim row As GridViewRow = GridView1.Rows(i)



'Change Color back to white

row.BackColor = System.Drawing.Color.White



'Apply text style to each Row

row.Attributes.Add("class", "textmode")



'Apply style to Individual Cells of Alternating Row

If i Mod 2 <> 0 Then

row.Cells(0).Style.Add("background-color", "#C2D69B")

row.Cells(1).Style.Add("background-color", "#C2D69B")

row.Cells(2).Style.Add("background-color", "#C2D69B")

row.Cells(3).Style.Add("background-color", "#C2D69B")

End If

Next

GridView1.RenderControl(hw)



'style to format numbers to string

Dim style As String = "<style>.textmode{mso-number-format:\@;}</style>"

Response.Write(style)

Response.Output.Write(sw.ToString())

Response.Flush()

Response.End()

End Sub



The Output Exported File


GridView data exported to Excel Document


Export to Portable Document Format



For exporting the GridView to PDF I am using the iTextSharp Library. You will need to Add Reference for the iTextSharp Library in your Website.

Then import the following Namespaces



C#

using iTextSharp.text;

using iTextSharp.text.pdf;

using iTextSharp.text.html;

using iTextSharp.text.html.simpleparser;



VB.Net

Imports iTextSharp.text

Imports iTextSharp.text.pdf

Imports iTextSharp.text.html

Imports iTextSharp.text.html.simpleparser



By default the iTextSharp Library does not support background color of table cells or table rows

Hence when you render it as PDF your GridView is rendered without any formatting.

Recently I read an article on hamang.net where the author has provided the snippet to modify the iTextSharp so that it exports the HTML with background color.



For this tutorial, I have already modified the iTextSharp Library DLL so that the GridView is rendered with all the background color used. You can refer the code for exporting GridView to PDF below




C#

protected void btnExportPDF_Click(object sender, EventArgs e)

{

Response.ContentType = "application/pdf";

Response.AddHeader("content-disposition",

"attachment;filename=GridViewExport.pdf");

Response.Cache.SetCacheability(HttpCacheability.NoCache);

StringWriter sw = new StringWriter();

HtmlTextWriter hw = new HtmlTextWriter(sw);

GridView1.AllowPaging = false;

GridView1.DataBind();

GridView1.RenderControl(hw);

StringReader sr = new StringReader(sw.ToString());

Document pdfDoc = new Document(PageSize.A4, 10f,10f,10f,0f);

HTMLWorker htmlparser = new HTMLWorker(pdfDoc);

PdfWriter.GetInstance(pdfDoc, Response.OutputStream);

pdfDoc.Open();

htmlparser.Parse(sr);

pdfDoc.Close();

Response.Write(pdfDoc);

Response.End();

}



VB.Net

Protected Sub btnExportPDF_Click(ByVal sender As Object,

ByVal e As EventArgs)

Response.ContentType = "application/pdf"

Response.AddHeader("content-disposition",

"attachment;filename=GridViewExport.pdf")

Response.Cache.SetCacheability(HttpCacheability.NoCache)

Dim sw As New StringWriter()

Dim hw As New HtmlTextWriter(sw)

GridView1.AllowPaging = False

GridView1.DataBind()

GridView1.RenderControl(hw)

Dim sr As New StringReader(sw.ToString())

Dim pdfDoc As New Document(PageSize.A4, 10.0F, 10.0F, 10.0F, 0.0F)

Dim htmlparser As New HTMLWorker(pdfDoc)

PdfWriter.GetInstance(pdfDoc, Response.OutputStream)

pdfDoc.Open()

htmlparser.Parse(sr)

pdfDoc.Close()

Response.Write(pdfDoc)

Response.End()

End Sub



The Output Exported File


GridView data exported to PDF Document


Export to Text/CSV



Finally comes exporting GridView to CSV or Text File delimited by a separator like comma.

To export the GridView as CSV, I am running a two for loops. While looping through the GridView columns and appending comma after each column and while looping through rows appending new line character. Refer the code below.



C#

protected void btnExportCSV_Click(object sender, EventArgs e)

{

Response.Clear();

Response.Buffer = true;

Response.AddHeader("content-disposition",

"attachment;filename=GridViewExport.csv");

Response.Charset = "";

Response.ContentType = "application/text";



GridView1.AllowPaging = false;

GridView1.DataBind();



StringBuilder sb = new StringBuilder();

for (int k = 0; k < GridView1.Columns.Count; k++)

{

//add separator

sb.Append(GridView1.Columns[k].HeaderText + ',');

}

//append new line

sb.Append("\r\n");

for (int i = 0; i < GridView1.Rows.Count; i++)

{

for (int k = 0; k < GridView1.Columns.Count; k++)

{

//add separator

sb.Append(GridView1.Rows[i].Cells[k].Text + ',');

}

//append new line

sb.Append("\r\n");

}

Response.Output.Write(sb.ToString());

Response.Flush();

Response.End();

}




VB.Net

Protected Sub btnExportCSV_Click(ByVal sender As Object,

ByVal e As EventArgs)

Response.Clear()

Response.Buffer = True

Response.AddHeader("content-disposition",

"attachment;filename=GridViewExport.csv")

Response.Charset = ""

Response.ContentType = "application/text"



GridView1.AllowPaging = False

GridView1.DataBind()



Dim sb As New StringBuilder()

For k As Integer = 0 To GridView1.Columns.Count - 1

'add separator

sb.Append(GridView1.Columns(k).HeaderText + ","c)

Next

'append new line

sb.Append(vbCr & vbLf)

For i As Integer = 0 To GridView1.Rows.Count - 1

For k As Integer = 0 To GridView1.Columns.Count - 1

'add separator

sb.Append(GridView1.Rows(i).Cells(k).Text + ","c)

Next

'append new line

sb.Append(vbCr & vbLf)

Next

Response.Output.Write(sb.ToString())

Response.Flush()

Response.End()

End Sub



The Output Exported File


GridView data exported to CSV File


When you run the application first time and click export you might receive the following error


Error encountered when you click export


To avoid the error you will need to add this event which ensures that the GridView is Rendered before exporting.


C#

public override void VerifyRenderingInServerForm(Control control)

{

/* Verifies that the control is rendered */

}



VB.Net

Public Overloads Overrides Sub VerifyRenderingInServerForm

(ByVal control As Control)

' Verifies that the control is rendered

End Sub



This completes the article you can view the live demo here

The source code is available in C# and VB.Net here

Tuesday, August 25, 2009

Adding QueryString Parameters to the SiteMapNode

There is no way to add querystring parameters to the SiteMapNode in a SiteMap control "out of the box." I'm quite surprised there is no option but luckily the SiteMap uses the provider model. After a Live search, I was able to find a solution provided by Bobby DeRosa. By creating a custom provider, this can be accomplished. The project I was on is an update of an ASP.net app written in VB.net so here is my VB.net port:

Imports System.Collections.Specialized
Imports System.Web

Namespace Configuration

Public Class ExtendedSiteMapProvider
Inherits XmlSiteMapProvider

Public Overrides Sub Initialize(ByVal name As String, ByVal attributes As NameValueCollection)
MyBase.Initialize(name, attributes)
Dim resolveHandler As New SiteMapResolveEventHandler(AddressOf SmartSiteMapProvider_SiteMapResolve)
AddHandler Me.SiteMapResolve, resolveHandler
End Sub

Function SmartSiteMapProvider_SiteMapResolve(ByVal sender As Object, ByVal e As SiteMapResolveEventArgs) As SiteMapNode
If (SiteMap.CurrentNode Is Nothing) Then Return Nothing

Dim this As New XmlSiteMapProvider
Dim temp As SiteMapNode
temp = SiteMap.CurrentNode.Clone(True)
Dim u As Uri = New Uri(e.Context.Request.Url.ToString())
Dim tempNode As SiteMapNode = temp

While Not tempNode Is Nothing
Dim qs As String = GetQueryString(tempNode, e.Context)
If Not qs Is Nothing Then
If Not tempNode Is Nothing Then
tempNode.Url += qs
End If
End If
tempNode = tempNode.ParentNode
End While

Return temp
End Function

Private Function GetQueryString(ByVal node As SiteMapNode, ByVal context As HttpContext) As String
If node("queryStringToInclude") Is Nothing Then Return Nothing

Dim values As NameValueCollection = New NameValueCollection
Dim vars() As String = node("queryStringToInclude").Split(",".ToCharArray())
Dim s As String

For Each s In vars
Dim var As String = s.Trim()
If context.Request.QueryString(var) Is Nothing Then Continue For
values.Add(var, context.Request.QueryString(var))
Next

If values.Count = 0 Then Return Nothing

Return NameValueCollectionToString(values)
End Function

Private Function NameValueCollectionToString(ByVal col As NameValueCollection) As String
Dim parts(col.Count - 1) As String
Dim keys() As String = col.AllKeys

For i As Integer = 0 To keys.Length - 1
parts(i) = keys(i) & "=" & col(keys(i))
Next

Dim url As String = "?" & String.Join("&", parts)

Return url
End Function

End Class

End Namespace

I added the following to the web.config:

<siteMap defaultProvider="ExtendedSiteMapProvider" enabled="true">
<providers>
<clear />
<add name="ExtendedSiteMapProvider" type="Configuration.ExtendedSiteMapProvider" siteMapFile="web.sitemap" securityTrimmingEnabled="true" />
</providers>
</siteMap>

If I had a page of products on products.aspx, displayed the details of the product on details.aspx, and had a separate update.aspx page, my web.sitemap might look like this:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/" title="Main Page">
<siteMapNode url="~/products.aspx" title="Products" >
<siteMapNode url="~/details.aspx" title="Product Details" queryStringToInclude="ProductID" >
<siteMapNode url="~/update.aspx" title="Updating a Product" />
</siteMapNode>
</siteMapNode>
</siteMapNode>
</siteMap>

So, on /update.aspx?ProductID=3, the SiteMapNode for Product Details would have a url of /details.aspx?ProductID=3.

Hopefully a similar feature will be added soon to the ASP.net SiteMap control.

<span style="font-weight:bold;">C#:</span>
Great job! I took your C# code and had to make a few small changes to get it working correctly (on VS2008 & .NET 3.5 sp1):

#region Using Directives

using System.Collections.Specialized;

using System.Web;

#endregion

namespace Configuration

{

public class ExtendedSiteMapProvider : XmlSiteMapProvider

{

public override void Initialize(string name, NameValueCollection attributes)

{

base.Initialize(name, attributes);

this.SiteMapResolve += SmartSiteMapProvider_SiteMapResolve;

}

static SiteMapNode SmartSiteMapProvider_SiteMapResolve(object sender, SiteMapResolveEventArgs e)

{

if ((SiteMap.CurrentNode == null)) return null;

SiteMapNode temp = SiteMap.CurrentNode.Clone(true);

SiteMapNode tempNode = temp;

while (tempNode != null)

{

string qs = GetQueryString(tempNode, e.Context);

if (qs != null)

{

tempNode.Url += qs;

}

tempNode = tempNode.ParentNode;

}

return temp;

}

private static string GetQueryString(SiteMapNode node, HttpContext context)

{

if (node["queryStringToInclude"] == null) return null;

NameValueCollection values = new NameValueCollection();

string[] vars = node["queryStringToInclude"].Split(",".ToCharArray());

foreach (string s in vars)

{

string var = s.Trim();

if (context.Request.QueryString[var] == null) continue;

values.Add(var, context.Request.QueryString[var]);

}

if (values.Count == 0) return null;

return NameValueCollectionToString(values);

}

private static string NameValueCollectionToString(NameValueCollection col)

{

string[] parts = new string[col.Count];

string[] keys = col.AllKeys;

for (int i = 0; i <= keys.Length - 1; i++)

{

parts[i] = keys[i] + "=" + col[keys[i]];

}

return "?" + string.Join("&", parts);

}

}

}

SiteMapProvider doesn't take QueryString into consideration

I was pretty stoked to find that ASP.NET 2.0 included a new control called SiteMap. This control will display a breadcrumb trail of links as you navigate through your site. By default, the data is loaded from a web.sitemap file that sits in the web app root. Although you can load the data from any source, this is the default and uses the XmlSiteMapProvider provider to populate the data.

This is an example of data found in the web.sitemap file:
Copy code to clipboard in IE or select code for Firefox

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
<siteMapNode url="~/default.aspx" title="Home">
<siteMapNode url="~/hotels/list.aspx" title="Hotel Listings">
<siteMapNode url="~/hotels/details.aspx" title="Hotel Information">
<siteMapNode url="~/hotels/update.aspx" title="Update Hotel"/>
</siteMapNode>
</siteMapNode>
</siteMapNode>
</siteMap>



This works fine if you aren't ever using querystring variables. But let's say when you get down to the details.aspx page, you tag on a HotelID variable to the querystring. Same thing happens when you go deeper into update.aspx.

Your breadcrumb will look like this:

Home > Hotel Listings > Hotel Information > Update Hotel

Given my current url is "update.aspx?HotelID=1234", I should have some way to propagate the current HotelID querystring variable to the other links, if they need it, which details.apx does.

I tried endlessly to get around this. I tried derriving my own class from XmlSiteProvider, but ASP.NET crashes as soon as you mess w/ the child nodes in the BuildSiteMap() method.

I tried binding an event handler to the SiteMap.SiteMapResolve event - but the Request collection is always unavailable at the time when this event is triggered.

I tried to modify the url's of the nodes showing on the screen dynamically, but supid SiteMapNode.Url property is Read-Only - ARGGG!!

It just amazes me that MS didn't see this coming & allow for it in the XML config. They could have added a "incorporate" attribute in the node that allowed you to specify a comma-delimited list of querystring variables that would be needed for that URL to work, like this:

Copy code to clipboard in IE or select code for Firefox

<siteMapNode url="~/hotels/details.aspx" title="Hotel Information" reliantOn="HotelID, UserID">



or give me a way to add in the querystring variables I want to pull from the current context like this:

Copy code to clipboard in IE or select code for Firefox

<siteMapNode url="~/hotels/details.aspx?HotelID={HotelID}" title="Hotel Information">



And the SiteMapProvider would be smart enough to replace the vars in braces w/ the variable from the current querystring.

I never thought getting something so simple to work would be so hard. If anyone has a solution, pony up.

Wednesday, July 1, 2009

GridView with Thumbnail Images

GridView with Thumbnail Images – Part 2

In Part 1, we have seen how to display the full image in a popup window when the user clicks the thumbnail image displayed in the GridView. We all know that displaying something on a popup window will not give a better user experience. There might be a chance where the popup blocker is turned on in the user’s machine and it will not allow the user to view the full image.

Part 2 of this article will also generate the thumbnail image for the images stored in database to display on the GridView. Like Part 1, when the user clicks on the thumbnail image it will also display the full image, but inside a DIV tag on the same page instead of a popup, which gives a better user experience.

Eclipse Summit

Creating the thumbnail image and displaying the full image is done by the same HttpHandler implementation we have used in Part 1.

Creating Thumbnail Image

For reference purpose, we will have the HttpHandler implementation here also. For description of the code refer Part 1.

Thumbnail.ashx

public void ProcessRequest (HttpContext context) {

string imageid = context.Request.QueryString["ImID"];

if (imageid == null || imageid == "")

{

//Set a default imageID

imageid = "1";

}

SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString);

connection.Open();

SqlCommand command = new SqlCommand("select Image from Image where ImageID="+imageid, connection);

SqlDataReader dr = command.ExecuteReader();

dr.Read();

Stream str = new MemoryStream((Byte[])dr[0]);

Bitmap loBMP = new Bitmap(str);

Bitmap bmpOut = new Bitmap(100, 100);

Graphics g = Graphics.FromImage(bmpOut);

g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;

g.FillRectangle(Brushes.White, 0, 0, 100, 100);

g.DrawImage(loBMP, 0, 0, 100, 100);

MemoryStream ms = new MemoryStream();

bmpOut.Save(ms, System.Drawing.Imaging.ImageFormat.Png);

byte[] bmpBytes = ms.GetBuffer();

bmpOut.Dispose();

ms.Close();

context.Response.BinaryWrite(bmpBytes);

connection.Close();

context.Response.End();

}

Displaying the Original Image

FullImage.ashx

public void ProcessRequest (HttpContext context) {

string imageid = context.Request.QueryString["ImID"];

if (imageid == null || imageid == "")

{

//Set a default imageID

imageid = "1";

}

SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString);

connection.Open();

SqlCommand command = new SqlCommand("select Image from Image where ImageID="+imageid, connection);

SqlDataReader dr = command.ExecuteReader();

dr.Read();

context.Response.BinaryWrite((Byte[])dr[0]);

connection.Close();

context.Response.End();

}

Note

I have given only the ProcessRequest() method in the above code. Refer the source code attachment for the full code. I have set default imageID, make sure you are giving an existing imageId in database for the code to work without any errors.

Using DIV Tag to display the full image

To implement this, we will declare a DIV tag in the ASPX page with display property set to none. This indicates that the DIV tag will not be visible by default when the page is loaded. Declare a tag inside this DIV tag to display the full image. When the user clicks the thumbnail image, we can enable the DIV tag through a javascript function and pass the ImID of the image to call the FullImage.ashx HttpHandler for displaying the full image in the tag. Also, we will have a button called Close inside the DIV tag to close the display of full image i.e. on click of this button we will again make the DIV tag’s display property to none. Refer the below Jscript code,

Sponsors

Useful Books For Developers
Microsoft AJAX Library Essentials: Client-side ASP.NET AJAX 1.0 Explained More books..

Similar Articles
<script language="javascript">

function ShowDIV(ImID)

{

var obj = document.getElementById("IMGDIV");

var im = document.getElementById("imIMG");

if ( obj != null )

{

obj.style.display = "block";

im.src = "FullImage.ashx?ImID="+ImID;

}

}

function HideDIV()

{

var obj = document.getElementById("IMGDIV");

if ( obj != null )

{

obj.style.display = "none";

}

}

</script>

ASPX

<form id="form1" runat="server">

<div>

<asp:GridView Width="500px" ID="gvImages" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" >

<Columns>

<asp:BoundField HeaderText = "Image Name" DataField="imagename" />

<asp:TemplateField HeaderText="Image">

<ItemTemplate>

<a href="javascript:void(ShowDIV('<%# Eval("ImageID")%>'));" > <asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID") %>'/> </a>

</ItemTemplate>

</asp:TemplateField>

</Columns>

<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />

<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />

<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />

<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

<AlternatingRowStyle BackColor="White" />

</asp:GridView>



</div>

<div id="IMGDIV" align="center" valign="middle" runat="server" style="position: absolute;left: 35%;top: 25%;display:none;visibility:visible;vertical-align:middle;border-style:inset;border-color:black;background-color:#c8d1d4;">

<table><tr><td><img id="imIMG" /></td></tr><tr><td> <input type="button" style="vertical-align:text-top" value="Close" onclick="return HideDIV();" /></td></tr></table>

</div>

</form>



ASPX







When we execute the page we will get an output similar to below.

On clicking the thumbnail image, we can view the full image inside a DIV tag like below,

Clicking Close button will close the image, in other words it closes the DIV tag.

Note

The source code attached with this article has a page for uploading images. Create a table with name Image with columns ImageID(Identity), ImageName(Varchar(50)) and Image(image). Configure the connection string in the web.config file corresponding to the sqlserver you use.

Download

Source Code

Conclusion

When we bind the images of different dimensions stored in database to a gridview it will give an inconsistent look to the gridview. This article will address this issue by creating a thumbnail image for the images and then binding it to a gridview. Thus, displaying the full image inside a DIV tag will give a better user experience when compared to popup window.

Happy Coding!!!


Monday, June 29, 2009

Hidden Columns with values: asp:GridView (access the value of the hidden columns in gridview )

If you set Column Visible property to false, this column won't rendered. But if you want these values available, What will you do?

My trick was, set HeaderText to empty, convert the BoundField in TemplateField, and use a HiddenField control. The effect the column won't be visible. Also you can use the controls array to access to value property.

<columns><asp:boundfield datafield="CompanyCode" headertext="Company" sortexpression="CompanyCode">
...
<columns>
<asp:templatefield><itemtemplate><asp:hiddenfield id="hf1" value="">">
runat="server"></asp:hiddenfield></itemtemplate>
...
// accesing the value property
int tmpID =
Convert.ToInt32(((HiddenField)GridView1.SelectedRow.Cells[3].Controls[1]).Value); </asp:templatefield></columns></asp:boundfield></columns>

Tuesday, June 23, 2009

How to add link to a css file in content page

Try this

In VB

Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
Dim css As HtmlGenericControl
css = New HtmlGenericControl
css.TagName = "style"
css.Attributes.Add("type", "text/css")
css.InnerHtml = "@import ""/foobar.css"";"
Page.Header.Controls.Add(css)
End Sub

In C#

protected void Page_Init(object sender, System.EventArgs e)
{
HtmlGenericControl css;
css = new HtmlGenericControl();
css.TagName = "style";
css.Attributes.Add("type", "text/css");
css.InnerHtml = "@import \"/foobar.css\";";
Page.Header.Controls.Add(css);
}

How To Validate a Serial Number During an Installation Created with VSI

How To Validate a Serial Number During an Installation Created with VSI


SUMMARY
In a Visual Studio Installer (VSI) project, the developer has the ability to ad...

In a Visual Studio Installer (VSI) project, the developer has the ability to add a Customer Information dialog box in the user interface. By default, this dialog box has an input field for a serial number. Visual Studio Installer provides minimal support for validating this field. This article provides the steps necessary to include custom code to validate the serial number that is entered by the user. These steps include using the Windows Installer SDK tool Orca, and creating a DLL for which sample code is provided.

To download the Orca tool, see the following MSDN Web site that includes samples, tools, and documentation for the Windows Installer
http://msdn.microsoft.com/downloads/default.asp?URL=/code/sample.asp?url=/msdn-files/027/001/457/msdncompositedoc.xml (http://msdn.microsoft.com/downloads/default.asp?URL=/code/sample.asp?url=/msdn-files/027/001/457/msdncompositedoc.xml)

MORE INFORMATION
Create an empty installer project with VSI.Add a Customer Information dialog box...

  1. Create an empty installer project with VSI.
  2. Add a Customer Information dialog box to the user interface. Do not change the default properties for the dialog box.
  3. Build the project.
  4. Create a custom action DLL. NOTE: You cannot use an EXE custom action because this custom action sets a property and that can only be accomplished by using a DLL, which has a handle to the installation.

  5. On the Tools menu, click the Options Directories tab in your DLL project, and then add the path to the Windows Installer SDK's Include and Lib directories.
  6. In the Project Settings dialog box, add msi.lib to the library list. Use either a .DEF file or the __declspec(dllimport) attribute to export the DLL functions. Note that the PIDKEY property has the value of "XXX -XXXXXXX" where X is a number and there is both a space and hyphen. The following sample code uses a string comparison to determine if the serial number is valid:
    UINT __stdcall VerifyPID(MSIHANDLE hInstall)
    {
    // Local variables
    UINT nRetVal = 0;
    UINT uiMsiRc;
    TCHAR szPidKey[MAX_PATH];
    DWORD dwBuffer;

    dwBuffer = sizeof(szPidKey)/sizeof(TCHAR);

    // First Step - Get the PIDKEY property
    uiMsiRc = MsiGetProperty(hInstall, TEXT("PIDKEY"), szPidKey, &dwBuffer);

    if (ERROR_SUCCESS != uiMsiRc)
    {
    MessageBox(NULL, "PIDKEY", "Not able to retrieve PIDKEY property", MB_OK | MB_ICONEXCLAMATION);
    return 0;
    }

    //Insert code to check PIDKEY here
    int str = lstrcmp(szPidKey, "123 -4567890");

    //If PIDKEY passes check
    if (str == 0)
    MsiSetProperty(hInstall, "PIDCHECK", "TRUE");
    //If PIDKEY doesn't pass check
    else
    {
    MsiSetProperty(hInstall, "PIDCHECK", "FALSE");
    wsprintf(szText, "Please enter the correct code");
    MessageBox(NULL, szText, "PIDCHECK", MB_OK | MB_ICONINFORMATION);
    }

    return 0;
    }
  7. Open the Microsoft Windows installer package (.msi) file that you built with VSI in Orca.
  8. Add the DLL to the Binary table and name it VerifyPIDDll.
  9. Add a new custom action to the Custom Action Table:
    Name - MyPIDChecker;
    Type - 1; Source - VerifyPIDDll; Target - VerifyPID
  10. In the ControlEvent table, find the UserNameForm, which corresponds to the Customer Information dialog box from VSI. Make all changes to the existing rows with UserNameForm in the Dialog column and Next in the Control column:
    1. Replace the ValidateProductID Event with DoAction. On the same row, replace the Argument {} with MyPIDChecker.
    2. Make sure that the value for the Condition column in the row with the EndDialog event is:
      UserNameForm_NextArgs="" AND UserNameForm_ShowSerial=""
    3. Using the PIDCHECK property which was set in the precious sample code, make sure that the value for the Condition column in the row with the NewDialog event is:
      (PIDCHECK="TRUE") AND UserNameForm_NextArgs<>"" AND UserNameForm_ShowSerial<>""
    4. Make sure that the value for the Condition column in the row with the [UserNameForm_ShowSerialDisabled] event is:
      PIDCHECK="TRUE"
  11. Save the .msi file and run the installation.

Deploy your Application or Component Using Windows Installer and serial key

Introduction

When ever we heard about deployment of our application or component we get scared with the traditional scripted setup programs. The main goal of this article is to make .NET programmers to get used to this easy to setup program which allows you to deploy your application even if you don't know how to write the setup script. Microsoft Dot Net Setup & Deployment will make the setup for you with simple clicks. It is also provided with self taught easy driven wizards. Many programmers who are using Microsoft Visual Studio Dot Net they are not fully aware of this windows installer that comes with Visual Studio; they are going for other setup programs that need's hard scripting knowledge. Using Windows Installer is very easy.

About Microsoft Windows Installer

Windows Installer enables you to deploy your Applications and Components in an efficient manner. The installer provides new capabilities to advertise features without installing them, to install products on demand, and to add user customizations. Windows Installer is an installation and configuration service that reduces the total cost of ownership. The installer enables customers to better address corporate deployment and provide a standard format for component management.

Run-Time Requirements

This technology is available as a redistributable for Windows Installer version 2.0, from the Microsoft Downloads.

Features of Windows Installer:

> It is based on a data-driven model that provides all installation data and instructions in a single package. In contrast, traditional scripted setup programs. > It also supports self-repair � the ability for an application to automatically reinstall. > It provides the ability to roll back an installation. The deployment tools in Visual Studio .NET build on the foundation of Windows Installer, providing you with rich capabilities for rapidly deploying and maintaining applications built with Visual Studio .NET. Creating your first Deployment Project Visual Studio provides templates for four types of deployment projects: Setup Project Builds an installer for a Windows-based application. Merge Module Project (.msm) is used to pack components that might be shared by multiple applications. Web Setup Project Builds an installer for a Web application. Cab Project (.cab) Creates a cabinet file for downloading to a legacy Web Browser In addition, a Setup wizard is provided to help step you through the process of creating deployment projects.
  • For a Setup project, the installer will install files into a Program Files directory on a target computer.
  • For a Web Setup project, the installer will install files into a Virtual Root directory on a Web server.
Note If you have created a standard deployment project and later decide to deploy it to a Web, you will need to create a new project.

Five Easy Steps:

Step 1

Open the Visual Studio IDE, and select File->New ->Setup and Deployment Projects. Select the Setup Wizard. Give the File name and location where to store that project as shown in the below figure.

Step 2

Welcome to Setup Project Wizard will appear. It is a simple Four Steps Wizard. Click on the Next Button. In the second step on the wizard it will ask the type of the setup. Choose appropriate here I has chosen setup for windows application and click Next.

Step 3

In the third step of this wizard it will ask to add your developed application or component and other files that you need to place in the clients machine, for example say documentation files

Now It will display as shown below figure.

Step 4

As you can see in above figure, The application folder is the folder where your application and supported files will be installed. User's Desktop and Programs Menu are the clients desktop and programs menus respectively. If Place the short files of your main application & Help files on the user's desktop and programs menu, then during the installation the application, supported files and the shortcuts will be placed automatically as you directed by placing the intended files in Application, User Desktop directories and programs menu.

We can use the following editors during the deployment of our application

You can find these editiors in the solution explorer each as a button as shown below,

File System Editor:

It allows you to add project outputs, files, and other items to a deployment project and specify where they will be installed on the target computer.

Registry Settings Management Editor:

Allows you to specify registry keys and values to be added to the registry of the target computer.

File Types Management Editor :

It is used to establish file associations on the target computer.

Custom Actions Management Editor

Allows you to specify additional actions to be performed on the target computer at the end of an installation.

Launch Condition Management Editor :

Allows you to specify conditions that must be met in order to successfully run an installation.

User Interface Management Editor

As shown in above figure, User InterfaceManagement Editor is used to specify and set properties for predefined dialog boxes that are displayed duging the installation on the target system.

The Customer Information Dialog is important to protect your software.

for that first set the Show SerialNumber property to true ( false by default).

there will be a template for the serial key called SerialNumberTemplate:-

Valid editable characters for the SerialNumberTemplate property are:

Character Meaning

#

Requires a digit that will not be included in the validation algorithm.

%

Requires a digit that will be included in the validation algorithm.

?

Requires an alphanumeric character that will not be included in the validation algorithm.

^

Requires an uppercase or lowercase character. Numeric digits are not valid here.

<

Any characters to the left of this character will not be visible in the dialog box.

>

Any characters to the right of this character will not be visible in the dialog box. Required as a terminator if the <>

note that any other character is treated as a literal constant.

The Default template is <###-%%%%%%%>, Which create two text boxes separated by a dash surrounded by spaces.

The first has # which means that use must enter three numbers but those numbers will not be participating in the validation algorithm.

The Second box had seven digits,

% means that it will be involving in the validation. we apply modulo 7 to the sum of these required digits and if it equate to 0 algorithm returns true and the user can proceed to next dialog box.

Example:-

<###-%%%%%%%>,

124 - 7134501 is one of the key by which the user can proceed to next dialog box.

the first three digits 1, 2 and 4 can be any digits as they will not participate in validation.

the next seven digits 7134501 when you sum them you will get 21 and if you apply 21%7 you will get 0 so this is ok. Like wise you have to proceed.

You can add the dialog boxes like end user license agreement dialog and serial key dialog as shown.

Step 5

When you build the application, you will find the install program for your software or component in the projects debug directory.

Conclusion

I hope that many of the .Net developers who are using traditional setup script programs will find this as a easy and simple way to deploy your software. More than that if you got the licensed Visual Studio .Net with you then there is no need to purchase setup applications from other companies as Visual Studio .Net itself offers it for you. I think that I had given enough features of Windows Installer that comes with Visual Studio .Net. Now it's time that you try it just once to get used to it.

Wednesday, June 10, 2009

Javascript function to make asp.net control invisible

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<script type="text/javascript" language="javascript">

function clearingTheLabels()

{

document.body.style.cursor = 'wait';

var lblGoodbad1='<%=lbtGoodBadStatus.ClientID %>';

var lblwordCount='<%=lblWordCount.ClientID %>';

document.getElementById(lblGoodbad1).style.visibility="hidden";

document.getElementById(lblwordCount).style.visibility="hidden";

document.getElementById('<%=grdScorer.ClientID %>').style.visibility="hidden";

}

script>


In Code behind

btnUrlToCrawl.Attributes.Add("onclick", "clearingTheLabels();");