ThreadAbortException

October 2009 Entries

Visual Studio 2010 Beta 2 – a first look at the UI and Web Development

Visual Studio 2010 Beta 2 is out and has a slick new UI.  Also, this Beta has most of the features that would ship with the final version compared to the earlier Beta.  Note that while new features might be added, there are chances that some of the features demonstrated here may also not be a part of the final release.  But, for now, lets examine the current Beta 2.  The first thing you would notice and probably like, is the UI enhancements.  Herebelow, is the launch screen.

image

Also, the start page has been modified to accommodate more useful things.  The good thing is that you can completely customize the Start Page since it is a XAML based UI.  You can find the start page itself as a Project at C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\StartPages once you install the Beta.  You can change it to reflect your organization specific templates, document repositories etc.,  Optionally you can even turn it off permanently, or, upon opening a project, using the checkbox options in the bottom left.

image

Now, with respect to web development, there are tons of enhancements.  In fact many of the actual web enhancements are figuring in this Beta release and exploring them would require individual blog posts that I would be writing in future.  For a complete list of feature walkthroughs, please visit the MSDN website http://msdn.microsoft.com/en-us/vstudio/dd441784.aspx (and by the way you would realize that the MSDN Website has been re-launched as well with the new UI for easier navigation)

The first thing I did was to explore the “File – New – Project – ASP.NET Web Application” template and create a new web project.  This provides a web template with a default Home Page and About Us page that you can use as-is / customize and get started with a skeleton layout immediately.  The default UI without any work, when run, looks as below:-

image

Other thing to notice is that, by default jQuery 1.3.2 library is included in the Scripts folder, not to mention, the intellisense support for jQuery that has been there right from VS 2008 SP1.  There you had to manually install the docs as well as the jQuery library.  Now, it all comes automatically.

Web.Config file Simplified

Over the years, with ASP.NET AJAX, Data Source provider, IIS 7 configuration, the Web.Config grew extremely unmanageable and working with that would require real patience.  In this release, the Web.Config file has been minified or simplified that it just contains 4 – 5 lines of configuration.  Note that, this is when you select “Empty ASP.NET Web Application” template.  The default “ASP.NET Web Application” template still has entries corresponding to Membership, Roles, Authentication etc., since this is basically a fully functional website with users, roles as well as membership database with default entries (remember “Website Administration” screen in the ASP.NET 2.0 days)

There are much more web related features that I will be covering in the future posts, but for a high level overview, check http://msdn.microsoft.com/en-us/library/ee532866(VS.100).aspx and http://www.asp.net/learn/whitepapers/aspnet40/ 

You can download Visual Studio 2010 Beta 2 from http://www.microsoft.com/visualstudio/en-us/products/2010/default.mspx or if you are an MSDN Subscriber from the MSDN Download Center.

Cheers !!!

FileUpload in UpdatePanel, ASP.NET, like Gmail

Earlier, I had written this post on how you can accomplish using FileUpload control in UpdatePanel since by default it wasn’t supported.  The post seems to have helped many and keeps being the most visited one.  However, with the new release of Ajax Control Toolkit (v 3.0.30930) released specifically for .NET 3.5 SP1 (with Visual Studio 2008 SP1), there are couple of new controls.  One of them is the AsyncFileUpload control.

Thanks to the codeplex community which keeps getting better and better with time, the Ajax Control Toolkit has grown into one of our largest community contributed controls for ASP.NET with about 43 controls that help in accomplishing rich user experiences in ASP.NET Websites.

The AsyncFileUpload is one simple way of accomplishing what I had written earlier using PostbackTrigger, the regular FileUpload control etc.,  To be able to use the AsyncFileUpload Control, you must have the latest version of AjaxControlToolkit installed.  The other pre-requisites are obviously NET 3.5 SP1 and Visual Studio 2008 SP1 (or the free Visual Web Developer Express Edition)

You can download the pre-requisites from the respective links above.  For downloading the AjaxControlToolkit, visit the CodePlex site.  You can download just the binary files or the Source files as well, if you require to modify.  The Script Files is useful if you want to just work with the client side scripts and not use the server controls.

Once you have downloaded, you would need to add them to Visual Studio or VWD.

1. Open Visual Studio and create a new webapplication or website.  Click to open the ToolBox

2. Right Click and select “Add Tab”

3. Provide a name say “Ajax Control Toolkit”

4. Right Click the newly created tab and select “Choose Items”

5. Click on the “Browse” button in the file dialog that opens and browse to the place where you downloaded the AjaxControlToolkit binaries

6. Typically I would put them under C:\Program Files\Microsoft ASP.NET for consistency.

7. Select the AjaxControlToolkit.dll and it would list all the new controls.

8. Click “Ok” to add all the controls.

9. You should now see under the newly created toolbox tab these controls.

Once you are done with above, create a simple Default.aspx page in the application you created and drop the Script Manager control into your webform.  Next add an UpdatePanel with ContentTemplate.  Inside the ContentTemplate, add the AsyncFileUpload control into the webform as well as a button and 2 labels for the uploading and displaying messages respectively.  The markup looks something like below

<form id="form1" runat="server">
   <div>
       <asp:ScriptManager ID="ScriptManager1" runat="server">
       </asp:ScriptManager>
       <asp:Image ID="img1" runat="server" ImageUrl="~/Images/spin2.png" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
           <ContentTemplate>
               <cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" UploaderStyle="Modern" ThrobberID="img1"  />
       <br />
       <asp:Button ID="btnUpload" runat="server" Text="Upload"
           onclick="btnUpload_Click"   />
           <br />
           <asp:Label ID="Label1" runat="server" /> 
           <br />
           <br />
         </ContentTemplate>
       </asp:UpdatePanel>
       <br />
       <asp:Label ID="Label2" runat="server" />
   </div>
   </form>

Also, you can see that I have added an asp:Image pointing to a spin image that is specified as the ID for ThrobberID in the AsyncFileUpload definition.  This is optional but nice to have since this would display the throbber icon while uploading takes time.

Once you are done, you would need to define the action in the codebehind or in the script

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

      protected void btnUpload_Click(object sender, EventArgs e)
      {
          AsyncFileUpload1.SaveAs(Server.MapPath((AsyncFileUpload1.FileName)));
          Label1.Text = "You uploaded " + AsyncFileUpload1.FileName;
      }

Notice, the Label in the Page_Load event is just to indicate that indeed the operation happened asynchronously since the time that is displayed initially doesn’t change once you click on Upload button. 

Try running this and you will find that the whole operation happens asynchronously without a full page reload.  Note that, you would need to still put the AsyncFileUpload control inside UpdatPanel for this behaviour.  Otherwise, it would behave like a regular postback control.

You can download the sample code from

Cheers !!