This tutorial details the steps of building a basic ASP.NET vb application with the new DreamWeaver MX from the perspective of an experienced UltraDev 4 user. In this example we will build a simple news content management application. This tutorial covers ASP.NET objects, controls, and ASP.NET security as well as the issues I encountered working with ASP.NET VB pages in DWMX

Getting Started

We will be creating ASP.NET data driven Master/Detail pages as well as insert, update, and delete pages records with ASP.NET. You will also learn how to build forms using the new ASP.NET server controls, how to implement ASP.NET client side field validation, and how to develop custom ASP.NET controls.

In addition to coverage of DWMX features Dot Net News shows how to implement ASP.NET folder level security on your content management pages and discusses how to authenticate global site users with the ASP.NET authentication service. The complete code of this tutorial is available as a download.

This tutorial assumes you are familiar with creating databases in MS Access, that you understand the underlying concepts of application development, and that you are familiar Dreamweaver UltraDev.

First we’ll need to set up our Access database.[*] The news content system database is simple. Two tables tbl_Admin and tbl_New are all we need. The image to the left shows all the necessary tables and fields. The field types are self explanatory.

Now that we have a database to work with, we need to create a new web project. Inside that folder we’ll create the folder database and save our newly created Access db to it. While we are here we need to create the folder admin, asp, controls, images, and bin. Bin is an important folder that we will cover later.

Start DreamWeaver MX and select the Site drop down > New Site. The first thing you’ll notice—unless you’ve already changed the settings—is a Front Page like wizard thingy pops up. Looking closer now you’ll see two tabs: Advanced, Basic. We’re feeling brave, so we select the Advanced tab. This will open the familiar UD style Site definition Window. Set up the site root folders as usual. When we get to the server models drop down, though, we select ASP.NET VB.

Let’s enter the DWMX design environment and look around. The database Bindings and Server Behaviors tabs are now under the “Applications” section tool palette of the DWMX style GUI. But you’ll notice that instead of just Bindings and Server Behaviors you now have a tab Databases and Components. We’ll begin with the database tab.

The database tab is where you will define the database connection for your ASP.NET application. In ASP.NET a global configuration file web.config holds the database connection and other settings in XML. No, don’t panic, you don’t have to write XML. DWMX will create the web.config file for you.

Select “OLE DB” or “SQL Server” Connection from the “Databases” tab drop down. The expanded ASP.Net connection interface will open. You’ll see several new features: a Build Button and Templates. Click templates and select the driver appropriate for your database. Name the connection datasource then click the templates button. Select JET 4.0 driver for Access 2000 from the templates list box and click “OK”. You will be returned to the original window. Fill in the blank template for your connection string.[†] DWMX writes the web.config file when you click “OK” and close the connections interface. The XML in the web.config contains your database connection and every new *.aspx page you create in the site will automatically be linked to your database with the Dreamweaver Controls tag as soon as you add a dataset or any other SB just as the Connections include is placed in asp files.

<@ Register TagPrefix="MM"
Namespace="DreamweaverCtrls"
Assembly= "DreamweaverCtrls,version=1.0.0.0,
publicKeyToken=836f606ede05d46a, culture=neutral"%>

You may want to customize the stock MX web.config, however. One customization I highly recommend is:

<system.web>

</system.web>

If you work over a network, this code is necessary. This enables specific error messages to be output to a remote user. Without it you must run the page from the desktop of the server machine to get a detailed error report.

[*] Unlike classic asp, ASP.NET is not easily ported to SQL Server by changing the connection string. Most behaviors including datasets will need to be reapplied.

[†] The web.config file requires the complete physical path to the database, i.e. d:\web\net news\database\data.mdb. The Server.Mappath method will not work in the XML file.

Front End

When you begin your asp.net Master/Detail page set you will find the Insert > Master/Detail menu item is grayed out. This means you will have to make these pages without UltraDev automating the process for you.

The Master Page

Open a new file. Select ASP.NET VB from the “Dynamic Page:” list box. From the server bindings drop down, select Dataset. This will open the familiar interface used to define a recordset. The only difference you’ll notice is the “On Failure, Goto:” text box. Also a collection of data is called a dataset in ASP.NET. Name your dataset or use the default as I did and select all from the “tbl_New” Table. Click “Test.” Save the file as asp/default.aspx. If you look in the code view now, you will see the DreamWeaverMX ASP.NET dataset code. Now you can drag and drop dataset fields into your page as usual. At the top of the page create a table with one row and one column. Type in “Site News.” Highlight the text and select “Show Region > Show if Dataset is Not Empty” from the Server Behaviors drop down. Now add “No News” and apply the “Show Region > Show if Dataset is Empty” SB.

Create another table, two rows, one column. Drag the N_headline field and the N_ID fields into the first row. Highlight the field with the value N_headline and make a new link. In the new link URL dialog type “news_details.aspx?N_ID=” then change to code view. Select and cut the dataset “N_ID” field and paste it into the link between the equal (=) sign and the double quote (“). It should look this when you are done:

"><%# DataSet1.FieldValue ("N_headline", Container)%>

As you guessed this links to the details page. In the second row of your table type “Posted:” and drag the date field from the data bindings palette into position behind the colon. Select your table and add the “Repeat Region” SB. From the “Insert > Application Objects” sub menu select “DataSet Navigation Bar.” Save the file and you’re almost done.

There’s one more thing you have to do with a DWMX ASP.NET vb site before you can run the page: deploy the support files. Select “Site > Deploy Supporting Files…” and the Deploy Supporting Files dialog will appear. Select the root folder of your web and click “Deploy.” The DreamweaverCtrls.dll will be copied to the bin folder. Now--if you have an ASP.NET enabled server--you should be able to run the page.

The Details Page

From the “File > New” dialog select a new ASP.NET VB page. Save the page as news_details.aspx. Select “DataSet Query” from the bindings drop down and create a new DataSet. Select all from New. On this page we need filtered results, so select “N_ID” from the “Filter” drop down and then the “=” sign. We are using a query string to pass our N_ID value so you’ll select “URL Parameter” from the next drop down and type “N_ID” in the last field. (Remove quotes from query if you need to—as I did—in the “Advanced” window.) Click “OK” and save the page. Once again you’ll need to create a table—three rows, one column. Now drag the dataset fields into your table: N_headline in the top row, N_Date in second row, and N_paragraph in the final row. Apply any formatting you want, save the page and done.

Back End

The back end Administration will have a Master page for navigating the News items with Add, Edit, and Delete features as well as an Update Settings page where the back end access password/username can be changed. We have a lot to do so let’s get started.

The Master Page

Create a new ASP.NET VB page and save it as “/admin/admin_news.aspx.” This will be our master page. Define a dataset selecting all from the “tbl_New” table. Insert a table, three columns, three rows. In the top and bottom rows enter the text “Add News Item.” Make each instance a hyperlink pointing to “add_news.aspx.” Drag the headline into the first column of the middle row. Move to the second column. Type “Edit” and make it a link that points to” /admin/edit_news.aspx?N_ID=” then drag the dataset N_ID field onto the page and insert it in the query string as we did before. In the final column type “Delete” make a link to “/admin/delete_news.aspx?N_ID=” again using the N_ID dataset field value as our query string parameter. That’s it. The coding is done here.

The Delete Page

Open a new page and save it as “/admin/delete_news.aspx?N_ID=.” Select “Delete Record” from the Server Behaviors drop down. You'll see the “delete record” dialog. Select “Primary Key Value” from the first drop down. Select your connection “datasource.” Select the table “tbl_New.” From the “Primary Key Value” drop down, select “URL Parameter” and enter “N_ID” in the text box. Finally click the “Browse” button and select “/admin/admin_news.aspx” for redirect on success. Save the page and close it because you’re done. When you click the “Delete” link from the admin page the delete will happen so fast you won’t see it, so be careful.

The Edit & Add News Item Pages

The add news page will be our first exposure to server controls. Server controls are ASP.NET objects of various complexity and size. The first server controls we’ll be using are the ASP.NET version of form fields, asp:textbox. Fortunately these server controls will be inserted automatically when you select “Insert > Application Objects >Record Insertion Form.” This will bring up the “Record Insertion Form” dialog. (If you look you’ll see a sister command for “Record Update Form.”) Highlight the “N_ID” line and delete it from the update. Click OK. This returns you the design environment. Delete the row in the form with the date field and insert a hidden field anywhere between the form tags. Name it “N_Date.” This will hold the date posted. In Classic ASP we could simply write <%=Date()=%> in the hidden input value field. In ASP.NET, however, this will not work. In ASP.Net we use the DateTime.Today Property. Your hidden input should look this:

<input name="N_Date"
type="hidden" id="N_Date"
value="<%=DateTime.Today %>">

Now that we have our form we need form field validation. Don’t even bother trying to apply “Validate Form” from the “Behaviors” menu. No, we’re going to have to get our hands dirty and hand code the form field validation. At least the info on the Microsoft Quick Start was quite good. I found lots of helpful and easy to understand information here—including form field validation:

Open a new file and save it as “/admin/login.asp.” Add a form, two asp:text controls and an asp:button control. Name the first asp:text control User_Name and the second User_Password. Add the form field validation as before and save your file. Now we need to figure out some way to check the database records for matching User_Name/User_Password combinations and—if it finds them—set the Admin session variable state to true. One method comes to mind immediately. When the user submits his login, the dataset returns empty if a matching username/password combination is not found. If a match is found the record count returns a postive number. So all we need to do is check to see if the query returns a record and if it does throw the admin flag.

We’ll need a dataset with the following query. We’ll also need to build the parameters to collect the form values submitted. Basically we are building a search page, so we will be using the same techniques we have used to build search pages in Classic ASP. The query will look like so:

SELECT * FROM tbl_Admin WHERE tbl_Admin.User_Name = @User_Name And tbl_Admin.User_Password = @User_Password

We need to add the two parameters to pass the values from the login form to the query. Click the “+” sign at the parameters window and the “Add Parameters” dialog will open. Enter “@User_Name,” select the type as “VarChar.” Next click the “Build” button and the “Build Value” dialog will open. The parameter “@User_Name” will already be in the “Name” field of the “Build Value” dialog. Select “Form Variable” from the drop down “Source” and enter “xyz” into the “Default Value” text field. When you are done it should look like the image below. Click “OK.” When you return to the first window, you’ll see the properly formatted request.form code. Follow the same steps to add the “@User_Password” parameter. After you’ve added the parameters, click “OK” twice to return to the design environment.

Now that we have the dataset and dataset search parameters defined, we need to test our results to authenticate or deny access to the user. For this we will need to do a little hand coding. We can to use a simple if then statement to test the record count returned from our search. If the record count is zero, we don’t authenticate the user. Otherwise we grant access to the admin section.

<%
if ds_login.RecordCount > 0 then
FormsAuthentication.RedirectFromLoginPage("Admin", true)
else if ((Request.Form("User_Password"))) <> Nothing OR ((Request.Form("User_Name"))) <> Nothing
response.Write("Login failed. Please try again.")
end if
%>

As you can see this code is quite simple.

Custom Controls
Now that you have the application built it might be nice to add some user controls to navigate the application. It would also be nice if we could implement templates for the design elements. Custom controls are our answer. ASP.NET controls are referenced as objects with properties (Beginning to sense an Object Oriented pattern?) and can consist of almost anything: html, style formatting, intricate code. Our custom controls will all consist of html.

Adding Controls

Controls in ASP.NET’ are similar to includes in Classic ASP. The main difference is that controls are referenced as objects whereas the content includes are added to the page they appear on. The syntax for accessing controls is again object oriented. As objects controls have properties. In order to access the control, the first thing we have to do is add a reference to the control and describe its properties. We do this by adding the Register Tag to the top of our page like so:

<%@ Register TagPrefix="DotNetNews" TagName="yourtagname" Src="path/filename.ascx" %>

Now all we have to do is declare instances of the control object wherever we need it. A control is declared using the following syntax:

<DotNetNews:Security ID="yourtagname1" runat="server" />

ASP.NET controls turn out to be lot more familiar that we expected, kind of like includes on steroids. Before we end the tutorial we will cover one more use of controls: templating.

Using Custom Controls as Templates

This is so far the best way I’ve found to implement skins or templates on an ASP.NET site. First thing to do is design your template. Now in the spot where you want to display the dynamic content enter XXX. We will use the XXX marker to split the design template into halves that we reassemble on page run. Once you have your template just as you like it save it as a regular htm file, but don’t close it. Now open a new file. Enter code view, select and delete all the html. Add the <%@ Control %> tag to the top of the page and save it as “/controls/front_header.ascx.”

Switch to the template we just created and enter code view again. Find the XXX marker we made earlier. Now select all the markup from the top of the page down to the closing “>” of the last tag before the XXX. Paste this into the “/controls/front_header.ascx” file you just created and save that file. Repeat the procedure and save that file as “/controls/front_footer.ascx.” Now all you have to do is add the register tag to the top of the pages you want to use the controls in and declare the control where it appears. The controls top.ascx, bottom.ascx, and men_left.ascx control the back end look and navigation.

That’s it! You’ve built your first DWMX ASP.NET application. As you can see a lot UD4 features for creating Classic ASP applications are not available in DWMX. Certainly part of this is due to the short amount of time MM had to implement ASP.NET support in this release. I expect the next DreamWeaver version will to offer much more support for creating ASP.NET pages. Also as ASP.NET becomes more popular, we can expect increasing numbers of ASP.NET extensions. As it stands DWMX is an excellent tool for creating ASP.NET applications and promises to get better as time passes.

Useful Links

This short list of links should help get you started with ASP.NET. The MS Web Matrix Project software is worth downloading. It contains some useful templates, links to ASP.NET documentation and the Class Browser—very useful for learning about ASP.NET classes.