ASP.NET tutorial using Dreamweaver MX

• Download demo project - 1.07 Mb

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 FrontPage 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>
<customErrors mode="Off" />
</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.

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:

<a href="news_details.aspx?N_ID=<%# DataSet1.FieldValue("N_ID",
   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 you're 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” and 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 roperty. Your hidden input should look this:

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

Now 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: http://asp.net/Tutorials/quickstart.aspx. We’ll be using ASP.NET client side form validation. We’ll need two functions for this, one in VB.NET, the other in JavaScript.

VB.NET:

<script language="VB" runat="server">
Sub Page_Load
    If Not IsPostBack
        ' Validate intially to force *s to appear 
        ' before the first round-trip
        Validate()
    End If
End Sub
</script>

JavaScript:

<script language="javascript">
<!--
function ClientOnChange() {
    if (typeof(Page_Validators) == "undefined")
        return;

    document.all["lblOutput"].innerText = Page_IsValid 
                 ? "Page is Valid!" 
                 : "Some of the required fields are empty";
}
//-->

</script>

In ASP.NET we use the RequiredFieldValidator control to perform simple field validation. The syntax of the RequiredFieldValidator is simple:

<asp:RequiredFieldValidator 
   id="RequiredFieldValidator1" runat="server" 
   ControlToValidate="N_headline" 
   ErrorMessage="*" Display="Static"> 
   </asp:RequiredFieldValidator>

The first thing we need to do to our “Add News Item” page is add the >asp:label control referenced by the VB script sub routine that fires on the page load event. It should look like so:

<asp:Label 
            ID="lblOutput" Name="lblOutput" 
            Text="Fill in the required fields below" 
            cssclass="errortxt" 
            runat="server" />

Now add the required field validation controls for the N_headline and N_Paragraph asp:textbox controls. The required fields reference the asp:textbox controls with the ControlToValidate property.  We also need to modify the N_headline and N_Paragraph asp:textbox controls for the dynamic client side validation by setting the onchange event property to ClientOnChange. The result will look something like this.

<asp:RequiredFieldValidator 
            id="RequiredFieldValidator1" 
            runat="server" 
            ControlToValidate="N_headline" 
            ErrorMessage="*" Display="Static"> 
</asp:RequiredFieldValidator>

<asp:textbox 
            Columns="25" 
            ID="N_headline" 
            MaxLength="150" 
            Rows="1" 
            runat="server" 
            TextMode="SingleLine" 
            onchange="ClientOnChange();" />

Assuming you’ve added the RequiredFieldValidator to the N_headline and N_paragraph asp:textbox, you can save and close. The “Update News Item” and “Update Settings” forms are built following the same procedure outlined above for the “Add News Item” page—with the exception that you insert a “Record Update Form” instead of an “Insert Record Form” but that should be obvious. The other difference is the Update SB requires a hidden input on the page to hold the TableName_ID value. When using then “Insert > Record Update Form” the TableName_ID value is added to the form as asp:label text. You should change this to a hidden input as this autonumber field cannot be changed.

<input 
            name="Admin_ID" 
            type="hidden" 
            id="Admin_ID" 
            value="<%# ds_user.FieldValue("Admin_ID", Container)%>">

Security Briefing

DWMX has no built in support for adding security to ASP.NET pages. The ASP.NET platform, however, has built in forms authentication for securing websites. This authentication is defined in the XML of the web.config like so:

<system.web>
<customErrors mode="Off" />
<authentication mode="Forms">
<forms name=".ASPXAUTH" loginUrl="admin/login.aspx">
<credentials />
</forms>
</authentication>
<authorization>
<deny users="*" />
</authorization>
</system.web>

This type of security secures the entire website. On login the visitor is redirected to the page originally requested or the site's home page. But we don’t really want to secure the entire application. We just don’t want anyone to get into the admin section. The first thing we have to do is change the word "deny" to allow in root directory web.config. Now our visitors can get into the site. Next create a new web.config file and save it to the admin folder so we can set separate security settings on that folder.

Enter the following in the new web.config:

<configuration>
<system.web>
<authorization> 
<allow users="admin" />
<deny users="*" /> 
</authorization> 
</system.web>
</configuration>

Notice that the new web.config has only the security settings for the admin folder. All other settings are inherited from the root web.config. Web.config settings have a top down hierarchy. You might think of them as cascading like style sheets.

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. Objects and 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" />

SP.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 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.

http://dnzone.com/
http://asp.net/Tutorials/quickstart.aspx
http://asp.net/webmatrix/default.aspx
http://support.microsoft.com/default.aspx?scid=fh;en-us;aspnet
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vbcon98/html/vbconwelcometovisualbasic.asp

[*] : 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.