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

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 #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 #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 #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#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 #40: Did you know…How to scope master pages?

WebDevTools — Thu, 01 Jan 2009 01:50:08 GMT

Master page is a template page that can be used to create a consistent layout for your application. First you create a master page to define the look & feel of the application and then you create the content pages that contains the content.

You can attach these content pages to the master page at the following three levels:

Page Level: You can use the page directive on each of the content pages

<@Page Language="VB" MasterPageFile="~/Main.master"%>

Or programmatically set it in the content page Page_PreInit Event

for VB
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
        Me.MasterPageFile = "~/Main.master"
End Sub

for C#
protected void Page_PreInit(Object sender, EventArgs e)
        {
            this.MasterPageFile = "~/Main.Master";
        }
Application Level : By specifying the following in web.config file, all the aspx files will use the master page as Main.master (If aspx file does not contain a Content control, the master page won't be applied to it )

<configuration>
    <system.web>
               <pages masterPageFile="~/Main.master" />
   </system.web>
</configuration>

[You will notice that the pages node already exists in web.config, add the masterPageFile attribute to this node]
Folder Level: By specifying the following in web.config all the aspx files in a specified folder (admin) will use the master page as Admin.master (If aspx file does not contain a Content control, the master page won't be applied to it )

<configuration>
    <location path="admin">
    <system.web>
               <pages masterPageFile="~/Admin.master" />
   </system.web>
   </location>
</configuration>

[you will notice system.web already exists, leave it as it is & add a new node 'location' with the above content under 'configuration']

By setting master page programmatically or thru web.config you may not get the Visual Studio master page design time features.

Deepak Verma
SDET | Visual Web Developer

Tip #37: Did you know…How to organize usings?

WebDevTools — Sun, 28 Dec 2008 10:28:52 GMT

Overtime C# source code files may have unnecessary & unorganized using directives. Visual Studio IDE organize using options can help you to unclutter the source code.

To organize the C# code right click anywhere inside the code editor, select Organize usings.

Select Remove Unused Usings to remove any using directives that are not used in the source code (this may remove some required using directives if the source code doesn't build)
Select Sort Usings to organize alphabetically the using directives (by default directives that begin with System comes before other using directives)
Select remove and Sort to perform both of the above operations

Thanks,
Deepak Verma
SDET | Visual Web Developer

Tip #35: Did you know…How to add Intellisense from script libraries for JS files?

WebDevTools — Wed, 17 Dec 2008 00:50:08 GMT

Here is an example to add intellisense for JS files in VS 2008.

So, you have two Javascript files

Jscript1.js with the following code

function validateForm() {
}

and Jscript2.js (wherein you want current JScript file to show intellisense including objects & functions declared in Jscript1.js)

Now to add intellisense, from the solution explorer drag drop Jscript1.js into Jscript2.js.

You will notice that the following Jscript document comment has been added to the Jscript2.js file.

/// <reference path="JScript1.js" />

And now you can start using the intellisense, try typing in validateForm in Jscript2.js.

Thanks,
Deepak Verma
SDET | Visual Web Developer

Tip #33: Did you know… How to create Nested Master Pages using VS 2008?

WebDevTools — Sat, 06 Dec 2008 03:26:16 GMT

VS 2008 and VWD 2008 both support Nested Master Pages which means you can have a Base Master page which would cater to the whole site and then you can further customize these Base Master Pages.

Here is how you do it:

1. Create a BaseMasterPage.master for the base look:

First we need to create a Base Master Page look, which will apply to the entire site. To do this you will have to Add New Item to your Web Site and Select Master Page Template. Let us name it BaseMasterPage.Master.

Let us say that our BaseMasterPage looks like this:

2. Create a NestedMasterPage.master based on the Base Master Page created above.

To do this right click on Solution Explorer of your web site and launch the Add New Item dialog.

In this dialog select Master Page Template and to make this Master page a Nested one, specify the parent Master page by checking the “Select master page” checkbox as shown below.

Click Add in the above dialog. This will automatically launch the “Select a Master Page Dialog” as shown below. In this dialog select your parent/base master page.

Notice that VS will now add a blank <asp:content> control inside the Nested Master Page and this content control can be further customized. This is the same BaseContentPlaceHolder which was available in the parent master page.

3. Overriding BaseContentPlaceHolder in NestedMasterPage.master.

To override the contents in NestedMasterPage, copy paste the following piece of code inside the BaseContentPlaceHolder

<asp:Content ID="Content2" ContentPlaceHolderID="BaseContentPlaceHolder" Runat="Server">
      <p>
        This is data from Nested Master Page.
       </p>
<asp:ContentPlaceHolder id="ContentPlaceHolderInNestedMP" runat="server">

   </asp:ContentPlaceHolder>

</asp:Content>

At this stage, your NestedMasterPage will look like this. Also, note that we have added a New ContentPlaceHolder (ContentPlaceHolderInNestedMP) in the Nested Master Page.

4. Create content page based on the NestedMasterPage.master

To add a content page using the NestedMasterPage.master, all you need to do is select NestedMasterPage.Master in solution explorer, right-click and select “Add Content Page”. This will add a new content page with an empty ContentPlaceHolderInNestedMP, which could be overridden.

Reshmi Mangalore

SDET, Visual Web Developer

Tip # 30: Did you know... Ajax Extender controls UI behaves differently in VS 2008 than in VS 2005

WebDevTools — Wed, 26 Nov 2008 23:12:00 GMT

In VS 2005, you can drag and drop an extender control anywhere on the design surface. However, in VS 2008, you can drop an extender only on an ASP control which the extender can extend its functionality. When you drag an extender and hover it over a control, if the control can support the extender, you would see the cursor turn into a plus (+) sign. If you hover an extender over the blank design surface, or over a control which is not supported by the extender, the cursor will turn into a stop sign which indicates that it can't be dropped at that position.

Another difference is, in VS 2005, an extender is shown in the design surface after being added to the page. However, at runtime, the extender is not shown at all. This makes it hard for developers to truly know how the page will look like at runtime when designing the page. In VS 2008, we have changed that behavior by completely hiding extenders in the design view. The user can recognize if a control is having an extender by checking if the control's smart tag has a little green icon shown.

Anh Phan

SDET, Visual Web Developer

Tip #29: Did you know… How to enable Edit and Continue feature for Web Application Projects?

WebDevTools — Wed, 26 Nov 2008 23:06:59 GMT

If you want to edit your WAPs while debugging them, here is how you do it:

1. Check the “Enable Edit and Continue” checkbox in the Web Properties page.

2. Check the “Enable Edit and Continue” checkbox under Tools->Options->Debugging->Edit and Continue

These two setting will enable Edit and Continue as you debug your WAPs.

Reshmi Mangalore

SDET, Visual Web Developer

Tip #28 Did you know… That “Go to definition” is supported for CSS Class?

WebDevTools — Wed, 26 Nov 2008 00:15:36 GMT

If you have a style defined as Class = ”fooRed” as shown below and want to quickly know what does fooRed style contain?

 <div class ="fooRed">
    In RED
 </div>

Just place your cursor on fooRed and hit the F12 button. This will highlight the CSS class for you even if the class lives in the Current Page or in an External style sheet.

F12 is the short cut you can use instead of, Right Clicking fooRed and selecting “Go to Definition” action in the context menu as shown in the picture below.

So, when you hit F12, the class is highlighted as shown below.

This way you can get to style definition with just one key –>F12

Reshmi Mangalore

SDET, Visual Web Developer

Tip #26: Did you know... How to have C# and VB.NET files inside your App_Code directory?

WebDevTools — Fri, 21 Nov 2008 14:13:00 GMT

If you are taking advantage of the App_Code folder to develop an ASP.NET WebSite some times you need to use code files that are written in different .NET languages. For example, you may want to use C# files and VB.NET files in the same web site:

To be able to do this you can use a feature of the compilation section in web.config to configure sub folders inside App_Code to be compiled separately.

<compilation debug="true">
    <codeSubDirectories>
        <add directoryName="VBFiles" />
    </codeSubDirectories>
</compilation>

Federico Silva Armas
SDET, ASP.NET QA Team

Tip #24: Did you know…You could display CSS/HTML errors as warnings or as errors?

WebDevTools — Sat, 15 Nov 2008 04:22:25 GMT

VS 2008 has this cool feature of downgrading any CSS/HTML errors to warnings. This is helpful when you want to separate out validation errors and are looking for what is actually stopping your build.

In VS 2008 the default behavior is to display any HTML/CSS errors as warnings as shown in the picture below. Note that warnings have a green squiggle.

The settings for this feature is available under Tools –>Options –>Text Editor –>HTML->Validation as shown below.

If you still want your CSS/HTML errors to show up as errors you can uncheck the as warnings (HTML, CSS) check box. By doing this, VS will display it as errors as shown below. Note that error have a red squiggle as shown below.

Reshmi Mangalore

SDET, Visual Web Developer