ThreadAbortException

May 2007 Entries

Next Web Day - Bangalore & Chennai

We did the Next Web Day in Hyderabad last Sunday and had a good number of audience pouring in, despite it, being a Sunday and with short notice.  Our sincere apologies though, for the short notice.

I presented on Microsoft ASP.NET AJAX & Windows Live and my friend Pandurang Nayak presented on Silverlight.  If you had missed the action you can catch up the same from our online webcasts, which we did,  couple of weeks ago.  The webcasts can be downloaded from http://www.microsoft.com/india/webcasts/ondemand.aspx  Check the "Next Generation Web Applications" link in the left.  You will find my Exploring ASP.NET AJAX, Part II of the same as well as the Ajax Control Toolkit Sessions.  You can also find other useful webcasts.

Meanwhile, as I had written earlier, we are doing this Next Web Day in Bangalore as well as Chennai this weekend.  The location and other details are as follows:-

Next Web Day - Bangalore

Microsoft GTSC
Krishna Hall
Embassy Building, B Block
Embassy Golf Links Business Park
Off Intermediate Ring Road
Domlur
Bangalore

Date: Saturday, 2nd June 2007

Registration: 2pm onwards

Next Web Day - Chennai

Virtusa (India) Pvt Ltd
The Lords
No. 1 & 2, Northern Extension Area
Thiru-Vi-Ka Industrial Estate
Chennai – 600032

Date: Sunday, 3rd June 2007

Registration: 09:30 am onwards

So if you are in Chennai / Bangalore you can catch up our team live during these events.

If there are any specific topics you would want us to cover, within the broader topics, please post your comments on the same.

Cheers !!!  

TechMela - Web Platform Track

If you have been following my posts on TechMela, you would be aware that I am delivering the Web Platform (Web Fundamentals) Track out of which I am presenting three sessions on Day 1.

Just for the benefit of people who joined here newly, TechMela is our grand three day technical event which we are rolling out in Mumbai, this year.  It is a collaboration of information for Application Developers, Web Developers, IT Professionals, Mobile Developers, Designers and what not?  For more information visit http://www.techmela.com

Well, coming back to the Web Fundamentals track, I am presenting on the following tracks on Day 1

  • Upgrading your ASP.NET 2.0 applications to AJAX
  • Deep Dive on ASP.NET 2.0 AJAX
  • Building a Complete Web Application Using ASP.NET "Orcas" and Microsoft Visual Studio Codename "Orcas"

All of these sessions are back to back and are planned as a series to get you familiar with Ajax, diving deep into the core features of Ajax and finally on some of new features bundled out with "Orcas" our next version of Visual Studio.

The Web Platform track has certain interesting topics like Rich Internet Applications, Windows Live, which are part of Day 2 & Day 3 which you wouldnt want to miss out.

To get the overall agenda, visit http://www.techmela.com/tec_agenda.htm

Watch me write more on this space on the topics.

Cheers!!! 

TechMela, its all different

TechMela is all different. It is a fusion of technologies, expertise and a cliche of our individual events. We earlier used to have Tech Ed for developers, Mobile and Embedded Developers Conference for all those Mobile Devs and bunch of other events like IT Pro for IT Professionals.

TechMela brings it all to gether. You never miss out even a single topic when you land up at Tech Mela. With over 3 days, 7 Tracks, 150 sessions and 300 labs, it cannot get bigger than this!

TechMela - Business

TechMela also has something for Business folks too, this time. Tech Mela for business is an invitation only event for upto 500 key decision makers to participate and share their views as well as learn how they can monetize on developing using our latest technologies. If you are a Business guy and would need an invitation please visit http://www.techmela.com/business.htm for more information.

TechMela - Technology

Tech Mela for technology, for all you tech guys, it has a whooping 150 Sessions spread across 3 days and you never get exhausted with the flood of new things to learn.

Couple of Quick Facts

TechMela is happening in Mumbai this year

The Dates are 14th - 16th June 2007

For registration and more information, visit http://www.techmela.com/tec_agenda.htm

TechMela Site

http://www.techmela.com is your one stop shop for all information on TechMela.

I am presenting the Web Track and watch out for more information about the Web Track as I prepare for presenting the same.

Cheers !!!

Consuming the Live Search API in your Web Applications - Windows Live

Well, I havent talked much about Windows Live and when the whole world is keen about our Live initiative and the exciting bunch of services we have unveiled, I thought of starting it up, with an article on how you can consume the Live Search API and implement Live Search within your web applications.

Before getting started, there are a few things you would need to know about Live.

Windows Live is a platform.  It is a collection of online services which can be utilized as well as programmed against.  To read more about Live from a Developer perspective, visit http://dev.live.com

I want to divide this article into four sections

1. Creating an Application ID for consuming the Live Service

2. Implementing the Live Search in your Web Application

3. Tip / trick on overcoming against proxies in the above sample

4. Resources for getting started with similar APIs.

Creating an Application ID for consuming the Live Service

Before you could start using the Live Search API, you need an Application ID for being able to query using the Service.  To get the same, visit http://search.msn.com/developer.

Sign in using your passport account (if you have a hotmail / msn.com account its already a passport) so that you can create / manage Application IDs.  If you are using it for the first time, you would have the option to only Create Application IDs.  Specify an Application name and you would be provided with an Application ID which you  must be using in your sample in the Section 2 of this article.  There after you can login to this site and Edit / Delete and manage your Application ID settings.

Implementing the Live Search in your Web Application

Once you have created the Application ID, you are all set for programming the Live Search API and getting results.  For my sample, I have used a simple textbox, Button, Label and a Gridview for displaying results.  Let us see how the ASPX File looks like

<form id="form1" runat="server" defaultbutton="Button1">
    <div>
        <asp:TextBox ID="TextBox1" runat="Server"></asp:TextBox>
        <br />
        <asp:Button ID="Button1" runat="Server" Text="Search" OnClick="Button1_Click" />
        <br />
        <hr />
        <asp:Label ID="Label1" runat="Server"></asp:Label>
        <br />
        <br />
        <asp:GridView ID="GridView1" runat="Server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false">
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <RowStyle BackColor="#EFF3FB" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:BoundField DataField="Title" HeaderText="Title" ControlStyle-Width="30%" />
                <asp:BoundField DataField="Description" HeaderText="Description" ControlStyle-Width="60%" />
                <asp:HyperLinkField DataTextField="Url" HeaderText="URL" ControlStyle-Width="20%" DataNavigateUrlFields="URL" />
            </Columns>
        </asp:GridView>
    </div>
    </form>

In this sample, I am binding the Title, Description as well as the URL Fields.  But there are more fields which you may want to bind to.  You can keep adding BoundFields to the above Columns collection of the GridView to add more fields.

The Next step is to consume the Live Search Web Service.

The WSDL for the Search Service is http://soap.search.msn.com/webservices.asmx?wsdl.

Add Web Reference to your Website with the above WSDL.  The default Web Reference is com.msn.search.soap, but you can change it as per your wish.  However, this name should be referred in the Code behind file under the name space declarations.

Once you are done adding the web reference, go to the above ASPX Page - design view and double click on the "Search" button to generate the Button Click event.

Go to the Code behind and in the name space declarations, add the following namespaces:-

using System.Web.Services.Protocols;
using com.msn.search.soap;
using System.Net;

Go to the Button Click event and add the following code:-

 try
        {
            MSNSearchService s = new MSNSearchService();
            SearchRequest searchRequest = new SearchRequest();
            int arraySize = 1;
            SourceRequest[] sr = new SourceRequest[arraySize];

            sr[0] = new SourceRequest();
            sr[0].Source = SourceType.Web;

            searchRequest.Query = TextBox1.Text;
            searchRequest.Requests = sr;
 
           searchRequest.AppID = "APP ID you generated from http://search.msn.com/developer";
            searchRequest.CultureInfo = "en-US";
            SearchResponse searchResponse;

            searchResponse = s.Search(searchRequest);

            foreach (SourceResponse sourceResponse in searchResponse.Responses)
            {
                Result[] sourceResults = sourceResponse.Results;
                if (sourceResponse.Total > 0)
                {
                    Label1.Text = sourceResponse.Source.ToString() + " - Total Results: " + sourceResponse.Total.ToString();
                }
                GridView1.DataSource = sourceResults;
                GridView1.DataBind();
        }
        catch (SoapException ex)
        {
            Response.Write(ex.Message);
        }
        catch (WebException ex)
        {
            Response.Write(ex.ToString());
        }

In the above sample,  replace the App ID comment with the actual Application ID you generated out of http://search.msn.com/developer

Tip / Trick on overcoming against proxies

Your sample is ready to run.  However, in case you are behind proxy / firewall, there might be a System.Net Exception error you get at catch.  To solve that, use the following settings in the Web.Config.  You need to place the following settings above <system.web> start tag or after the </system.web> end tag, basically outside the system.web settings.

<system.net>
    <defaultProxy>
      <proxy usesystemdefault="False"
             proxyaddress="Specify Your Proxy Address: Specify Port Number"
bypassonlocal="False"/>
    </defaultProxy>
  </system.net>

Earlier, I had written a detailed article on this topic, as well as how you can specify the above settings programmatically.  Check http://geekswithblogs.net/ranganh/archive/2005/08/29/51474.aspx for the same.

When you now run your Website, you can see that upon entering a search item in the TextBox and clicking on the "Search" button, you get the search results from Live.com bound to your GridView

Resources

To learn more about Live visit http://www.live.com

To learn more about the Developer services visit http://dev.live.com

For more samples on the other APIs, visit http://msdn2.microsoft.com/en-us/library/bb264574.aspx

Cheers!!!

ASP.NET AJAX Developer Virtual Classrooms

Recently, we did a webcast series on ASP.NET AJAX, Silverlight and Windows Live.  If you missed out the same, the Webcasts can be downloaded for offline viewing from http://www.microsoft.com/india/webcasts/ondemand.aspx

Visit the above page and Click on "Next Generation Web Applications" tab in the left and you can find a bunch of our webcasts including the ASP.NET AJAX Webcasts.  If you scroll down a little you can find all my webcasts starting with ASP.NET AJAX - Part I to AJAX Control Toolkit.  Also, you can download useful webcasts on Orcas, Silverlight etc.,

Meanwhile, I am doing a Developer Virtual Classroom series, starting June 4th - June 8th.  Its a 5 day virtual classroom at 2:30pm - 4pm everyday.  Whats different about Virtual Classroom is that, you get to take online evaluation and can be more participative than just listening.  Also, upon completion of evaluations and 80% correctness, you can win certificate of participation from Microsoft.

The series is going to focus on ASP.NET AJAX in detail and it starts with introduction to Ajax, Partial Page Updates etc., and ends with some advance extender example on AJAX Control Toolkit.  So, go ahead and if you havent registered for the Virtual Classrooms, you can register for the same from http://www.microsoft.com/India/virtualclassrooms/

If you are looking for specific area in AJAX, please post the same in the comments so that I can try to include the same during the virtual classroom.

Hoping to see you all there !

Cheers !!

Next Web Day - Gear up to the Next Gen Web Technologies

We are conducting the Next Web Day event in Hyderabad, Bangalore and Chennai this month.  The Hyderabad event is happening on Sunday, 27th May 2007.  It is a great opportunity for the Web Developers to gear up their skills to the next level as well as learn about the Next Web Technologies like AJAX, Silver Light and the Live Platform.

The event information for Hyderabad is as below.  Would post shortly on the other cities and venue.

Date    : Sunday, May 27, 2007

Venue  : MPR Room, Microsoft Campus 2, Gachibowli

Time    : 09:00 AM – 01:00 PM

 

Next Gen Web
ASP.NET AJAX – Exploring the ASP.NET AJAX, AJAX Extensions, Extenders and the AJAX Control Toolkit and how you can integrate it with your existing ASP.NET 2.0 Web Applications
 
Speaker: Harish Ranganathan
 

 

Rich Internet Applications
Light up the web using Silver Light.  Explore Silver light and its media capabilities as well as its integration with .NET
 
Speaker: Janakiram MSV
 
 

 

Windows Live
Get an overview of Windows Live and how cloud services can be consumed
 
Speaker: Harish Ranganathan
 
 Looking forward to see you there !!!
 
 Cheers !!!

ASP.NET AJAX Extensions Update Panel and Triggers

So far we have been using Update Panels with controls inside the Update Panel which initiate the partial page refresh.

What if we want to refresh an Update Panel based on an external event like a Button which is not necessarily a part of the UpdatePanel's content template?  Wait ! Dont jump into ugly ways of refreshing the whole page using F5 !

Triggers is your friend in this case.  A trigger can be defined within the Update Panel to specify which control needs to trigger a partial refresh for that section.

For that matter, the only 2 tags you can directly place within an UpdatePanel are ContentTemplate and Triggers.  If you directly try placing HTML or Web Controls within the UpdatePanel, it will start throwing compilation errors.

Ok, let us jump into code to understand more.  As usual copy paste the following HTML Source and Code behind to your page.

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <div>
        Label outside the Update Panel Refreshed at:
        <asp:Label ID="Label2" runat="Server"></asp:Label>
        <br />
        <br />
        <asp:Button ID="Button1" runat="Server" Text="Refresh" OnClick="Button1_Click" />
        <br />
        <br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="Server" UpdateMode="conditional">
        <ContentTemplate>
            Label within the Update Panel Refreshed at:
            <asp:Label ID="Label1" runat="server"></asp:Label>
       
        </ContentTemplate>
        <Triggers>
            <%--<asp:PostBackTrigger ControlID="Button1" />--%>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
        </Triggers>
      
        </asp:UpdatePanel>
       
   
    </div>
    </form>

Code behind

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

Now, when you run this page, you will notice that when you click on the "Refresh" button you will see that the label below the Refresh button gets updated whereas the label above remains with old value.

Couple of interesting things to notice:-

The Button control is defined outside the UpdatePanel unlike our previous samples.

The Triggers contains something called as AsyncPostBackTrigger for which the ControlID is specified as Button1 and EventID is specified as Click.  For now, forget the commented PostBackTrigger definition.

The AsyncPostBackTrigger initiates an async call back and the button associated doesnt do a refresh or postback explicitly to execute the code.  In fact, the code you place within the Button1_Click event will throw error, if you want to do something like Response.Write.

Though the Button is a normal asp:Button, it doesnt invoke a postback but refreshes the contents of the Update Panel.

Now, if you comment the AsyncPostBackTrigger line and uncomment the PostBackTrigger line, and run the page, you will notice that the whole page refreshes upon clicking on the "Refresh" Button.  This works like a normal button although it does update the contents of the UpdatePanel.

In normal cases you would use AsyncPostBackTrigger since it implies the partial page refresh mechanism.

Cheers !!!

ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

If you have been following my articles, you would have realised how easy it is to implement partial page refreshing in ASP.NET AJAX where we explored a single UpdatePanel and multiple Update Panel examples.

Let us now consider a more complex scenario where we want to nest Update Panels.

Page

       UpdatePanel 1 (Parent)

            UpdatePanel 2 (Child)

The thumb rule with nested update panels is as follows:-

Parent Update Panel refreshes all the contents including Child Update Panel's contents even if the Child Update Panel's update mode is set to Conditional

Child Update Panel refreshes only its contents and doesnt refresh that of the Parent Update Panel unless, the update mode for the parent update panel is not set to Conditional

Kind of confusing eh?  Let us see it in action.  Copy paste the following HTML and the subsequent source code to see it in action.

 <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <table width="80%" border="3">
                <tr>
                    <td>
                        Label outside all the Update Panels
                        <asp:Label ID="Label3" runat="Server" Font-Bold="true"></asp:Label>
                        <br />
                        <br />
                        <asp:Button ID="Button3" runat="Server" Text="Refresh" />
                        <br />
                        <br />
                    </td>
                </tr>
                <tr>
                    <td>
                        <table width="65%" border="2">
                            <tr>
                                <td>
                                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                                        <ContentTemplate>
                                            Label within the Parent Update Panel
                                            <asp:Label ID="Label1" runat="server" Font-Bold="true"></asp:Label>
                                            <br />
                                            <br />
                                            <asp:Button ID="Button1" runat="server" Text="Refresh" />
                                            <table width="40%" border="1">
                                                        <tr>
                                                        <td>
                                                       
                                                       
                                                        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                                                <ContentTemplate>
                                                    <br />
                                                    <br />
                                                   
                                                    Label within the Child Update Panel
                                                    <asp:Label ID="Label2" runat="server" Font-Bold="True"></asp:Label>
                                                    <br />
                                                    <br />
                                                    <asp:Button ID="Button2" runat="server" Text="Refresh" />
                                                </ContentTemplate>
                                            </asp:UpdatePanel>
                                                        </td>
                                                       
                                                        </tr>
                                                   
                                                    </table>
                                           
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </form>

Code behind

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

When you run the above page, you will notice that I have put nice looking (??) tables to clearly indicate the label outside the Update Panels, the parent update panel contents and the child update panel contents.

When you click on the top most button, it refreshes the whole page and subsequently, all the labels get refreshed with the new date time.

However, when you click on the second refresh button which is marked inside the Parent Update Panel you will notice that the top most label doesnt get refreshed but both the Label 2 and Label 3 gets refreshed, although I have marked UpdateMode as conditional for the Child UpdatePanel.  The reason being, the parent updates all the child update panels nested within.

Finally, when you click on the last Refresh button which is marked inside the Child Update Panel, you will notice that only the respective label gets refreshed.

Note that, if I remove the property UpdateMode=Conditional for the UpdatePanel1 (parent), both the labels will get refreshed.

Enough of Update Panels eh?

Cheers !!!

 

 

ASP.NET 2.0 AJAX Extensions Update Panel - Multiple Update Panels

We saw about Update Panel and how it works in its simplest form.  Let us explore more complex scenarios where we have multiple Update Panels, Nested Update Panels, etc.,

One of the main properties of an UpdatePanel is its UpdateMode property.  The UpdateMode property is by default set to "Always".

However, when you have more than a single update panel or when you want to control as to when the Update Panel needs to get refresh, then setting the UpdateMode property to "Condition" is the first step.

Let us consider a scenario where we have 4 Update Panels in a page.  For simplicity I am sticking to the Label - Display Current Date functionality.  The HTML for the same is as below:-

 <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
   
    <div>
        <table width="100%">
            <tr>
            <td style="height: 64px">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
            <b><u>Section 1</u></b>
            <br />
            <br />
            <asp:Label ID="Label1" runat="server"></asp:Label>
            <br />
            <br />
            <asp:Button ID="Button1" runat="Server" Text="Refresh" OnClick="Button1_Click" />
           
           
            </ContentTemplate>
           
            </asp:UpdatePanel>
           
            </td>
            <td style="height: 64px">
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
            <b><u>Section 2</u></b>
            <br />
            <br />
                        <asp:Label ID="Label2" runat="server"></asp:Label>
            <br />
            <br />
            <asp:Button ID="Button2" runat="Server" Text="Refresh" OnClick="Button2_Click" />
           
           
            </ContentTemplate>
           
            </asp:UpdatePanel>
           
            </td>
            <td style="height: 64px">
            <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
            <b><u>Section 3</u></b>
            <br />
            <br />
                        <asp:Label ID="Label3" runat="server"></asp:Label>
            <br />
            <br />
            <asp:Button ID="Button3" runat="Server" Text="Refresh" OnClick="Button3_Click" />
           
           
            </ContentTemplate>
           
            </asp:UpdatePanel>
           
            </td>
            <td style="height: 64px">
            <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <b><u>Section 4</u></b>
            <br />
            <br />
                        <asp:Label ID="Label4" runat="server"></asp:Label>
            <br />
            <br />
            <asp:Button ID="Button4" runat="Server" Text="Refresh" OnClick="Button4_Click" />
           
           
            </ContentTemplate>
           
            </asp:UpdatePanel>
            </td>
            </tr>
       
       
        </table>
   
    </div>
    </form>

 Note that for all the UpdatePanels, I have set the UpdateMode to conditional.  The application logic or codebehind for the above is as follows:-

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

    }
    protected void Button2_Click(object sender, EventArgs e)
    {

    }
    protected void Button3_Click(object sender, EventArgs e)
    {

    }
    protected void Button4_Click(object sender, EventArgs e)
    {

    }

When you run this page, you will notice that there are four Sections - Section 1, 2,3 & 4.  When you click on the Refresh button, the date time value gets refreshed only for the particular section.  The other values doesnt get changed.

If you remove the UpdateMode=Conditional from the above UpdatePanel declarations, you will notice that all the labels get refreshed.

Hence, setting the UpdateMode as Conditional is important if you like to control the way the UpdatePanels get refreshed.

Next, we will explore the Nested UpdatePanel example.

Cheers !!!

TechMela - Whats this new name?

 

 

Tech Mela?

What is special about Tech Mela?

Visit http://www.techmela.com

Keep watching this space for my own information nuggets.

Cheers !!!

ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Whenever you start working on ASP.NET AJAX Page, the first thing you would notice is the Script Manager tag.  The Script Manager tag has to be present in all pages where you try to implement Partial Page Updates.  It can be present only once in a page.  The second thing you would notice is that the <asp:UpdatePanel> is THE Control for getting started or rather ajax enabling your web pages.  It takes care of most of your common needs in implementing Partial Updates.

The UpdatePanel control is a server side control that comes as a part of the Toolbox when you install ASP.NET AJAX.  You can download ASP.NET AJAX for free from http://ajax.asp.net and install for using with your existing Visual Studio 2005 and ASP.NET 2.0 Web Applications.

So here goes a typical ASP.NET AJAX Page.

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
  <div>
  // Page Contents Go Here
  </div>
</form>
 

Now, to understand the working of UpdatePanel, we need to put some labels and a  Button Control which invokes a method in the code behind and retrieves the Current Date and Time

So lets start expanding our Page with those Controls

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <asp:Label ID="Label1" runat="Server"></asp:Label>
            <br />
            <asp:Label ID="Label2" runat="server"></asp:Label>
            <br />
            <br />
            <asp:Button ID="Button2" runat="server" Text="Click Me Again" OnClick="Button2_Click"/>
       </div>
</form>

Now in the Code Behind lets define the Page_Load and Button2_Click Methods

 protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = "The time now is " + System.DateTime.Now.ToString();
       
    }

protected void Button2_Click(object sender, EventArgs e)
    {
        Label2.Text = "The time now is " + System.DateTime.Now.ToString();
    }

When you run this page, you will notice that the Label1 displays the Current Date and Time and when you click ont he button "Click Me Again" the Label 2 also displays the Current Date and Time.

Hang on, also did you notice that the Label1 also changed the Date Time though you didnt intend to do it.  The reason is, when you clicked on the button, it invoked the Page_Load again and subsequently refreshed the page and hence Label1 also got the latest Date Time information.

What is important here is that, the whole page gets refreshed and this would be significantly heavy if the page contains a lot of controls, sections which retrieve data from different sources.  Unfortunately, this has been the way we have been writing web pages where a refresh is inevitable to make a server side request.

Now, let us slighly modify the above ASPX Code by adding the UpdatePanel Control

     <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <asp:Label ID="Label1" runat="Server"></asp:Label>
            <br />
            <asp:UpdatePanel ID="UpdatePanel1" runat="Server">
           
<ContentTemplate>
            <asp:Label ID="Label2" runat="server"></asp:Label>
            <br />
            <br />
            <asp:Button ID="Button2" runat="server" Text="Click Me Again" OnClick="Button2_Click"/>
        
    </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
 

We have added Update Panel control and a Content Template which holds the contents which need to implement Partial Refresh.

When we run this page, you will notice that initially when the page loads the Label1 displays the Current Date and Time.

Subsequently, when you click on "Click Me Again" Label2 also appears with the Current Date, but Label1 remains unchanged.

Keep clicking on the "Click Me Again" Button and you will notice that the Label1 Data remains the same whereas the DateTime displayed in Label 2 gets updated.

This is result of the Update Panel which takes care of partially updating the contents of the page without having to reload the whole page.

However, when you do a manual refresh of the page (F5) you will notice that both the Labels get updated with the latest Date Time information.

Any server control that is placed within the Update Panel and Content Template invokes a partial page refresh and only the relevant section gets updated without the whole page getting refreshed.

Though this article was a little elaborate, the idea was to make it in simple words for people who begin with ASP.NET AJAX.

Let us explore Update Progress and other ASP.NET AJAX Controls in the next articles.

Cheers !!! 

ASP.NET 2.0 TextBox Ready Only losing client side changes, values across postback?

Well, this has been under discussion for sometime and I knew this was a known issue although it was a design change in ASP.NET 2.0.

I am talking about the TextBox which has the Read Only property assigned true not retaining the values or client side changes getting ignored across postbacks.  There are certain blogs / articles which talk about it but for the benefit of those who get stuck with this, I am giving herebelow the steps to reproduce and the resolution for the same.

ASP.NET 2.0 had a design change by which a an <asp:TextBox> control if marked with its ReadOnly property as true, would ignore client side changes and would lose the same across postback.  So if you tried modifying the text box value or add a value to the text box using Javascript you wouldnt be able to retireve the value in the code behind or simply the value will be lost across postback.

Try doing this

Declare a TextBox

<asp:TextBox ID="TextBox1" runat="server" Text="Sample Text" ReadOnly="true" />

Add the following Button

<asp:Button ID="Button1" runat="Server" Text="Submit" OnClick="Button1_Click"  />

The purpose of the above button is to invoke a code behind method, the click event where we can do a Response.Write of the TextBox value.

So, in the code behind, add the following method

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

then add the following button

<input type="Button" name="Button2" onclick="changevalue()" />

The purpose of the input type button is to execute a client side javascript.

The client side script is as follows:-

 <script language="javascript">
        function changevalue()
        {
        this.form1.TextBox1.value = "Modified Sample Text";
       
        }
   
    </script>

Place the above script before the </head> tag in your HTML Source.

Now, if you click on the input type button you will see that the TextBox value changes to "Modified Sample Text". 

However, when you click on the button "Submit" which is an <asp:Button>, a server control, you will see that the text that it writes to the browser is again "Sample Text".  You will also see that the TextBox has the value reset to "Sample Text".

This behaviour is new in ASP.NET 2.0 and if you are migrating your ASP.NET 1.x applications you may find this a little annoying / worrying since the values aren't retained.

This is independent of whether you set the EnableViewState property for the TextBox to true or false.  In fact the EnableViewState property for a TextBox doesnt make a difference since the values in a TextBox are maintained and retrieved from the Form's Collection and not from the ViewState.

However, there is a work around for the same.  Instead of setting the "Read Only=true" property in the design you can enable the ReadOnly property of the TextBox through the Attributes collection in the code behind.  To do that, remove the ReadOnly property from the TextBox declaration above.  Then, in the code behind file, within the Page_Load add the following line of code:-

TextBox1.Attributes.Add("readonly", "readonly");

Now you will notice that when you run the page, the client side changes you make in the TextBox (via the Javascript) is retained across postback.

This behaviour is by design in ASP.NET 2.0 and it has been designed with the idea that a ReadOnly TextBox shouldnt be modified in the client side by a malicious code.

For more information check http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.readonly.aspx

Cheers !!! 

ASP.NET, AJAX - How do I Videos

For all those novices and beginners, you can find a bunch of "How do I" Videos on ASP.NET, AJAX on various implementations.

The videos can be downloaded from http://www.asp.net/learn/videos/default.aspx?tabid=63

Some of them are really comprehensive and I still use them to rehearse before presentation and its worth watching even if you are not a novice.

Cheers !!!

MIX 07 - Happening Right Now !!!

MIX 07 is happening right now in Las Vegas!!!

Some of you might have viewed Ray Ozzie's Key Note as well as Scott Guthrie's Key Note few hours back.  At Mix 07 the world is waiting to see our latest announcements and our next steps in the future of computing.

With SilverLight and Windows Live reaching new heights in the scale of software and services or Software + Services, the world is set for a turn around on the way Enterprises and people use computers, software and the internet.

You can catch up all the action at http://www.visitmix.com and many of the sessions would be pushed through live videos / webcasts in the days to come.

Also you can subscribe to the RSS for the event at http://www.visitmix.com/feeds/rss/ to keep a tab on the live happenings.

Cheers !!!