Skip Navigation LinksHome : CBC Classes : ASP.Net : Database 5 - Advanced Templates

CS218 ASP.Net - Database 4 Advanced Templates

The code examples for this section are in the folder 9AdvTemplates.

  1. Displaying Items in a Template
    1. Displaying the text from the database in a label or textbox using Text='<%# Bind("fieldName") %>>' (video 9a1, textDisplay.aspx)
    2. Displaying Images from the database (video 9b1, imageDisplay.aspx)
    3. Error Checking for displaying images from the database (video 9b2, Code, imageDisplayWErrorCheck.aspx and imageDisplayWErrorCheck.vb)
    4. Formatting Strings For Dates and Currency (video 9c1, CodeformatDateCurrency.aspx)
      1. Good article on format strings
      2. MSDN article on format strings
      3. PDF Chart for ASP.Net formatting
      4. The SQL injection problem for dataFormatString
  2. Gathering User Input - Replacing the textbox for editing and adding new records
    1. Using a drop down list (video 9d1, dropdown1.aspx)
    2. Populating the drop down from a database table (video 9d2, dropdown2.aspx)
    3. Using a checkbox (video 9e1, checkbox.aspx)
    4. Using a radioButtonList (video 9e2, radiobuttons.aspx)
    5. Using an Ajax editor (videos 13b1, 13b2)

Storing and Displaying Images

While it's possible to store actual image files in a database table, it's difficult and it takes up a lot of storage in the database. A better alternative is to store the name of the image file. However, this requires some code to get the image to display in a detailsview template (or any templated control).

This is the code to add to the template(s) in your detailsview. Remember that you probably want to just display the image in the ItemTemplate. It won't be displayed in the InsertItemtemplate. You may choose to display it in the EditItemTemplate, but make sure and also display some type of input control (like a textbox or dropdown) to allow the user to change the image file.

The only change you should make is to change yourImageField to match the name of the field in your database that stores the image file name.

    <asp:Label ID="imageLabel" runat="server" 
             Text='<%# checkImage(Eval("yourImageField")) %>' >
    </asp:Label> 

This code goes in the .vb file. Put it inside the main class declaration, but outside of any other subroutines or functions. If necessary change the ../images/ to match the path to your images folder. (Here's a weird thing. Using the ~/pathname and runat='server' doesn't work in this case. You have to add the correct path. But the good news is that this isn't like the masterpage where the path will change. The path from this page to the images folder will always be the same. The reason for this is that this text is being passed to an asp:label. The label is being processed by ASP, but the text inside the label is NOT processed by ASP. Since the image path is inside the label text, it won't be processed, so there's no chance for the ~/ to be changed to the correct path. )

You should also change the other attributes alt='your alt text' width='340' to the appropriate values for your image.

    Function checkImage(ByVal imageString As Object) As String
        If (imageString Is DBNull.Value) Then
            Return ""
        Else
            Return "<img src='../images/" + imageString.ToString + "' alt='your alt text' width='340'  />"
        End If
    End Function

Formatting Dates and Currency

You can actually change the format in a bound field by editing the DataFormatString property. Or you can change the field to a template field and change from Bind to Eval and add the format argument as shown.

    <asp:Label ID="pageContentLabel" runat="server" 
                Text='<%# Bind("publishDate")%>' />

to

    <asp:Label ID="publishDateLabel" runat="server" 
                Text='<%# Eval("publishDate", "{0:d}")%>' />