Technical Solutions

IE9 - Pinning of image

2011-03-30T08:23:00.002+05:30

In my previous article IE 9 more exciting features I mentioned about pinning of site. In this article we will explore how to use image to pin site in IE 9.

Continue reading of IE9 - Pinning of image

Add image in the gridview and zoom it on click

2010-06-11T08:15:00.003+05:30

Here is a sample to show image in the gridview and zoom it on mouse click. The filename of the image and imageurl is placed in the xml file.

Step 1: Create an Image.xml with FileName and ImageURL attribute. This XML will be datasource to gridview.

<?xml version="1.0" encoding="utf-8" ?>
<Images>
<Image FileName="Suzuki-Swift.jpg" ImageURL="images/Suzuki-Swift.jpg"></Image>
<Image FileName="Aston_Martin-V12_Vantage_2010.jpg" ImageURL="images/Aston_Martin-V12_Vantage_2010.jpg"></Image>
<Image FileName="Honda-CR-Z_2011.jpg" ImageURL="images/Honda-CR-Z_2011.jpg"></Image>
<Image FileName="Hummer-H3_Alpha_2008.jpg" ImageURL="images/Hummer-H3_Alpha_2008.jpg"></Image>
<Image FileName="Mercedes-Benz-SL63_AMG_2009.jpg" ImageURL="images/Mercedes-Benz-SL63_AMG_2009.jpg"></Image >
<Image FileName="Seat-Altea_TDI_2005.jpg" ImageURL="images/Seat-Altea_TDI_2005.jpg"></Image>
</Images>

Step 2: Place a gridview in the aspx page with a BoundField and TemplateField.

<asp:GridView ID="gvImage" runat="server" AutoGenerateColumns="false" OnRowDataBound="gvImage_RowDataBound">
<Columns>
<asp:BoundField HeaderText="FileName" DataField="FileName"></asp:BoundField>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<div>
<asp:Image ID="Image1" Height="80" Width="80" ToolTip="Click to enlarge" runat="server" ImageUrl='<%# Eval("ImageURL") %>' />
</div>
<div id="divImg" runat="server" style ="float: left;">
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle HorizontalAlign="Left" Height="0px" BackColor="#880015" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<AlternatingRowStyle BackColor="#eeeeee" />
</asp:GridView>

Step 3: Create GetImageData() method to load XML data to GridView.

private void GetImageData()
{
string xmlImageFilePath = Server.MapPath(@"Image.xml");
if (File.Exists(xmlImageFilePath))
{
using (DataSet ds = new DataSet())
{
ds.ReadXml(xmlImageFilePath);
gvImage.DataSource = ds;
gvImage.DataBind();
}
}
}

Step 4: gvImage_RowDataBound will add onclick javascript event on each image in a cell, on click of image EnlargeImage javascript will be invoked

protected void gvImage_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
HtmlGenericControl divImg = (HtmlGenericControl)e.Row.Cells[1].FindControl("divImg");
Image img = (Image)e.Row.Cells[1].FindControl("Image1");
img.Attributes.Add( "onclick", "return ElargeImage('" + divImg.ClientID + "','" + img.ImageUrl + "');");

}
}

Step 5: Add EnlargeImage and CloseImage javascript method in the aspx page. EnlargeImage will enlarge the image in the same cell and CloseImage will close enlarged image.

<script language="javascript" type="text/javascript">
function EnlargeImage(divid, src) {
eDiv = document.getElementById(divid);
eDiv.innerHTML = "<table><tr><td><a href="#" onclick=CloseImage('" + divid + "');>Close</a></td></tr><tr><td><img src=\"" + src + "\"/ height="500" width="750"></td></tr><tr><td><a href="#" onclick=CloseImage('" + divid + "');>Close</a></td></tr></table>";
}

function CloseImage(divid) {
eDiv = document.getElementById(divid);
eDiv.innerHTML = ';
}

</script>

Live demo and downloadable code is available in Add image in the gridview and zoom it on click

Set Index of AccordionPane using Javascript

2010-05-28T23:53:00.003+05:30

In this article, I will explain how to set index of Accordion pane using javascript.

Step 1: Create an Accordion control with three panes

<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>Accordion Set Index Demo1</Header>
<Content>First Accordion Pane</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>Accordion Set Index Demo2</Header>
<Content>Second Accordion Pane</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
<Header>Accordion Set Index Demo3</Header>
<Content>Third Accordion Pane</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

Step 2: Create three buttons to set index of each accordion pane. Each button will call SetIndex javascript method.

<asp:Button ID="btnTest" OnClientClick="return SetIndex(0)" runat="server" Text="Set Index1" />
<asp:Button ID="btnTest1" OnClientClick="return SetIndex(1)" runat="server" Text="Set Index2" />
<asp:Button ID="btnTest2" OnClientClick="return SetIndex(2)" runat="server" Text="Set Index3" />

Step 3: Create SetIndex javascript method which sets the index of Accordion Pane based on the index number passed to SetIndex method.

function SetIndex(index) {
var acc = $get('<%=MyAccordion.ClientID%>');
if (acc != null) {
var accBehave = acc.AccordionBehavior;
accBehave.set_SelectedIndex(index);
}
return false;
}

</script>

Visit Set Index of AccordionPane using Javascript for live demo and downloadable code.

LINQ - How to read and search an element in XML

2010-05-15T09:02:00.006+05:30

In this article, I will explain how to use XDocument to read XML Attribute value.

Step 1: Add a TextBox and Button, TextBox will be used to search the attribute value based on the Id entered in the textbox.

<asp:TextBox ID="txtId" runat="server"></asp:TextBox>
<asp:Button ID="btnGetValue" Text="Get Value" runat="server" OnClick="btnGetValue_Click" />

Step 2: Create a XML file like below structure.

<Messages>
<Message id='One'>
<Display>Messageid is one.</Display>
</Message>
<Message id='Two'>
<Display>Messageid is two.</Display>
</Message>
<Message id='Three'>
<Display>Messageid is three.</Display>
</Message>
<Message id='Four'>
<Display>Messageid is four.</Display>
</Message>
<Message id='Four'>
<Display>Messageid is again four.</Display>
</Message>
<Message id='One'>
<Display>Messageid is again one.</Display>
</Message>
</Messages>

Step 3: Create a method GetValues which will return List of matching elements found in the XML document.

public static List<string> GetValues(string strFileName, string strDescendants, string strAttribute, string strAttributeValue, string strElement)
{
XDocument xmlDoc = XDocument.Load(strFileName); //Open XML file
var xmlValue = from c in xmlDoc.Descendants(strDescendants)
where c.Attribute(strAttribute).Value.ToLower().Equals(strAttributeValue.ToLower())
select (string)c.Element(strElement);
List<string> strList = xmlValue.ToList<string>();
return strList;
}

Step 4: btnGetValue_Click event of button will invoke GetValues

protected void btnGetValue_Click(object sender, EventArgs e)
{
string strFileName = Server.MapPath("Message.xml");
string strDescendants = "Message";
string strAttribute = "id";
string strAttributeValue = txtId.Text;
string strElement = "Display";
List<string> lstValues = GetValues(strFileName, strDescendants, strAttribute, strAttributeValue, strElement);
if (lstValues.Count > 0)
{
foreach (string strValue in lstValues)
{
Response.Write(strValue + "<br/>");
}
}
else
{
Response.Write("No matching record found.");
}
}

Visit LINQ - How to read and search an element in XML for live demo and download the code

Change image in AccordionPane Header on collapse and expand

2010-05-06T22:51:00.003+05:30

Here's how to use image in AccordionPane header and change the image on expand and collapse.

Step 1: Create an Accordion with three AccordionPane

<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Content>
First Accordion Pane
Content>
ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Content>
Second Accordion Pane
Content>
ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
<Content>
Third Accordion Pane
Content>
ajaxToolkit:AccordionPane>
Panes>
ajaxToolkit:Accordion>

Step 2: Add

in each AccordionPane like below. Header contains anchor and image, anchor tag invokes javascript meethod ChangeImage. The id of the image needs to passed to ChangeImage javascript. The id of the image should be same followed by 1,2 and 3 etc because we need to chane image(Collapse Image) of previously opened accordion pane.

This header will go in the AccordionPane with ID AccordionPane1

<Header>
<a href="" onclick="ChangeImage('imgAcc1');" class="accordionLink">
<img src="right_arrow.jpg" id="imgAcc1" />Accordion Image Demo1a>
Header>

This header will go in the AccordionPane with ID AccordionPane2

<Header>
<a href="" onclick="ChangeImage('imgAcc2');" class="accordionLink">
<img src="right_arrow.jpg" id="imgAcc2" />Accordion Image Demo2a>
Header>

This header will go in the AccordionPane with ID AccordionPane3

<Header>
<a href="" onclick="ChangeImage('imgAcc3');" class="accordionLink">
<img src="right_arrow.jpg" id="imgAcc3" />Accordion Image Demo3a>
Header>

Step 3: Add ChangeImage javascript, while loop will execute less than or equal to number of images.

Visit www.dotnetspeaks.com for live Demo and download the code

Wrap Column in GridView

2010-05-04T07:17:00.003+05:30

This article tells how to wrap text in GridView column. There is no inbuilt wrapping of text property is available in gridview column. If we put some long text without any space like URLs in a column of gridview, it doesn't wrap and column width increases to a width of maximum non space text like below

It should wrap text after certain specified character even if there is no space between characters like below screen shot.

Let's see how we can do this:

Step 1: Place a gridview in the aspx page

<asp:GridView ID="gvWrappinColumn" runat="server" AutoGenerateColumns="false">
<Columns>
Columns>
<HeaderStyle HorizontalAlign="Left" Height="20px" BackColor="#880015" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<AlternatingRowStyle BackColor="#eeeeee" />
asp:GridView>

Step 2: Create GridViewItemTemplat class which will inherit ITemplate interface, implement InstantiateIn member of ITemplate, InstantiateIn member will create Literal object which will be placed in the gridview column to wrap the text. Literal needs to bind in every row of the column using DataBinding and EventHandler and then it needs to add in the container.

void ITemplate.InstantiateIn(System.Web.UI.Control container)
{
Literal lit = new Literal();
lit.DataBinding += new EventHandler(lit_DataBinding);
container.Controls.Add(lit);
}

Step 3: lit_DataBinding method will bind Literal control to every row, add
after certain characters as per need before assigning to Literal. Here i am putting
after every 40 characters.

protected void lit_DataBinding(object sender, EventArgs e)
{
int intNoOfCharacters =40;
Literal litColData = (Literal)sender;
GridViewRow container = (GridViewRow)litColData.NamingContainer;
object colDataValue = DataBinder.Eval(container.DataItem, strColName);
if (colDataValue != DBNull.Value)
{
string str = colDataValue.ToString();
int i = 0;
while (i < style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "> {
if (str.Contains("
"))
{
i = i + intNoOfCharacters + 5;
}
else
{
i = i + intNoOfCharacters;
}
if (i < style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "> {
str = str.Insert(i, "
");
}
}
litColData.Text = str;
}
}

Step 4: Create a constructor GridViewItemTemplate and declare two global variables ListItemType and string

ListItemType lstItemType;
string strColName;
public GridViewItemTemplate(ListItemType lstItmType, string colname)
{
lstItemType = lstItmType;
strColName = colname;
}

Step 5: Create GetData() method to bind data to GridView

private DataTable GetData()
{
DataTable dt = new DataTable("Data");
dt.Columns.Add(new DataColumn("ID"));
dt.Columns.Add(new DataColumn("Comments"));
dt.Rows.Add(1, "Testing column of GridView Wrapping1");
dt.Rows.Add(2, http://www.bing.com/search?q=microtsoft+visual+studio+2010&form=QBLH&qs=n&sk=);
dt.Rows.Add(3, "Testing column of GridView Wrapping2");
return dt;
}

Step 6: On Page_Load method of aspx page create a BoundField and TemplateField, create instance of GridViewItemTemplateclass and assign it to ItemTemplate of TemplateField.

protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = GetData();
BoundField bndFld = new BoundField();
bndFld.DataField = "id";
bndFld.HeaderText = "ID";
gvWrappinColumn.Columns.Add(bndFld);
TemplateField tmpltField = new TemplateField();
tmpltField.ItemTemplate = new GridViewItemTemplate(ListItemType.Item, "Comments");
gvWrappinColumn.Columns.Add(tmpltField);
gvWrappinColumn.DataSource = dt;
gvWrappinColumn.DataBind();
}

This ends the article, you can see Live Demo and download the code as well.

visit www.dotnetspeaks.com for live demo and download the code.

OnDoubleClick Copy One GridView Row to Another GridView Row

2010-05-01T14:47:00.003+05:30

Recently in the forum i saw a question on copying row from one GridView to another Gridview. Here i will discuss how we can do that.

Step 1: Create two gridview like below with ID and Country column. First one is source and second one is destination grid

Source Grid:

<asp:GridView ID="gvSource" runat="server" AutoGenerateColumns="False" AllowPaging="true" PageSize="4" OnPageIndexChanging="gvSource_PageIndexChanging" CellPadding="5" Font-Name="verdana" OnRowDataBound="gvSource_RowDataBound">
<RowStyle BackColor="#FFFFFF" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<Columns>
<asp:BoundField DataField="id" ItemStyle-HorizontalAlign="Left" HeaderText="ID" ItemStyle-Width="50px" ItemStyle-Font-Bold="true" ItemStyle-VerticalAlign="Top">asp:BoundField>
<asp:BoundField DataField="country" HeaderText="Country" ItemStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Top" ItemStyle-Width="80px">asp:BoundField>
Columns>
<HeaderStyle HorizontalAlign="Left" Height="20px" BackColor="#880015" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<AlternatingRowStyle BackColor="#eeeeee" />
asp:GridView>

Destination Grid:

<asp:GridView ID="gvDestination" runat="server" AutoGenerateColumns="False" AllowPaging="true" PageSize="4" OnPageIndexChanging="gvDestination_PageIndexChanging" CellPadding="5" Font-Name="verdana" OnRowDataBound="gvDestination_RowDataBound">
<RowStyle BackColor="#FFFFFF" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<Columns>
<asp:BoundField DataField="id" ItemStyle-HorizontalAlign="Left" HeaderText="ID" ItemStyle-Width="50px" ItemStyle-Font-Bold="true" ItemStyle-VerticalAlign="Top">asp:BoundField>
<asp:BoundField DataField="country" HeaderText="Country" ItemStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Top" ItemStyle-Width="80px">asp:BoundField>
Columns>
<HeaderStyle HorizontalAlign="Left" Height="20px" BackColor="#880015" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<AlternatingRowStyle BackColor="#eeeeee" />
asp:GridView>

Step 2: Add a button which won't be visible on UI

<asp:Button runat="server" ID="btnPopulate" Style="display: none" OnClick="btnPopulate_Click" />

Step 3: Now fill the source grid by calling FillSource() method in the Page Load method

private void FillSource()
{
gvSource.DataSource = GetData();
gvSource.DataBind();
}

private DataTable GetData()
{
DataTable table = new DataTable();
table.Columns.Add("id", typeof(string));
table.Columns.Add("country", typeof(string));
table.Rows.Add(1, "India");
table.Rows.Add(2, "USA");
table.Rows.Add(3, "UK");
table.Rows.Add(4, "Canada");
table.Rows.Add(5, "Spain");
return table;

}

Step 4: Add GetRowData javascript method on ondblclick in the RowDataBound event of the source gridview(gvSource) which will be invoked on click of each row

protected void gvSource_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("ondblclick", "GetRowData('" + e.Row.RowIndex + "')");
}

}

Step 5: Add GetRowData javascript method in aspx page, this method will invoke btnPopulate_Click method of the hidden button which created in step 2.

function GetRowData(index)
{
__doPostBack('', index);

}

script>

Step 6: btnPopulate_Click method will get the row index which passed from javascript and invoke method FillDestinationGrid

protected void btnPopulate_Click(object sender, EventArgs e)
{
int intIndex = Convert.ToInt16(Request.Form["__EVENTARGUMENT"].ToString());
FillDestinationGrid(intIndex);
}

Step 7: Fill destination will append the selected row from source to destination grid

private void FillDestinationGrid(int intIndex)
{
DataTable table;
if (Session["DestinationTable"] == null)
{
table = new DataTable();
table.Columns.Add("id", typeof(string));
table.Columns.Add("country", typeof(string));
}
else
{
table = (DataTable)Session["DestinationTable"];
}
GridViewRowCollection gvRow = gvSource.Rows;
table.Rows.Add(gvRow[intIndex].Cells[0].Text, gvRow[intIndex].Cells[1].Text);
gvDestination.DataSource = table;
gvDestination.DataBind();
Session["DestinationTable"] = table;
}

Step 8: Add below line in Page_Load method to have post back reference call from javascript using __doPostBack

this.ClientScript.GetPostBackEventReference(this,string.Empty);

Step 9: Now add below two method to handle paging in the source and destination gridview

protected void gvSource_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gvSource.PageIndex = e.NewPageIndex;
FillSource();
}

protected void gvDestination_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gvDestination.PageIndex = e.NewPageIndex;
FillDestination();
}

Step 10: Make EnableEventValidation="false" in page directive

This ends the article.

Visit www.dotnetspeaks.com for live demo and download the code

Session End on Browser Close or Tab Close or Moving out of the site

2010-03-01T22:34:00.006+05:30

I have seen lots of post in the forum asking about kill session on close of browser or tab or moving out of the site.

We can kill session on any of the following case mentioned above using Ajax Callback with Javascript.

Here are the steps to follow:

Step 1: Add ScriptManager in the aspx page

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">

Step 2:; Add onuload in body tag which will call BrowserClose method in Javascript.

Step 3:Now add javascript method of BrowserClose which will call KillSession method of code behind

function BrowserClose()
{
PageMethods.KillSession();
}

</script>

Step 4:In code behind file, KillSession method will contain the Session.Abandon which will abandon the session.

KillSession method has to be signatured with WebMethod.

Make the KillSession method static

[System.Web.Services.WebMethod()]
public static void KillSession()
{
HttpContext.Current.Session.Abandon();
}

Step 5 : The code which needs to be executed on should be placed in Session_End method of Global.asax.cs

protected void Session_End(object sender,EventArgs e)
{
//Code to execute on Session End
}

For live demo and code download check www.dotnetspeaks.com

Microsoft Security Essentials - Free Antivirus for Home PC

2010-02-28T13:15:00.004+05:30

Now you can secure your Home PC by free anitvirus provided by none other than Microsoft itself. It guards your PC against Viruses, Spyware, and other malicious software.

Learn and download Microsoft Security Essentials

Disable post back on enter key in TextBox

2010-02-26T22:44:00.001+05:30

By default when you hit enter while cursor is in the TextBox, the first button on the page event gets fired.

I have added a TextBox and a Button in the aspx page like below

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

<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />

And the below code in the code behind

protected void Button1_Click(object sender, EventArgs e)
{
Response.Write("Button1");
}

Now run the application and hit enter key while cursor is in TextBox, you will notice that "Button1" printed on the page.

To avoid executiong of code behind of the button put

OnKeyDown = "return (event.keyCode!=13);"

in the TextBox like below

<asp:TextBox ID="TextBox1" OnKeyDown = "return (event.keyCode!=13);" runat="server"></asp:TextBox>

Now run the application again and hit enter key, this time Button Click even won't fire.

Happy Coding :)

VS2010 Express Edition

2010-02-23T22:43:00.002+05:30

VS2010 Express Beta 2 has been launched. It is set of free tools which includes

Microsoft Visual Bascic 2010 Express

Microsoft Visual Web Developer 2010

Microsoft Visual C# 2010 Express

Microsoft® Visual C++ 2010 Express

I have tried VS2008, i found it pretty good as you can do most of the basic development in express edition. Express edition is just to get hands on to the software. This is very useful for students or for those who wants to learn the technology. It is not for advanced and professional development as features are limited for any advanced development.

Download all these tools Here

.NET 4.0 Beta Exams - Absolutely Free

2010-02-21T14:53:00.003+05:30

.NET 4.0 exams are on its way and will be available between March 31, 2010 to April 20, 2010 Beta Exams

The exams which will be availabe are:

70-511 TS: Windows Applications Development with Microsoft® .NET Framework 4
70-513 TS: Windows Communication Foundation Development with Microsoft® .NET Framework 4
70-515 TS: Web Applications Development with Microsoft® .NET Framework 4
70-516 TS: Accessing Data with Microsoft® .NET Framework 4
70-519 Pro: Designing and Developing Web Applications using Microsoft® .NET Framework 4

70-518 Pro: Designing and Developing Windows® Applications using Microsoft .NET Framework 4 will not be available in this time frame but should be available in the April time frame.

Question: How to participate in beta exams?
Answer : Participating in Beta Exams

Passing the beta exam

You usually receive your exam score by the time the final version of the exam becomes available—this may be 16 to 20 weeks after you take the exam. This timeframe reflects the comprehensive process used to evaluate the beta exam results. If you pass the beta exam, you earn credit for that exam and any resulting certification. You do not need to retake the exam in its final version if you pass the beta version.
If you do not pass the beta exam, you cannot retake it. You must wait to take the exam in its final version at the regular cost of US$125. There are a limited number of seats available for beta exams, and it is important to allow a variety of candidates to participate. You should not use a beta exam as a practice test.
If you believe your score should be available and it is not, first check if Prometric has posted it. If not, contact Prometric. If Prometric has posted a score, but you do not see the score on your Microsoft transcript, contact your Microsoft Regional Service Center.

Best of Luck :)

ValidatorCallOutExtender in TextBox in Gridview

2010-02-19T22:27:00.005+05:30

Place a gridview with two itemtemplate.
One template to keep TextBox, RequiredFieldValidator and ValidatorCalloutExtender.
Second template will contain Button. Copy and paste the below code on the aspx page

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound">

<asp:TemplateField>

<asp:TextBox runat="server" ID="MyTextBox"

BorderStyle="solid" BorderWidth="1px" BorderColor="#a9a9a9" />

<asp:RequiredFieldValidator runat="server" ID="MyReq"

ControlToValidate="MyTextBox" Display="None"

ErrorMessage="<b>Required Field Missing</b><br />A name is required." />

<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="NReqE1"

TargetControlID="MyReq"

HighlightCssClass="validatorCalloutHighlight" />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<asp:Button runat="server" ID="btn" Text="Testing"

BorderStyle="solid" BorderWidth="1px" BorderColor="#a9a9a9"/>

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="lastName" HeaderText="Last Name" />

</Columns>

</asp:GridView>

Now we need to bind TextBox, RequiredFieldValidator and Button with validation group. ValidationGroup name should be unique for each pair of TextBox and Button. To give unique name to ValidationGroup of each pair of TextBox and Button, we need to bind the TextBox and Button GridView1_RowDataBound. Refer below code.

protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

TextBox tbx = (TextBox)e.Row.FindControl("MyTextBox");

RequiredFieldValidator rfv = (RequiredFieldValidator)

e.Row.FindControl("MyReq");

Button btn = (Button)e.Row.FindControl("btn");

string validationGroupText = "ValidationTest" + (e.Row.DataItemIndex + 1).ToString();

tbx.ValidationGroup = validationGroupText;

rfv.ValidationGroup = validationGroupText;

btn.ValidationGroup = validationGroupText;

}

Compile and run the application.

Happy Coding :)

VS2010 First Look Features

2010-02-16T21:03:00.006+05:30

The first change you will notice when you open VS2010 web project is the solution explorer with addtional folders and files.

You will notice Account , Scripts and Styles folder.

Accont folder is consisting of ChangePassword.aspx, ChangePasswordSuccess.aspx, Login.aspx, Register.aspx and web.config files.

Scripts folder is consisting of jquery-1.3.2-vsdoc.js, jquery-1.3.2.js, jquery-1.3.2.min.js

Styles folder is consisting of Site.css.

You will also notice that About.aspx part of the project.

Now, Master page is added by default. You won't see form tag in the page as master page has been added by default.

Now it is easy to find out where all declared variable has been used. Select the variable and all the variables in that scope will be selected.

Now intellisense is more smarter, it searches the occurrence of typed character rather than searching for matching characters from the begining.

In the below screenshot, the typed letter is "in" but you can see TabIndex also along with Init as in occurs in TabIndex also.

Use it to feel the all new exciting features of VS2010.

Allowing only alphabets or numbers in the textbox

2010-02-07T14:54:00.006+05:30

Place two text boxes on the page one to validate numbers and other to validate alphabets.

<asp:TextBox id="txtNumber" runat="server" onkeypress= "validateNumber()"/>

<asp:TextBox id="txtAlpha" runat="server" onkeypress= "validateAlphabet()"/>

Place the below javascripts to validate number and alphabet, first javascript will allow to enter only 0 to 9 and second javascript will allow to enter only a-z and A-Z

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

function validateNumber()
{
if(!(event.keyCode >= 45 && event.keyCode <= 57))
{
event.returnValue=false;
}
}

function validateAlphabet()
{
if(!(event.keyCode >= 65 && event.keyCode <= 90) && !(event.keyCode >= 97 && event.keyCode <= 122))
{
event.returnValue=false;
}
}

Happy Coding!

Few exciting feature of Bing

2010-02-05T21:54:00.011+05:30

This is my first non technical blog as i couldn't resist myself to blog about the exciting feature of bing.

The history feature of bing shows 24 last searched kewwords.

The small arrow button on right bottom of the bing page provides the way to view previous days images.

This wonderful feature gives the way to see the price on search page itself.

Quick tab feature helps the end user to quickly get the related articles on the search page itself.

This feature enables to see the related video of searched items on the page itself without leaving search page.

This feature enables you to get the recipes of the searched items.

Click on recipes of chicken, you will get the below image which is truly exciting.

ASP.NET - Refresh Part of a Page

2009-07-29T20:55:00.002+05:30

We often come across a scenario where we need to update part of a page. We can use IFrame to refresh part of a page.
We can achieve this using Ajax also but here I am discussing how we can achieve without using Ajax.

1. Add a page in the project with name “MyPage.aspx”, copy and paste below code in the aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Refresh part of page</title>
    <meta http-equiv="Refresh" content="5" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>
</html>

The below line of code in the head section of the above code will refresh the page after every 5 second.

I have placed a Label on the page which will show the time on the page on each refresh of the page.

Put below bold and italic lines of code in the Page_Load method of MyPage.aspx page, this line will refresh the time on each refresh of the page.

protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = "This Page has been refrested at " + DateTime.Now.ToString();
    }

2. Now add another page in the project with name “Refresh.aspx”, copy and paste below code in aspx page of Refresh.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Refresh.aspx.cs" Inherits="Refresh" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body onload="refreshiFrame();">
    <form id="form1" runat="server">
    <asp:Label ID="Label1" runat="server" Text="" />
    <div>
            <iframe id = "myFrame" src = "MyPage.aspx" frameborder = "0" style="width: 500px;height: 100px">
            </iframe>
    </div>
    </form>
</body>
</html>

I have added an IFrame to achieve the goal of part refresh of the page. I have added src property and set it to MyPage.aspx. I have created MyPage.aspx in the first page.

I have also put a label outside the iframe, it will show the Date and time when Refresh.aspx page will load.

Copy and paste below bold line of code on Page_Load method

    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToString();
    }

Now run Refresh.aspx page, you will notice that the time on the Refresh.aspx won’t change but the time on MyPage.aspx will change after every 5 seconds

Happy Coding :)