Macromedia Dreamweaver MX 2004 Demystified

[ LiB ]

ASP.NET has a tremendous set of controls to use as objects in forms that provide a lot more control than regular form elements. When you use the Dreamweaver server behaviors to create forms in insertion pages or update pages, Dreamweaver uses these web server controls. Having access to the controls separately allows you to customize forms or create your own without having to use the built-in behaviors.

asp:Button

The asp:Button object displays a clickable pushbutton on the form, like the regular HTML button object, but with much more interaction with the application server.

asp:Button has the following attributes:

The asp:Button object inserts the following code (with only the general attributes set):

<asp:Button CommandName="GetEmployees" ID="submitid" runat="server" Text="Submit" />

asp:CheckBox

The asp:CheckBox object inserts an asp:CheckBox element into a form. Check boxes represent choices that are either true or false. The asp:CheckBox has attributes that allow for much more control than the standard check box in HTML.

asp:CheckBox has the following attributes:

The asp:CheckBox object inserts the following code (with most of the attributes set):

<asp:CheckBox BackColor="#999999" BorderColor="#CCCCCC" BorderWidth="6" ForeColor="#000000" Height="40" ID="checkbox1" runat="server" Text="Male" TextAlign="left" Width="40" />

This code produces the control in the browser shown in Figure 26.1.

Figure 26.1. The asp:CheckBox with the TextAlign, Width, Height, BackColor, BorderColor, BorderWidth, and ForeColor attributes set.

asp:CheckBoxList

The asp:CheckBoxList object inserts a set of check boxes from which the user can select multiple items. The list can contain any number of items that are pulled from a data source.

Note that if you have a form that allows users to pick multiple items from the same database field, your processor needs to loop through the results, or it will take only the first choice that has that name. For instance, if your form allows people to pick several toppings for pizza via check boxes, you need to loop through the result for as many times as there are toppings chosen, or only the first topping chosen will be processed .

asp:CheckBoxList has the following attributes:

The asp:CheckBoxList object inserts the following code (with some of the attributes set and a data set previously defined as GetProducts):

<asp:CheckBoxList ID="SelectProducts" runat="server" TextAlign="left" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid"> </asp:CheckBoxList>

This code sets the data source to the data set called SelectProducts that I created with the DataSet server behavior. It then binds the productname field in the database to the DataTextField and the productsid to the DataValueField. The result looks like Figure 26.2.

Figure 26.2. The asp:CheckBoxList with the TextAlign attribute set.

<asp:CheckBoxList BorderColor="#000000" BorderWidth="1" CellPadding="2" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid" ID="SelectProducts" RepeatDirection="horizontal" RepeatLayout="table" runat="server" TextAlign="left"> </asp:CheckBoxList>

This code sets the data source to the data set called GetProducts that I created with the DataSet server behavior. It then binds the productname field in the database to the DataTextField and the productsid to the DataValueField. The RepeatDirection is set to horizontal, and the RepeatLayout is set to put the check boxes in a table. The table is set to have a BorderWidth of 1 and a CellPadding of 2. Note that the border is set as a CSS style in the <TABLE> tag and not with the HTML attribute of BORDER . The result looks like Figure 26.3.

Figure 26.3. The asp:CheckBoxList with the TextAlign,BorderWidth, CellPadding, RepeatDirection, RepeatLayout, and TextAlign attributes set.

asp:DropDownList

The asp:DropDownList object inserts drop-down menu from which the user can select a single item. The list can contain any number of items that are pulled from a data source.

asp:DropDownList has the following attributes:

The asp:DropDownList object inserts the following code (with some of the attributes set and a data set previously defined as GetProducts):

<asp:DropDownList ID="SelectProductID" runat="server" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid"> </asp:DropDownList>

This code sets the data source to the data set called GetProducts that I created with the DataSet server behavior. It then binds the productname field in the database to the DataTextField and the productsid to the DataValueField. The result looks like Figure 26.4.

Figure 26.4. The asp:DropDownList control in the browser.

asp:ImageButton

The asp:ImageButton object displays an image as a clickable pushbutton on the form, like the regular HTML button object but with much more interaction with the application server.

asp:ImageButton has the following attributes:

The asp:ImageButton object inserts the following code (with only the general attributes set):

<asp:ImageButton AlternateText="Order Button" CommandName="orderitems" ID="ImageButtonID" ImageAlign="Middle" ImageUrl="images/button.gif" runat="server" />

asp:Label

The asp:Label object inserts an asp:Label element into a form. The asp:Label displays dynamically generated static text in a form that can be manipulated by the server.

asp:Label has the following attributes:

The asp:Label object inserts the following code (with only the general attributes set):

<asp:Label ID="ColorChoiceID" runat="server" Text="The item is available in multiple colors, select one here:"> </asp:Label>

asp:ListBox

The asp:ListBox object inserts a list from which a user can select a single item or multiple items. The list can contain any number of items that are pulled from a data source.

Note that if you have a form that allows users to pick multiple items from the same database field in the list box, your processor needs to loop through the results, or it will take only the first choice that has that name. For instance, if your form allows people to pick several toppings for pizza via check boxes, you need to loop through the result for as many times as there are toppings chosen, or only the first topping chosen will be processed.

asp:ListBox has the following attributes:

Here's an example:

<asp:ListBox BackColor="#CCCCCC" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid" ID="SelectListID" Rows="2" runat="server" SelectionMode="multiple"> </asp:ListBox>

This code sets the data source to the data set called GetProducts that I created with the DataSet server behavior. It then binds the productname field in the database to the DataTextField and the productsid to the DataValueField. The number of rows visible is set to 2 so that there will be scroll arrows if there are three or more results in the list. The selection mode is set to multiple so that people can select more than one item at a time in the control. The BackColor sets the list's background color to light gray. The result looks like Figure 26.5.

Figure 26.5. The asp:ListBox control with three results and rows set to 2, showing scrollers.

asp:RadioButton

The asp:RadioButton object inserts an asp:RadioButton element into a form. Radio buttons represent related choices, where only one option can be selected. The asp:RadioButton has attributes that allow for much more control than the standard radio button in HTML.

asp:RadioButton has the following attributes:

The asp:RadioButton object inserts the following code (with most of the attributes set):

<asp:RadioButton AccessKey="c" AutoPostBack="false" BackColor="#CCCCCC" BorderColor="#333333" Border BorderWidth="5" Checked="true" CssClass="textstyleforcontrol" Enabled="true" EnableViewState="true" Font-Bold="true" Font-Italic="false" Font-Name="Arial" Font-Names="Times" Font-Overline="false" Font-Size="12" Font-Strikeout="false" Font-Underline="true" ForeColor="#FFFFFF" Height="30" ID="radio12" runat="server" TabIndex="5" Text="Blue" TextAlign="left" ToolTip="color choice - blue" Visible="true" Width="30" />

This code produces the control in the browser shown in Figure 26.6.

Figure 26.6. The asp:RadioButton control in the browser with various formatting options applied.

asp:RadioButtonList

The asp:RadioButtonList object inserts a set of radio buttons from which a user can select a single item. The list can contain any number of items that are pulled from a data source.

asp:RadioButtonList has the following attributes:

Here's an example:

<asp:RadioButtonList BorderColor="#000000" BorderWidth="1" CellPadding="2" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid" ID="SelectRadioList" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" RepeatLayout="table" TextAlign="left"> </asp:RadioButtonList>

This code sets the data source to the data set called GetProducts that I created with the DataSet server behavior. It then binds the productname field in the database to the DataTextField and the productsid to the DataValueField. The RepeatDirection is set to horizontal, and the RepeatLayout is set to put the radio buttons in a table. The table is set to have a BorderWidth of 1 and a CellPadding of 2 and to have two columns. Note that the border is set as a CSS style in the <TABLE> tag and not with the HTML attribute of BORDER . The result looks like Figure 26.7.

Figure 26.7. The asp:RadioButtonList control in the browser with RepeatDirection set to horizontal and RepeatLayout set to table.

asp:TextBox

The asp:TextBox object inserts an asp:TextBox element into a form. Text boxes can be single line, multiline, or password.

asp:TextBox has the following attributes:

The asp:TextBox object inserts the following code (with most of the attributes set):

<asp:TextBox Columns="50" ID="textarea2" MaxLength="100" Rows="5" runat="server" Text="Enter your comments here." TextMode="MultiLine" />

This code produces the control in the browser shown in Figure 26.8.

Figure 26.8. The asp:TextBox control in the browser.

More Tags

The More Tags object opens the Tag Chooser dialog box, shown in Figure 26.9. Here you have access to many more ASP.NET objects to insert into the page. For complete details on these objects, check out the "Resources" section at the end of this chapter, where a number of ASP.NET resources are listed.

Figure 26.9. The Tag Chooser dialog box.

Exercise 26.1. Using the DataGrid

You need to have Microsoft IIS up and running on the machine. You need to have the ASP.NET Framework installed, and the service needs to be running. You also need to have a web browser installed and running.

Create a new folder in your web root called gardenshop , where you will build your application. Unzip the support files for this chapter (available from this book's website at www.peachpit.com) into the gardenshop folder. Browse to test.aspx in the browser. You can't use the File > Open functionality to access the page; the server wouldn't know how to serve the file. Therefore, you have to browse to it. For instance, your address line might look like this:

http://127.0.0.1/gardenshop/test.aspx

Here are the contents of test.aspx:

<script runat="server" language="vb"> Sub Page_Load(Src As Object, E As EventArgs) labelText.Text = "Your ASP.NET server is up and running" End Sub </script> <html> <head> <title>test</title> </head> <body> <asp:Label ID="labelText" runat="server"></asp:Label> </body> </html>

When you browse to the file, you should see this:

Your ASP.NET server is up and running

If you get an error saying that the server application is unavailable, you need to go into the IIS Administrator and set the gardenshop folder's Directory Properties to match Figure 26.10.

Figure 26.10. IIS Administrator showing the properties for the garden-shop website.

Setting up the Site in Dreamweaver

Now that you have the server set up and working, and the gardenshop folder set up, you are ready to set up the site in Dreamweaver and get going with the DataGrid. We assume that you know how to set up a site in Dreamweaver. In this case, you want to set up a site called "The Garden Shop." Set the Local Info to have your local site as the garden-shop folder in your web root that you set up in the last step. As shown in Figure 26.11, set the testing server to have a server model of ASP.NET VB. Set the access to Local/Network and then point that to the garden-shop folder.

Figure 26.11. The Site Definition dialog box for The Garden Shop with the testing server information filled in.

After you set up the site, there is one more thing you need to do with an ASP.NET site. You need to deploy the Macromedia custom controls that let you use all the server behaviors that are included with Dreamweaver.

  1. Select Site > Advanced > Deploy Supporting Files.

  2. In the Deploy Supporting Files To Testing Server dialog box, select the bin directory that will be in the root of your web server, and click Deploy. If you don't have a bin directory in your site root, you need to create that folder first.

    In my case, that path is C:\Inetpub\ wwwroot \gardenshop\bin\.

If you don't put the files in the right place, you get an error when the page is served that says that the server cannot find all the components . The error kindly lists all the locations the server is looking in to find the controls. You can simply take one of these paths (it looks in several places), enter it in the Deploy dialog box, and redeploy the support files.

Inserting a DataGrid

The DataGrid is an amazing server control that is available in Dreamweaver. It is the be-all-and-end-all of displaying data to the page. What would take quite a while and thought to set up in ColdFusion or ASP takes only seconds to lay out in a DataGrid in ASP.NET.

You will create a new page in the Garden Shop site, create a connection to the sample gardenshop.mdb database, and insert a DataSet to get values for the DataGrid to display.

  1. Select File > New, and select a new ASP.NET VB page.

  2. Change the title of the file to View Products, and save the file as viewproducts.aspx in the gardenshop folder.

  3. Make sure that the Server Behavior panel is showing.

  4. Click the + button to add a server behavior, and select DataSet.

  5. You need to have a connection to the database defined, so click the Define button.

  6. In the Connections for Site 'The Garden Shop' dialog box, click the New button, and select OLE DB from the drop-down.

  7. In the OLE DB Connection dialog box, name the connection GardenShopConn, and click the Build button.

  8. Click the Provider tab of the Data Link Properties, and select Microsoft Jet 4.0 OLE DB Provider from the list of available connectors.

  9. Click Next to go to the Connection tab, and browse to the gardenshop.mdb file in the gardenshop folder. Leave the user name blank, and test the connection. If it doesn't succeed, check that you selected the Microsoft Jet 4.0 OLE DB Provider.

    Click OK to close the Data Link Properties dialog box. Your OLE DB Connection dialog box should look like Figure 26.12.

    Figure 26.12. The OLE DB Connection dialog box showing the settings for the GardenShopConn.

  10. Click OK to close the OLE DB Connection dialog box. Click Done to close the Connections dialog box.

  11. Name the DataSet Get Products. In the Connection drop-down in the DataSet dialog box, select your new GardenShopConn connection.

  12. Select tableProducts from the Table drop-down, and click OK. You will select everything in the table.

You should have a DataSet on the page from which the DataGrid can get values to populate itself. You are ready to insert the DataGrid.

  1. Click in the page, and make sure you are in Design view.

  2. Select Insert > Application Objects > Dynamic Data > DataGrid. You can also insert a DataGrid from the Dynamic Data icon of the Application section of the Insert bar.

  3. In the DataGrid dialog box, set the ID to ViewProducts.

  4. Select the GetProducts DataSet you just created in the DataSet drop-down.

  5. Show three records at a time.

  6. Set the Navigation drop-down to Links to Previous and Next Pages. Your dialog box should look like Figure 26.13.

    Figure 26.13. The DataGrid dialog box.

  7. Click OK to close the dialog box. A placeholder for the DataGrid is inserted onto the page.

  8. Save your page.

  9. Preview your page in the browser. You should see something like what appears in Figure 26.14.

    Figure 26.14. The DataGrid being served in the browser.

You now have a formatted table displaying data from the database in rows of alternating color with page navigation, all in one action.

This is pretty nice, but you're not done yet! You will add a way to edit data in each record without creating any more forms or pages. You can do all this directly in the DataGrid.

  1. In the Server Behavior panel, double-click DataGrid (ShowProducts) to get the DataGrid dialog box back onscreen.

  2. Select the productsid column in the Columns area. Click the Change Column Type button, and select Edit > Update and Cancel from the drop-down menu.

  3. In the Edit, Update, Cancel Button Column dialog box, set the following values:

    Title Edit

    Button Type Push Button

    Update Table tableProducts

    Primary Key productsid

    Submit As Integer

    The dialog box should look like Figure 26.15.

    Figure 26.15. The Edit, Update, Cancel Button Column dialog box.

  4. Click OK to close the Edit, Update, Cancel Button Column dialog box.

  5. Select the productnotes column in the Columns area. Click the Change Column Type button, and click the Edit button.

  6. In the Simple Data Field Column dialog box, uncheck the Read Only check box, and then click OK.

  7. Repeat steps 5 and 6 for the productprice column.

  8. Click OK to close the DataGrid, and save the page.

  9. Preview the page in the browser. You should see something like what appears in Figure 26.16.

    Figure 26.16. The DataGrid served in the browser with edit buttons added.

  10. Test your edit button by clicking one of the edit buttons, changing the product notes or the price, and then clicking Update.

You can make right your simple edits in the DataGrid rather than having to create a separate update form. You can also insert Delete buttons to delete items from the database. If you believe, as I do, that the more pages you have in a site, the more potential you have for mistakes to occur, doing all this work in one place is easy.

You can apply many other options to the DataGrid. This information would require several chapters. Check out some of the resources listed next for more samples and exercises.

[ LiB ]
Related

Категории