ASP.NET tutorial using Dreamweaver MX






4.78/5 (22 votes)
Nov 29, 2002
16 min read

425795

6135
An article demonstrating the use of Dreamweaver MX to create a simple ASP.NET application.
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./p>
[†] : 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.