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

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 #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 #74: Did you know…How to Add and Remove AJAX Extenders in Visual Studio 2008 Designer?

WebDevTools — Sat, 06 Jun 2009 04:25:00 GMT

Tip#62 showed you how to add an AJAX Control Toolkit to your Toolbox.

Once you have the toolkit here is how you proceed:

1. Switch to Design View of the page and drag drop ScriptManager control from the AJAX Extensions tab of toolbox to the designer.

2. Drag drop an asp button control to the designer to which you would want to add the extender.

4. Select the button control and click on the Smart Tag. This will bring up the

Add Extender.. option.

5. Now click on Add Extender….This will bring up the Extender Wizard as shown below. Pick ConfirmButtonExtender and click Ok. Alternatively you can drag drop the ConfirmationButtonExtender from your toolbox on to the button control on your designer.

It is interesting to note that on adding an extender control, Visual Studio’s property grid displays the extender properties. Set the Confirm Text property for the extender to be “Are you sure?”.

6. Run the page and see that on clicking the button, you get a confirmation box as shown below.

7. To remove, select the control and bring up the Smart Tag and click on the Remove Extender option in the Smart Task Menu. This will bring up the Remove Extender dialog.

Click Remove and click Ok to remove the extender from your button control.

Enjoy!

Reshmi Mangalore

SDET, Visual Web Developer

Tip #69: Did you know…The keyboard shortcut for View in Browser?

WebDevTools — Mon, 01 Jun 2009 00:27:35 GMT

Ctrl +Shift+W does the trick for you.

This short cut is mentioned under File Menu -> View in Browser.

So if you are still using Select File -> Right click for context menu and then selecting View in Browser as shown below, you may want to start using Ctrl+Shift+W.

Reshmi Mangalore

SDET, Visual Web Developer

Tip #68 Did you know… How simple it is to attach an existing style sheet to your web page?

WebDevTools — Mon, 01 Jun 2009 00:19:01 GMT

Open an existing web site in VWD. Open the page by double clicking on it in solution explorer to which you want to attach the existing style sheet in your web site.

Now, switch to Design View of the page and bring up Select Style Sheet dialog by clicking on menu: Format –> Attach Style Sheet as shown below.

Click the OK button and this will add a link to the Style sheet that you selected in the Select Style Sheet dialog. Now you can make use of all the styles described in this style sheet.

<head runat="server">
    <title>Untitled Page</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head></PRE< P>

Alternatively, you can just switch the page to which you want to add the link and Drag Drop the style sheet from solution explorer to the page in which you want to make use of the styles. The drag drop action adds the above piece of code to source view.

Reshmi Mangalore

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 # 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 #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 # 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 #19: Did you know…How to set the default view to Design view?

WebDevTools — Fri, 31 Oct 2008 02:14:03 GMT

Source View is the default view for the IDE when you edit a Web page. You can customize the IDE so that Design View is the default.

Select the menu option : Tools – > Options…

From the Options dialog tree select HTML Designer –> General

Select Design View radio button from the Start Pages in section as shown in the picture below.

Deepak Verma
SDET | Visual Web Developer

Tip #18: Did you know…How to absolute position controls on copy paste or drag drop from Toolbox?

WebDevTools — Wed, 29 Oct 2008 13:38:00 GMT

To absolute position any control on your designer, you select the control and then select the following menu option: Format –> Position… ->Position style ->Absolute.

Sometimes you may want the controls to be absolutely positioned on the design surface as soon as you drag drop control from the tool box or as soon as you copy paste on designer.

Here is how you enable this:

Go to Tools –> Options –>HTML Designer –>CSS Styling

And check “Change positioning to absolute for controls using Toolbox, paste or drag and drop” as show below in the picture.

Now, if you switch to Design View and drag drop a button control, the designer will automatically add style="position: absolute" to the control. This control can then be dragged on the design surface by grabbing the white tab (asp:button#Button1) and placed where required.

Absolutely positioned button control with the white tab:

Reshmi Mangalore

SDET, Web Development Tools