Jsp, Tomcat, J2Ee, Linux Web Hosting, Hibernate Programming Blog

As you ve seen, the DataList control offers lots of different ways to display data from database tables. The template you define is applied to every record that s retrieve from the database table. But sometimes, you don t want to show data from multiple records. Sometimes, you just want to show a single record, or a single piece of information from a table. For those occasions, the FormView control might be your best bet. The FormView Control The FormView control is similar to the DetailsView control in that it only shows one record at a time. But it s also similar to a DataList control in that it displays data in such a way that it looks like text printed on a page rather than a table or form. If you want to display and edit one record at a time, you re much better off using the DetailsView control, as opposed to FormView. The DetailsView control, which is new in ASP.NET 2.0, is much easier to work with. The FormView control works like the other Data controls in that you drag it to a page, define your data source, and optionally edit its template to get the exact look you want. Because it s limited to displaying a single record, FormView can be useful for displaying a single item of data, such as a sum or total. Here s an example. In Chapter 11, I created a view named DetailedUsersItemsView which contains detailed information about every transaction. Suppose you want to sum up the ItemPrice field in that view to see a grand total of all transactions. You d start by dragging a FormView control onto a page. From its Common Tasks menu, choose New Data Source, choose Database, and click OK. As always, choose the standard connection string, and click Next. On the Configure the Select Statement page, you won t be able to use the Specify columns from a table or view in this example because you need a sum of all the numbers in a view. You have to choose Specify a custom SQL statement or stored procedure, then click Next to get to the more advanced query editor where you can specify a sum. On the next page that appears, click the Query Builder button. In the Add Table dialog box that opens, click the Views tab, click Detailed UsersItemsView, click Add, then click the Close button in the Add Table dialog box. In the Query Builder, scroll down the field list for the view and choose ItemPrice. Right-click some empty space in the top page of the Query Builder and choose Add Group By. Then, in the query grid, set the Group By column for the ItemPrice field to Sum, as shown in Figure 12-61. 312 Part III: Personalization and Databases
Visit our web design programs services for an affordable and reliable webhost to suit all your needs.

Keep in mind that the ItemTemplate is like a mini Web page onto which you can place any text or image. For example, let s say you have a small graphic image of a bullet you d like to place to the left of each list item. First, you ll need to make a little space to the left of the HyperLink control. Click inside the template, press Ctrl+Home a couple of times, then press the spacebar and left arrow key to make a little space. Then, just drag your little image into the space you made, as in Figure 12-60. If you want to put a bullet character and space to the left of each item, rather than a graphic image, switch to Source view by clicking the Source button at the bottom of the Design surface. Find the tag between the and tags. To the left of that tag, type • (for the bullet) and   (nonbreaking space) for the blank space. Both characters should be right up against the tag like this: •  When you switch back to Design view, by clicking Design at the bottom of the Design surface, you ll see the character and space in place. Of course, in the Web browser, the character will appear to the left of each item in the list. Figure 12-60: Graphic in Item- Template (left) and in browser (right). Figure 12-59: DataList control s ItemTemplat e contains a Hyper Link control. Chapter 12: Using Data in Web Pages 311
We highly recommend you visit web and email hosting services if you need stable and cheap web hosting platform for your web applications.

You see the control with the standard field names and abc placeholders. To change that to a list of working hyperlinks, you need to remove the text and labels that are currently in the control. Then put in a single HyperLink control. Here s how: 1. Choose Edit Templates from the DataList control s Common Tasks menu. 2. Delete the text and Label controls that are currently in the template, so that the template is empty. 3. From the Standard group of controls in the Toolbox, drag a HyperLink control into the Template. 4. From the HyperLink s Common Tasks menu, choose Edit DataBindings. 5. In the left column of the dialog box that opens, click Text, then set the Bound To property to the name of the field that contains the site name. In my example, that would be the SiteName field. 6. In the left column, click the NavigateURL property. 7. Set the Bound To property to the name of the field that contains the URL. In my example, that would be the SiteURL field. 8. Click OK. At this point, the ItemTemplate looks like Figure 12-59. When viewed in a Web browser, the page shows each site s name as a hyperlink. Clicking the link opens the page to which the link refers. Figure 12-58: Binding control to the SiteName and SiteURL fields in the Links table. 310 Part III: Personalization and Databases
From our experience, we are can tell you that you can find a reliable and cheap webhost service at Java Web Hosting services.

Using a DataList to show HyperLinks In the photos example, I used a HyperLink control in a DataList ItemTemplate to show hyperlink text from a table (the PhotoCaption field), and to define where the link takes the user (the PhotoURL field). You can use the same technique to show a list of links that are stored in a Database table. In Chapter 11, I created a sample table named Links that contains two text fields named SiteName (the name of a Web site) and SiteURL (the URL of the site). It s a small sample table, as shown in Figure 12-57. But of course the technique described here would work with any number of records in a table. A DataList control containing a standard HyperLink control that s bound to the SiteName and SiteURL fields in the table will present a nice list of links. Here are the steps to create the list: 1. From the Data group in the Toolbox, drag a Data List control to any .aspx page or content placeholder. 2. From the DataList control s Common Tasks menu, select Choose Data Source.. 3. Choose Database and click OK. 4. Choose your normal connection string and click Next. 5. Choose the table that contains the site data, then choose the columns that contain the site name and URL. For my example, that would be the SiteName and SiteURL fields in the Links table, as shown in Figure 12-58. 6. Optionally, use the ORDER BY button to alphabetize the links by SiteName. 7. Click Next, then click Finish. Figure 12-57: Sample Links table with site names and URLs. Chapter 12: Using Data in Web Pages 309
If you are in need for chaep and reliable webhost to host your website, our recommendation is http web server services.

8. Click OK in the dialog box. Figure 12-56 shows how the page looks when viewed in a browser. When a user clicks a picture caption, the effect will be to open the picture, full size, in a new browser window. The user can then click the Back button in the browser to return to the previous page where all pictures are shown in columns. To download a picture, the user just needs to right-click the picture and choose Save Picture As. You could add instructions to the page to explain that to the user. Figure 12-56: Photos with captions displayed as hyperlinks. Figure 12-55: The Navigate URL property for the sample Hyper Link control. 308 Part III: Personalization and Databases
From our experience, we can recommend PHP Web Hosting services, if you need affordable webhost to host and run your web application.

Adding picture captions Let s suppose that you also want to show each picture s caption. But as an added bonus, you want to make each caption a link that, when clicked, shows the corresponding image at full size, rather than with the Width you set for the Image control. The trick here is to add a HyperLink control to the template. Set the Text of that link to the PictureCaption field, and the NavigateURL property to the PictureURL field. Here are the steps: 1. In Design view, choose Edit Templates from the DataList control s Common Tasks menu. 2. In the ItemTemplate, click to the right of the Image control and press Enter to make a little room under the control. 3. From the Standard group of tools in the Toolbox, drag a HyperLink control into the ItemTemplate, so that it s under the Image control. 4. From the HyperLink control s Common Tasks menu, choose Edit DataBindings. 5. Set the Text property to the name of the field that contains the text to show. In my example, that would be the PhotoCaption field, as shown in Figure 12-54. 6. In the left column, click on NavigateURL to define where the link will take the user. 7. Set the Bound To property for the NavigateURL property to the name of the control that contains the path to a page or picture. In this example, that would be the PhotoURL field, as shown in Figure 12-55. Figure 12-54: The Text property for the sample Hyper Link control. Chapter 12: Using Data in Web Pages 307
We recommend high quality webhost to host and run your jsp application: christian web host services.

3. In the Properties dialog box, set the Columns option to the number of columns you want, then choose either Horizontal or Vertical for the orientation. For my example, I set Columns to 4 and Direction to Horizontal, as shown in Figure 12-52. 4. Optionally, choose other formatting options from the Properties dialog box. For the example you re about to see, I did the following: Click Format in the Properties dialog box, click the + sign next to Items, click Normal Items, set the Horizontal Alignment to Center, and set the Vertical Alignment to Bottom. Click Borders in the Properties dialog box and set the cell spacing, padding, and border lines. For this example, I only set Cell Spacing to 10 to put a little space between each picture. 5. Click OK in the Properties dialog box. Viewing the page in a Web browser at this point shows the pictures in columns, as in the example shown in Figure 12-53. Figure 12-53: Pictures displayed in columns by a DataList control. Figure 12-52: Going for four columns of photos here. 306 Part III: Personalization and Databases
We recommend cheap and reliable webhost to host and run your web applications: Coldfusion Web Hosting services.

Sizing the pictures You might want to make each picture of equal size so you can put them into columns. Click on the Image control to select it. Then, in the Properties sheet, set the Width property to however wide you want each picture to be. For example, in Figure 12-51, I ve set the Width of the Image control to 150 pixels. Showing pictures in columns Recall that the DataList control can show data in multiple columns. To show pictures in columns, you first need to get out of Template Editing mode. Then use the Property Builder for the DataList control to configure the columns. The steps are: 1. Right-click the ItemTemplate and choose End Template Editing (or choose End Template Editing from the Common Tasks menu). 2. Choose Property Builder from the DataList control s Common Tasks menu. Figure 12-51: Width of the Image control set to 150 pixels. Figure 12-50: The ItemTemplate for a DataList control. Chapter 12: Using Data in Web Pages 305
In case you need affordable webhost to host your website, our recommendation is ecommerce web host services.

To show each picture as an actual picture rather than the PhotoURL value, you need to get an Image control from the Standard group of tools into the ItemTemplate. Then bind the ImageURL property of that control to the PhotoURL field. You can start by deleting what s already in the template. Here are the steps: 1. Delete all the text and both Label controls from the ItemTemplate, so that the template is just an empty box. 2. In the Toolbox, click the + sign next to Standard to show the Standard ASP.NET controls. 3. Drag an Image control from the Toolbox into the ItemTemplate. The control appears as a small box containing a red X (it s just a placeholder for each picture that will be shown in the Web browser). 4. Click the Image control s Common Tasks button and choose Edit Data Bindings. 5. In the dialog box that opens, click ImageURL in the left column under Bindable Properties. 6. In the right column, choose Field Binding. 7. From the Bound To drop-down list, select the name of the field that contains the link to the image. In the example of the Photos table, that s the PhotoURL field, as shown in Figure 12-50. 8. Click OK. Viewing the page in a Web browser at this point will display each picture rather than just the URL to the picture. If that s all you want, then you re done. But chances are you ll want something fancier than just a bunch of pictures shown down the page. So let s look at some things you can do to fancy things up. Figure 12-49: The ItemTemplate for a DataList control. 304 Part III: Personalization and Databases
From our experience, we are can tell you that you can find a reliable and cheap webhost service at Java Web Hosting services.

plain text, while the PhotoURL field contains the path to a picture in a folder named FlowerPix. You can use a DataList control to display the actual picture to which each PhotoURL refers. There s nothing special about how you initially create the control. The steps, as usual, are: 1. Drag a DataList control from the Data group in the Toolbox onto any .aspx page or Content Placeholder. 2. From the DataList control s Common Tasks menu, select Choose Data Source.. 3. Choose Database, then click OK. 4. Choose your standard connection string and click Next. 5. Choose your table or view and columns to display. For this example, I ll retrieve the PhotoCaption and PhotoURL fields from the Photos table, as in Figure 12-48. 6. Click Next and Finish. In Design view, the DataList control appears with the usual field names and placeholders (abc for the text fields). In a Web browser, you still only see the links to the images, for example ~/Images/FlowerPix/Flower01.jpg rather than the actual photo. To get the photo to show, you need to edit the DataList control s ItemTemplate. As always, you can edit the template by choosing Edit Templates from the control s Common Tasks menu, or by right-clicking the control and choosing Edit Templates.Item Template. The ItemTemplate is like a miniature page that defines how each record from the underlying table will be displayed on the page. Initially the ItemTemplate just shows each field name as text typed right into the template, and each field as a Label control, as shown in Figure 12-49. Figure 12-48: Binding DataList control to fields from the Photos table. Chapter 12: Using Data in Web Pages 303
In case you need affordable webhost to host your website, our recommendation is ecommerce web host services.