The AssociatedControlID property of the Label web control

In ASP.NET 2.0 the Label web control exposes a new property, AssociatedControlID.

In web application, we mostly use label control to specify a heading to an input control. The AssociatedControlID property of the Label will take an input control ID as its value. Hence, the Label is associated with the input control. Association means, when the page is executed and if we click on the Label Text the focus will be returned to the associated input control.

Consider, we have a form to get input from users. Every input control like textbox should have a heading text. For example,

<asp:Label ID="Label1" runat="server" Text="Enter your Name" AssociatedControlID="txtName"></asp:Label>

<asp:TextBox ID="txtName" runat="server"></asp:TextBox>

In the above code, Label1 is associated to the TextBox “txtName”. When executed and the focus will be returned to the TextBox if we click on the label text “Enter your Name”.

When the property is set, the rendering of the Label switches from a simple <span> tag to a <label> tag, whose for attribute assumes the client-side ID of the associated control as the value.

An example to clear things up

<asp:label ID="Label1" runat="server" Text="Label" />
<asp:TextBox ID="TextBox1" runat="server" />

becomes:

<span id="Label1">Label</span>
<input name="TextBox1" id="TextBox1" type="Text" />

While

<asp:label ID="Label1" AssociatedControlID="TextBox1" runat="server" Text="Label" />
<asp:TextBox ID="TextBox1" runat="server" />

becomes:

<label for="TextBox1" id="Label1">Label</label>
<input name="TextBox1" id="TextBox1" type="Text" />


New Windows website

Check out the new Microsoft Windows website. They took all the geek stuff out. Now its more clean.
http://www.microsoft.com/windows/default.aspx?icid=winvan

Image Resizing keeping the proportional width and height

This post deals with the resizing of image stored in the server and showing it in an image control.

Suppose we have an image control imgUserImage in a page MyPage.aspx. Usually we set the ImageUrl property as ImageUrl=”~/Images/image.png”. One disadvantage with this method is that, if the image is larger than the image control, then the image will be shortened to the image control’s size and thus the image will loose the proportional width and height.

Here we are going to use a new aspx page which will return the image after resizing. The new image will fit to the image control, keeping its proportional width and height.

Create a new aspx page Thumbnail.aspx

Add the below code in the page load.

private void Page_Load(object sender, System.EventArgs e)
{
string Image = Request.QueryString[“Image”];
if (Image == null)
{
this.ErrorResult();
return;
}
string sSize = Request[“Size”];
int Size = 120;
if (sSize != null)
Size = Int32.Parse(sSize);
string Path = Server.MapPath(Request.ApplicationPath) + “\\” + Image;
Bitmap bmp = CreateThumbnail(Path,Size,Size);
if (bmp == null)
{
this.ErrorResult();
return;
}
string OutputFilename = null;
OutputFilename = Request.QueryString[“OutputFilename”];

if (OutputFilename != null)
{
if (this.User.Identity.Name == “”)
{
// *** Custom error display here
bmp.Dispose();
this.ErrorResult();
}
try
{
bmp.Save(OutputFilename);
}
catch(Exception ex)
{
bmp.Dispose();
this.ErrorResult();
return;
}
}
// Put user code to initialize the page here
Response.ContentType = “image/jpeg”;
bmp.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Jpeg);
bmp.Dispose();
}

Also add the following functions in the same page.

private void ErrorResult()
{
Response.Clear();
Response.StatusCode = 404;
Response.End();
}


public static Bitmap CreateThumbnail(string lcFilename,int lnWidth, int lnHeight)
{
System.Drawing.Bitmap bmpOut = null;
try
{
Bitmap loBMP = new Bitmap(lcFilename);
ImageFormat loFormat = loBMP.RawFormat;
decimal lnRatio;
int lnNewWidth = 0;
int lnNewHeight = 0;


//*** If the image is smaller than a thumbnail just return it
if (loBMP.Width < lnWidth && loBMP.Height loBMP.Height)
{
lnRatio = (decimal) lnWidth / loBMP.Width;
lnNewWidth = lnWidth;
decimal lnTemp = loBMP.Height * lnRatio;
lnNewHeight = (int)lnTemp;
}
else
{
lnRatio = (decimal) lnHeight / loBMP.Height;
lnNewHeight = lnHeight;
decimal lnTemp = loBMP.Width * lnRatio;
lnNewWidth = (int) lnTemp;
}


bmpOut = new Bitmap(lnNewWidth, lnNewHeight);
Graphics g = Graphics.FromImage(bmpOut);
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.FillRectangle( Brushes.White,0,0,lnNewWidth,lnNewHeight);
g.DrawImage(loBMP,0,0,lnNewWidth,lnNewHeight);
loBMP.Dispose();
}
catch
{
return null;
}
return bmpOut;
}

In the MyPage.aspx page set the ImageUrl property of the image control as ImageUrl=”~/Thumbnail.aspx?Size=200&Image=Images/image.jpg”

Note: we are passing a query string ‘Size’ as 140. If we don’t specify the size, then the thumbnail will take the default value 120.

Image Resizing

Image Resizing