|
|||||||||||||||||||||
|
|||||||||||||||||||||
|
Announcements
Want a new Job?
Chapters
Services
Feature Zones
|
Getting StartedWe 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.
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.
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.
<@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 EndWhen 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 PageOpen 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.
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 PageFrom 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 EndThe 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 PageCreate 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 PageOpen 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
The Edit & Add News Item PagesThe 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, <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 <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 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: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 <input name="Admin_ID" type="hidden" id="Admin_ID" value="<%# ds_user.FieldValue("Admin_ID", Container)%>"> Security BriefingDWMX 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
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 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 ControlsNow 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 ControlsControls 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 TemplatesThis 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 LinksThis 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/ [*] : 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 | ||||||||||||||||||||