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

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 #10 Did you know… Visual Web Developer 2008 has a New Style Builder Dialog?

WebDevTools — Fri, 26 Sep 2008 04:36:49 GMT

Visual Studio 2008 has a New Style builder dialog. This dialog box helps you design new styles and also preview it at the same time. Using this dialog, you can create a style which can live in current page, an existing external style sheet or a new external style sheet. You can create styles which are ID-based, element-based, in-line, class-based and styles which have complex selectors.

To invoke the “New Style” dialog go to Format Menu-> New Style option. You can also invoke this dialog via the Apply Styles and Manage Styles tool windows.

Here is how the dialog looks like:

Here are the various sections of this dialog box:

Define in: You can define your newly created style in Current page, New Style Sheet or an Existing Style Sheet.
Selector: You can type your own or select from the existing drop down. For example to use an inline selector, select (inline style) from the drop down.
Apply new style to document selection: Checking this checkbox will apply the style to the selected control in your designer.
Category: Clicking on each category will bring up associated properties on the right hand side of the dialog. Any category which has properties set will appear in bold. In the picture above you can see that Font, Background and Border are bold as they have a few properties set.
URL: This needs to be set only if you want to place your newly created style in an external style sheet. This should indicate the path to a .css file.

Now if you want to create a style for your button control in designer, all you need to do is select the button control in designer, bring up the New Style dialog, set the various properties you want, preview it and click Apply button.

Simple right?

Reshmi Mangalore

SDET, Web Development Tools

Tip #8 Did you know … How to create an ASP.NET Web User Control and include it in your web page?

WebDevTools — Fri, 12 Sep 2008 01:44:55 GMT

Creating an ASP.NET Web User Control is as simple as creating an ASP.NET Page using Visual Web Developer.

Here are the steps:

1. Open up an existing Website to which you want to add the user control.

2. Right Click on the Website context menu and click on “Add New Item … ”. This will bring up the Add New Item dialog box with a list of Visual Studio installed templates. Select “Web User Control” as shown in the picture below.

3. Click Add. This will add the user control to your website. You can open the User Control in Design View and start adding controls to it from the tool box.

4. The ASP.NET user control looks very similar to a ASP.NET Web Page, except that it is stored with an .ascx extension and it has a @Control directive rather than a @Page directive. Also, note that the User control does not contain html, body and form elements. The control directive looks like this:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="WebUserControl.ascx.vb" Inherits="WebUserControl" %>

 5.  Now, registering this Web User control to your web page is as simple as dragging and 
  dropping the User Control from Solution Explorer to the required web page in design view
  mode. At this point Visual Studio will automatically register the User Control in the web page
  by adding the @Register directive in your web page as shown below.

<%@ Register src="WebUserControl.ascx" tagname="WebUserControl" tagprefix="uc1"%>

The tagname attribute is the name of the user control and tagprefix is used to determine a 
unique namespace for the user control. Src attribute determines the path to the user control.
 
6. Visual Studio also adds the user control to the page by adding the following line of code.
 
<uc1:WebUserControl ID="WebUserControl1" runat="server" />

Note that the TagName along with the TagPrefix is used to identify the Control.

Reshmi Mangalore

SDET, Web Development Tools

Did You Know… Tip #1 – Powerful CSS Tools to Create, Manage and Apply Styles

WebDevTools — Thu, 24 Jul 2008 01:50:04 GMT

Visual Studio 2008 introduces three new tool windows for CSS styling. They are:

Apply Styles
Manage Styles
CSS Properties

All the above options are available under the View menu when you are in design view or in split view mode.

Apply Styles: Using this tool window you can create, apply and modify styles. This tool window lists all the style for a particular page. The list will include style defined inline, style in external style sheet and styles that live in current page. Applying a style to a selected control is as simple as selecting a control, then you can click on styles to be applied from the list of styles in this tool window.

Manage Styles: Using this tool window you can manage the arrangement of styles by moving them around from an external style sheet to the current page, etc.

CSS Properties: Using this tool window you can quickly find out which styles are applied to a particular control on a page. You can also figure our which style rule overrides which for a selected control. You could also use this tool to add, delete or modify CSS properties of an existing style.

Reshmi Mangalore

SDET, Web Development Tools