Tips & Tricks for ASP.NET, IIS, and Visual Web Developer : Visual Studio 2008 SP1

Tip#100: Did you know… How to view ASP.NET trace information?

WebDevTools — Sat, 19 Dec 2009 00:24:00 GMT

You can enable ASP.NET tracing either at an Application level or at a page level; see Tip# 77: Did you know… How to enable Page Level Tracing for your ASP.NET pages? for more information.

With the tracing enabled, you can view the trace output in a trace viewer by navigation to trace.axd from the root of your application. For example, if the URL of your application is http://localhost:11423/Website, then the trace viewer can be accessed at http://localhost:11423/WebSite1/trace.axd.

You can click on the “View Details” link of a requested page to see further information about that specific page.

To write to the trace output, you can add the statment Trace.Write(“This is an action in my page.”) into your code.

The trace request limit and whether the most recent tracing data is kept and shown in the viewer can be specified in the web.config file as follows:

<system.web>
<trace enabled=”true” mostRecent=”true” pageOutput=”true” requestLimit=”20” />

Anh Phan

SDET, Visual Web Developer

Tip#97: Did you know… How to Display Hidden Information in Design View

WebDevTools — Thu, 01 Oct 2009 03:20:01 GMT

The design view in Visual Studio can display glyphs and borders for the hidden non - graphic elements (such as div, span, form, and script elements). This feature helps you to see where the elements are and avoid inadvertently deleting the non-graphic elements from your page while editing.

To enable it in designer click on View -> Formatting Marks -> Show

Now you will start seeing the hidden elements on the designer surface.

Hope this helps,

Deepak Verma
SDET | Visual Web Developer

Tip #95: Did you know… That Web Application Projects and Class libraries are now available in Express edition?

WebDevTools — Mon, 21 Sep 2009 02:27:39 GMT

Creating a Web Application Project was possible only in VS standard SKU and above in VS 2008.

But with VS 2008 SP1 we went ahead and added support for WAP and class libraries in Visual Web Developer Express edition SP1. You can now create WAPs by going to File –> New Project.

Reshmi Mangalore
SDET, Visual Web Developer.

Tip #92: Did you know … How to select a master page using 'Select a Master Page' dialog?

WebDevTools — Fri, 21 Aug 2009 23:02:20 GMT

Master page for a Web form can always be set manually in the source code, but here is an option to select the master page while create the webform using the 'Select a Master Page' dialog.

The path to select a Master page using the 'Select a master page' dialog is different for a Web application project than for a Web site.

For a Web Application project:

Right click solution explore. Select Add and then select New Item
From the Add new Item dialog select Web content form and click on Add button.
Select a Master Page dialog would appear. Navigate thru the project folders to select the Master page & click on OK button. The aspx added would now be using the selected master page.

For a Web site project:

While adding a Webform, check the select master page checkbox and click on the Add button.
Select a Master Page dialog would appear. Navigate thru the project folders to select the Master page & click on OK button. The aspx added would now be using the selected master page.

Hope this helps,

Deepak Verma
SDET | Visual Web Developer

Tip#85: Did you know… You can now do Multiple Selection of controls in your Designer with VS 2008 SP1?

WebDevTools — Tue, 30 Jun 2009 23:15:45 GMT

Visual Web developer 2008 SP1 supports multiple selection of controls on your designer using Ctrl+Click.

You can see that the designer:

Displays the primary selected control with a white tab. Button3 in the image below.
Enable you to set property for the selected controls using Property Grid. Note that the property grid would show you only the properties that are in common for all the selected controls.
Enables you to make use of the Align, Make Same Size and Order Menu commands in your Format Menu options.

However VWD 2008 SP1 does not support the ability to drag drop multiple controls and Cut/Copy/Paste of multiple elements.

Thanks!

Reshmi Mangalore

SDET, Visual Web Developer

Tip #82: Did you know... How to migrate Visual Studio 2005 Web Application Project to Visual Studio 2008

WebDevTools — Fri, 19 Jun 2009 02:32:56 GMT

Following steps highlight how a Visual Studio 2005 Web application project can be migrated to Visual Studio 2008.

Take backup of the original project
Open Visual Studio 2008
Click File -> Open Project and browse to the folder to open the project
You will receive the following conversion wizard to help you convert the solution or project to the current version. Click Next.
Select Yes on this screen if you want the wizard to help you to take the backup, otherwise select No and Click Next.
Be sure to read the summary on this screen & click finish
As soon as you click finish, you will see an upgrade prompt. Click yes if you want to upgrade to the latest framework otherwise Click No. If you select yes to upgrade, the project file as well as web.config file is updated for the latest framework. It's recommended to select the checkbox to do the same for all webs in this solution.
The conversion wizard would show you the status, select Show the log to see the log and click close.

For projects using Ajax you might need to install ASP.NET Ajax Extensions 1.0 in VS 2008 if you said no to upgrade. Please see Tip #62 to learn how to install it.

Hope this helps,

Deepak Verma
SDET | Visual Web Developer

Tip #67: Did you know the list of ASP.Net MVC shortcuts?

WebDevTools — Sun, 31 May 2009 20:28:00 GMT

Add Controller (Ctrl-M Ctrl-C)

Add Controller is a simple dialog box that lets you quickly add controllers to ASP.Net MVC Applications. Right-Click the 'Controllers' folder or simply press Ctrl-M Ctrl-C to invoke this dialog.

Add View (Ctrl-M Ctrl-V)

The Add View is the easiest way to add views to an ASP.Net MVC Application. Right-Click from within an Action Method or in solution explorer, or simply press Ctrl-M Ctrl-V to invoke the dialog. The shortcut is especially effective when invoked inside an action method.

Go to View / Go to Controller (Ctrl-M Ctrl-G)

Once you have added controllers with Action Methods and corresponding views, navigate between them with the 'Go To View...' and ‘Go to Controller…’context menu items. These menu items can be invoked in an Action Method of a controller or in the markup of an ASP.Net MVC View Page. Anywhere a menu item is visible you can instead navigate within your ASP.Net MVC Application by simply pressing (Ctrl-M Ctrl-G) to move to the corresponding view or controller.

Hope this makes ASP.Net MVC development easier!

Joe Cartano | Visual Web Developer

Tip#65: Did you know...How to quickly create a GridView that is hooked up to a SQL table?

WebDevTools — Thu, 28 May 2009 01:02:00 GMT

In Tip#64, we showed you how to convert a GridView's bound fields into template fields. In this tip, we will show you how to quickly create a GridView that is hooked up to a SQL table.

Typically, if you want a GridView then you need to add it to the page, and then add the datasource and hook the two up through a wizard. But here's a much quicker way to create and hookup the two.

First, if you don't have a connection to your database, then you will need to add it in the Server Explorer (right side of Figure 1).
Once that is done, you can expand the Tables node in your connection and find the table you want your GridView to be hooked up to initially.

Figure 1 (click to enlarge)
Finally, you drag and drop the selected table onto the webform and that's it! You just created a GridView that is hooked up to your table in just three steps or less.

Figure 2

From here on, you can fine tune the GridView and datasource to meet your needs.

Roger Wong
SDET | Visual Web Developer

Tip#64:Did you know … How to convert a GridView column from asp:BoundField to asp:TemplateField in Design View?

WebDevTools — Wed, 27 May 2009 20:26:41 GMT

Assume that you already have a data source SqlDataSource1 that binds to a simple query returning some details from the Customers table.

     <asp:SqlDataSource ID="SqlDataSource1" runat="server" 

        ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" 

        SelectCommand="SELECT [FirstName], [LastName], [Email] FROM [Customers] ORDER BY [FirstName]">

    </asp:SqlDataSource>

In Visual Studio, if you add a GridView control to a web forms page in Design View and choose SqlDataSource1 as the Data Source (as shown in figure 1 below), typically the GridView columns are generated as asp:BoundField types in source.

Figure 1

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

                DataSourceID="SqlDataSource1">

                <Columns>

                    <asp:BoundField DataField="FirstName" HeaderText="FirstName" 

                        SortExpression="FirstName" />

                    <asp:BoundField DataField="LastName" HeaderText="LastName" 

                        SortExpression="LastName" />

                    <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />

                </Columns>

            </asp:GridView>

Often, you want to customize one or more columns by converting them into an asp:TemplateField rather than asp:BoundField. Let’s say you want to convert the Email column into a asp:TemplateField.

You can quickly do this in Design View by clicking on ‘Edit Columns’ in the Smart Tasks panel of the GridView, select the ‘Email’ field in the dialog that pops up and click on ‘Convert this field into a TemplateField’, then click ‘OK’.

Figure 2

Figure 3

The source for the field Email will now be updated to:

    <asp:TemplateField HeaderText="Email" SortExpression="Email">

        <EditItemTemplate>

            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Email") %>'></asp:TextBox>

        </EditItemTemplate>

        <ItemTemplate>

            <asp:Label ID="Label1" runat="server" Text='<%# Bind("Email") %>'></asp:Label>

        </ItemTemplate>

    </asp:TemplateField>

You can also do a similar thing with the DetailsView control by choosing the ‘Edit Fields’ item in the Smart Tasks panel of the DetailsView control.

Bala Chirtsabesan
SDET | Visual Web Developer

Tip#62: Did you know… How to add Ajax Control Toolkit to the toolbox?

WebDevTools — Sat, 16 May 2009 22:58:51 GMT

Steps to add Ajax Control Toolkit for Framework 3.5 SP1
Steps to add Ajax Control Toolkit for Framework 2.0

Ajax Control Toolkit for Framework 3.5 SP1

Following are the steps to add Ajax Control Toolkit to the toolbox for ASP.NET 3.5 webs in Visual Studio 2008 SP1

Download Ajax Control toolkit from here (you can download AjaxControlToolkit-Framework3.5Sp1-dllonly.zip this would contain the dll only).
Extract the content of the zip file downloaded in steps 2 above.
Launch Visual Studio 2008
Create new (or open an existing) 2.0 Web Application Project or Website.
Right click Toolbox and click on Add Tab. Name the new tab ACT 3.0 or anything you wish to call it.
Right click toolbox under the ACT 3.0 tab added in the above step and click choose items
Click Browse and browse to AjaxControlToolkitBinary\AjaxControlToolkit.dll extracted in step 3.
Click OK
And the tab in the toolbox will be populated with the ACT controls. You can read more about the recently added new controls to the toolkit May 2009 release at the ajaxcontroltoolkit codeplex site.

Ajax Control Toolkit for Framework 2.0

There might be a requirement to add the toolkit for legacy ASP.Net 2.0 applications.

Following are the steps to add Ajax Control Toolkit to the toolbox in Visual Studio 2008 SP1 for ASP.NET 2.0 webs

Download and install ASP.NET Ajax Extensions 1.0 from here.
ASP.NET AJAX 1.0 is a set of technologies to add AJAX support to ASP.NET 2.0
Download Ajax Control toolkit version 1.0.20229 from here (this would download AjaxControlToolkit-nosource.zip). More details about the toolkit can be found at ajaxcontroltoolkit codeplex site here.
Extract the content of the zip file downloaded in steps 2 above or extract the AjaxControlToolkit.dll from AjaxControlToolkit-NoSource.zip\SampleWebSite\Bin.
Launch Visual Studio 2008
Create new (or open an existing) 2.0 Web Application Project or Website.
You will notice Ajax extensions tab is added to the toolbox (this is due to Step 1 installed the Ajax extensions for a 2.0 website)
Right click Toolbox and click on Add Tab. Name the new tab ACT 1.0.
Right click toolbox under the ACT 1.0 tab added in the above step and click choose items
Click Browse and browse to the AjaxControlToolkit.dll extracted in step 3. (If you have extracted the whole zip file you would find the dll in SampleWebSite\Bin\ )
Click OK
And the tab in the toolbox will be populated with the ACT controls.

More about Ajax Control toolkit can be found at http://ajaxcontroltoolkit.codeplex.com/

Deepak Verma
SDET | Visual Web Developer

Tip #61: Did you know… How to create an ASP.Net Dynamic Data Web Site?

WebDevTools — Thu, 14 May 2009 21:54:22 GMT

If your web site is heavily data driven then here is a quick and easy way for you to create one without writing much code. All you need is Visual Studio 2008 SP1 or Visual Web Developer 2008 Express SP1 installed on your box.

Dynamic Data Web Sites makes use of a mechanism called Scaffolding. When Scaffolding is enabled it lets ASP.Net go through your data model and generate web pages for your tables. These generated pages have Insert, Delete and Update capabilities for each table.

Here are the steps:

Step 1: Create a Dynamic Data Web Site.

Go to File ->New Web Site and select Dynamic Data Web Site template. Give it a name and select the location and language to be used. Click Ok button.

Step 2: Add data to your Web Site.

Copy paste pubs.mdf file that you want to use in your App_Data folder.

Step 3: Create a Data model using LINQ to SQL.

Right click on App_code and Add New LINQ to SQL Classes. On selecting the LINQ to SQL Classes the DataClasses.dbml opens up in your O/R Designer.

Step 4: Drag drop tables to Object Relational Designer.

Now drag drop Authors table on to the O/R Designer from server explorer and save DataClassses.dbml.

Step 5: Look what VS has created for you.

Note that there are two files DataClasses.dbml.layout and DataCalsses.designer.vb present under the .dbml file node.

Open DataCalsses.designer.vb, and you can see that there is a Partial Public Class DataClassesDataContext. This file also contains an entity class for Author table (Partial Public Class author).

Step 6: Register the data context in Global.asax file.

Open global.asax page and add the following lines of code in RegisterRoutes method.

VB code:

model.RegisterContext(GetType(AdventureWorksDataContext), _ New ContextConfiguration() With {.ScaffoldAllTables = True})

C# code:

model.RegisterContext(typeof(AdventureWorksDataContext), new ContextConfiguration() { ScaffoldAllTables = true });

Save the file.

Step 7: View the page in Browser

Now you can view default.aspx page using View in Browser. This will show you a link for Authors table.

Click on the table name and you will see a page with data from Authors Table. There is also readymade option for you to Edit, Delete and Insert new data.

Try this today and have fun!

Reshmi Mangalore

SDET, Web Development Tools

Tip #50: Did you know…How to absolute position the controls in Visual Studio Designer?

WebDevTools — Wed, 01 Apr 2009 00:32:41 GMT

Absolute positioning control(s) in the designer can seem confusing at first until you learn the visual cues. You can do one of the following two possible actions by dragging the control in the designer.

Re-parent the control
Change the controls position.

When you drag the body of the control, you are changing the parent of the control. You can see this because the cursor changes to the small arrow with a square box.

On the other hand, when you drag it by the white tag, you change the physical position of the control. You can see this because the cursor changes to the 4-way arrow and there is no square box.

Unfortunately, today the cursor shows a 4-way arrow when you hover over the body of a web control and that’s a known issue. It should be only a 4-way arrow when you a hover on the white tag and a standard arrow when you hover on the body. You will see the right behavior with HTML button.

Note: Additionally the first drop of the control always sets its parenting always, not its position.

Vinayabhushana GattamReddy
TM || Visual Web Developer

Tip #49 Did you know… how to set the editor to always place open braces on new line for functions in JScript?

WebDevTools — Tue, 31 Mar 2009 00:24:01 GMT

In Visual Studio, click Tools -> Options. In the Options dialog on the left pane select Text editor -> JScript -> Formatting.

Check Place open brace on new line for functions.

Deepak Verma
SDET | Visual Web Developer

Tip #45: Did you know…How to change the DynamicData folder location?

WebDevTools — Fri, 27 Mar 2009 21:29:05 GMT

ASP.NET Dynamic Data is a framework that lets you create data-driven ASP.NET Web applications easily. It does this by automatically discovering data-model metadata at run time and deriving UI behavior from it.

By default for a Dynamic data Web Application the dynamic data folder is created in the root folder. Your application might require it to be moved to a different location.

Following are the steps to achieve this in VS 2008 SP1.

Choose which folder your want it to be moved to. For example, lets move it to admin folder. Create admin folder and move DynamicData folder under it.
In Global.asax add the following

model.DynamicDataFolderVirtualPath = "~/admin/DynamicData";
Change the content of files under admin/Dynamicdata you moved in step1 to reflect the new path location (~/admin/Dynamicdata).

For example,
- change the register directive src attribute in List.aspx and ListDetails.aspx
- img src in List.aspx and master page
- any other content which you might have customized and has to use the new path location

Deepak Verma
SDET | Visual Web Developer