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.
