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

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 #87: Did you know… How to reuse a web page by converting into an ASP.NET User Control?

WebDevTools — Fri, 10 Jul 2009 04:10:03 GMT

If you want to reuse a web form's content in other places in your application, you can easily convert the page into an ASP.NET User Control. Then you can add that user control to any other page.

For example, you have a page in your application that looks like the following:

Now, you need to rename to the file to have a .ascx extension. Then remove html, head, body, form tags from the page. Change the "@ Page" directive to a "@ Control" directive. Remove all attributes of the "@ Control" directive, except Language, AutoEventWireup, CodeFile, and Inherits. You also need the change the Inherits to have your new UserControl code behind file's name, like in the image below. Close and re-open the file to make squiggles go away.

If you have a code-behind file, its name will be changed properly for you automatically. Open the file and change the class it inherits from to UserControl, and the class name to match your .ascx file. See below.

More information can be found here.

Tip #80: Did you know… How to show JScript validation errors as warnings?

WebDevTools — Mon, 15 Jun 2009 21:54:00 GMT

With Visual Studio 2008 RTM, JScript validation setting is an option on the HTML validation page on the Options dialog. Since Visual Studio 2008 SP1 and later, we added a new option page JScript on the Options dialog, see the blog "Introducing JScript Formatting in VS 2008 SP1" for more detail. With this change, now the JScript validation resides on its own tab "Miscellaneous" as shown below:

To view JScript errors as warnings, we need to launch Options dialog from Tool -> Options menu, then expand Text Editor -> JScript -> Miscellaneous, check the checkbox "Show errors as warnings". Some users like to have JScript syntax errors shown in the Error List since it would encourage standard compliance, while others don't like to deal with validation errors since they are browser errors.

Anh Phan

SDET, Visual Web Developer

Tip #79: Did you know… How to quickly comment and uncomment in your web pages?

WebDevTools — Mon, 15 Jun 2009 20:36:00 GMT

Select the lines you want to be commented in your ASPX, HTML, web config file etc and click on the Comment/ Uncomment icon in Toolbar.

The comment icon looks like this:

The icon for uncomment looks like:

Alternatively you can use Keyboard shortcut Ctrl+K Ctrl+C to comment and use Ctrl+K Ctrl+U to uncomment.

Comments in ASPX page…

Comment in HTML page…

Comment in script blocks…

This shortcut is available under Edit Menu->Advance –>Comment Selection /Uncomment Selection.

Enjoy!

Reshmi Mangalore

SDET| Visual Web Developer

Tip# 78: Did you know… How to navigate using Document Outline?

WebDevTools — Fri, 12 Jun 2009 20:08:00 GMT

Document Outline window can be launched from the menu View -> Document Outline, or via short cut key Ctrl-Alt-T. The Document Outline window displays a nested, hierarchical tree of the elements and scripts on the page. It gives you a good overview of the page's content and its layout.

Double-clicking any element listed in the Document Outline window will highlight the corresponding markup for that element in the source view or the element display in the design view, depending on which view is currently open. This is very helpful in navigating a large, complex page.

More about Document Outline can be found here.

Anh Phan

SDET, Visual Web Developer

Tip# 77: Did you know… How to enable Page Level Tracing for your ASP.NET pages?

WebDevTools — Fri, 12 Jun 2009 01:58:00 GMT

Enabling tracing at page level gives you a bunch of information that can be useful while debugging your application.Tracing helps understand which control uses more view state, start/end of PreInit, start/end of Init, start/end of Render, etc. This information appears at the bottom of the page. By default page level tracing is disabled.

Tracing can be enabled at Page Level and also at Application Level

To enable Tracing at Page Level select DOCUMENT in Property grid and set it’s Trace property to true as shown below.

This will add Trace="true" in your page directive as shown below.

<%@ Page Language="VB" Trace="true" %>

You can also add TraceMode attribute to specify if you want the trace messages to be SortedByTime or SortByCategory.

You can now run the page and see the details as follows:

You can enable Application level tracing in the Web.config file of your application’s root. By doing this you will get trace information for all pages in your application. In this case you can set page level tracing to false if you do not want tracing information for particular pages.

<trace enabled="true" requestLimit="40" localOnly="false"/>

</system.web></configuration>

Remember to turn it off before you move your application to production. Also, know that the page level trace setting overrides the trace setting at the application level.

Enjoy Tracing!

Reshmi Mangalore

SDET, Visual Web Developer

Tip #76: Did you know… How to hide a non-visual control in your designer?

WebDevTools — Wed, 10 Jun 2009 02:36:35 GMT

Some times as you are building your web page, you may want to hide all the non-visual controls like Timer control so that the page looks close to how it would be rendered on your browser.

Our Designer can toggle between displaying and not displaying Non-visual controls using

Ctrl+Shift+N

Display ASP.NET Non-visual controls turned on:

Display ASP.NET Non-visual controls turned off:

This option is also present under View menu.

View->Visual Aids –>ASP.NET Non-visual controls as shown below…

Enjoy!

Reshmi Mangalore

SDET| Visual Web Developer

Tip #75: Did you know…How to maintain scrollposition after post back?

WebDevTools — Mon, 08 Jun 2009 22:43:04 GMT

When web pages are posted back to the server, by default user is returned to the top of the page. On a large web page, you might have a requirement to scroll down the user automatically to the last position on the page.

MaintainScrollPositionOnPostBack page property can be used to achieve this in one of the following ways.

Application level: To set the property by default for all pages in the website, open web.config and add the attribute to the pages node.

<pages maintainScrollPositionOnPostBack="true">
Page Level: for a particular page, open the aspx and set the property

<%@ Page MaintainScrollPositionOnPostback="true" ...
Code level: to set the property programmatically

Page.MaintainScrollPositionOnPostBack = true;

Hope this helps.

Deepak Verma
SDET | 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#63: Did you know…How to specify a fixed port for Visual Studio Development Server while using WAPs?

WebDevTools — Wed, 20 May 2009 00:59:18 GMT

In Tip#21 we showed you how to set a fixed port for the Developer Web Server in Web Sites.

Here is how you will be able to configure this for Web Application Projects.

1. Go to the properties page of WAP. Right Click on your Web Application and click on Properties in context menu. This will take you to the Properties page.

2. Select Web Tab in this page.

3. Under Servers section, select the Use Visual Studio Development Server option. Then select Specific Port and enter the port on which you want your App to run.

4. View your page in browser and you will see that Visual studio has assigned the port you configured for your Development Server.

Enjoy!

Reshmi Mangalore

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#57: Did you know… How to manage web site configuration through a web interface

WebDevTools — Tue, 28 Apr 2009 10:37:10 GMT

The Web Site Administration Tool provides a web interface for you to manage different web site configuration settings. To launch the tool, for Web Application Project click Project-> ASP.Net Configuration & for Websites, click Website-> ASP.Net Configuration

for Website

For WAP

Visual Studio launches the tool in a browser window. You can use the tabs on the top to navigate & change various settings.

You can read more in detail for the various settings that can be managed using the tool here.

Deepak Verma
SDET | Visual Web Developer

Tip # 53: Did you know... How to edit the templates for gridview in VS designer?

WebDevTools — Thu, 23 Apr 2009 00:44:04 GMT

Gridview control has the flexibility to be configured how it's rendered using templates. Following steps show how the control's edit template can be changed in the Visual Studio Designer.

I have a GridView hooked up to Sqldatasource using Northwind.products. I have selected Generate Insert, update and delete statements while configuring the sql data source (by clicking the Advanced button)
Click on smart task for grid view & select Enable Editing check box for the grid view
Now to convert a column to use Template field. Select Edit columns from the Grid view Smarttask.
Select the column name in the selected fields list and click on Convert this field into TemplateField & click OK
Select Edit Templates from the gridview smarttask
From the Display drop down select EditItemTemplate
You will see the following
You can update the template now. For example, I have dragged dropped requireFiledValidator into it
If there are multiple columns converted to templates, you will see something like this & can select a particular column template to be edited.
Switching to the source view, you will find that VS has generated the source code for the template changes done.
Click on 'End template editing' from the smart task to exit editing the template

Deepak Verma
SDET | Visual Web Developer

Tip # 52: Did you know... When deploying your ASP.NET web application, debug=false should be set in web.config

WebDevTools — Tue, 14 Apr 2009 21:50:00 GMT

To help troubleshoot problems, developers usually enables the debug mode in web.config file. This causes ASP.NET to produce extra information in the compiled assemblies such as debug symbols, metadata. However, performance will be suffered as it takes longer to compile and run, consumes more memory and resource caching is not performed. Therefore, in production, we should set the debugging option back to false to avoid the effect on performance. There are two ways to achieve this.

1) In web.config file, set <compilation debug=”false”/>

2) You can also disable the <compilation debug=”true”/> switch for all ASP.NET applications on the system in production by setting the following in Machine.config:

    <system.web>
        <deployment retail=”true”/>
    </system.web>

The setting in machine.config will also turn off trace output in a page and detailed error messages remotely. More information about this switch can be found here.

machine.config file is typically located at %SystemRoot%\Microsoft.NET\Framework\%VersionNumber%\CONFIG.

Thanks,
Anh Phan
SDET, Visual Web Developer