Shulou(Shulou.com)06/03 Report--

This article is about how to use TemplateField in DetailsView controls. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Introduction

Compared to BoundField, CheckBoxField, HyperLinkField, and other data field controls (data field controls), TemplateField provides a highly complex way to render data. In the previous section, we focused on using TemplateField in GridVIew to implement:

Displays multiple data fields in a column. For example, merge the FirstName and LastName fields and display them in a GridView column.

Use interactive Web controls to display data. We saw how to use a Calendar control to display the value of HiredDate.

Displays status information based on potential data. Although the Employees table does not contain a column of data about how long the employee has worked in the company, we can still use TemplateField and formatting methods to implement this function in GridView, as we did in the previous section.

As in GridView, DetailsView controls can use TemplateField in the same way. In this tutorial, we will use a DetailsView with two TemplateField to display product information one at a time. The first TemplateField will integrate data such as UnitPrice, UnitsInStock, and UnitsOnOrder and display it on a DetailsView line. The first TemplateField will display Discontinued data, but the formatting method will be used to display "YES" when there is a discount, otherwise "NO" will be displayed.

Figure 1: use two template columns to customize the display

All right, let's get started!

Step 1: bind data to DetailsView

As discussed in the previous section, the easiest way to use TemplateField is to create a DetailsView control that contains only BoundField, and then add a new TemplateField or convert some BoundField to TemplateField. Therefore, we first add a DetailsView control to the page through the designer and bind an ObjectDataSource that returns the product list to it. These operations create a DetailsView,BoundField with BoundField and CheckBoxField for non-Boolean values, while CheckBoxField is certainly used for Boolean values (such as "whether or not to discount").

Open the DetailsViewTemplateField.aspx page and drag a DetailsView from the toolbox onto the designer. Select and add a new ObjectDataSource control that calls the GetProducts () method of the ProductsBLL class from the smart tag (smart tag) of the DetailsView.

Figure 2: add a new ObjectDataSource control that calls the GetProducts () method

In this report, delete BoundField such as ProductID, SupplierID, CategoryID, and ReorderLevel. Then, adjust the order of the remaining BoundField so that CategoryName and SupplierName follow ProductName. Then set the HeaderText and formatting properties of each BoundField, don't be nervous, fill in whatever you want, as long as you feel good. As in GridView, you can modify the declaration code (declarative syntax) either through the field dialog box or directly. Translator's note: what should literal translation be? Declaration syntax? Anyway, it's the stuff in the HTML view) to edit these bound columns. Finally, clear the Height and Width properties of DetailsView so that it automatically expands based on the data you need to display, and then select the enable Enable Paging check box in the smart tag.

After making these changes, the declaration tag for your DetailsView control should look like this:

Again, let's take some time to see the effect in the browser. Now you can see a separate product (Chai) that includes lines that display its properties: name, category, supplier, inventory, order quantity, and its discount status.

Figure 3: using a set of binding columns to display product details

Step 2: combine unit price, inventory and order quantity in one column

DetailsView has a column for UnitPrice, UnitsInStock, and UnitsOnOrder. Through TemplateField, you can merge these three data into a row, you can add a new TemplateField, or you can convert any BoundField of UnitPrice, UnitsInStock or UnitsOnOrder directly into TemplateField. Although I personally like to convert existing BoundField to TemplateField, let's contact and add a new TemplateField here.

Click "Edit Field (Edit Fields)" in the pop-up menu of DetailsView's smart tag. In the pop-up field dialog box, add a new TemplateField and set its HeaderText property to "Price and Inventory", then move the new TemplateField to the top of the UnitPrice.

Figure 4: add a template column to the DetailsView control

Since the newly added TemplateField will display data from BoundField such as UnitPrice, UnitsInStock, and UnitsOnOrder, let's delete these BoundField first.

The last task of this step is to define the ItemTemplate of the TemplateField "Price and Inventory". You can do this either through the template editing interface of the DetailsView in the designer or by writing the declaration code by hand. Just like GridView, you can use the template editing interface by clicking "Edit Templates" in the pop-up menu of the smart tag. Here you can select the template you want to edit in the drop-down box and add any Web controls you like from the toolbox.

In this tutorial, you will first add a Label to the ItemTemplate of the "Price and Inventory" template column. Then, click Edit data binding (Edit DataBindings) on the smart tag of the Label control and bind its Text property to the UnitPrice field.

Figure 5: bind the Text property of Label to the UnitPrice field

Format the unit price as currency, and after doing this, the Label of the "Price and Inventory" template column shows only the unit price of the selected product. Figure 6 shows us what we have done so far.

Figure 6: the unit price and total amount template column shows the unit price

Note that the unit price of the product has not yet been formatted into currency format. If it is a BoundField, formatting can be achieved by setting the HtmlEncode property to false and the DataFormatString property to "{0:formatSpecifier}". In TemplateField, however, any formatting description must be specified in the data binding syntax or by using a formatting method written somewhere in the application, such as in the post-code class of the ASP.NET page.

To specify formatting in Label's data binding code, click "Edit data binding (Edit DataBindings)" in the Label smart tag, and then enter the formatting description directly or select a predefined format string in the format (Format) drop-down box in the pop-up data binding dialog box. Just like the DataFormatString property of BoundField, formatting is specified using {0:formatSpecifier}. In order to make the UnitPrice field in currency format, we can select an appropriate value in that drop-down box, or we can enter "{0virtual C}" directly.

Figure 7: formatting the unit price in monetary form

By the way, the formatting description is the second parameter of the Bind or Eval method. The setting you just added through the designer represents the following markup language: add the remaining data fields to the TemplateField

Now we have displayed and formatted the UnitPrice field in the "Price and Inventory" template column, but I also need to display the UnitsInStock and UnitsOnOrder. Let's show them in parentheses on the bottom line of the unit price. In the designer's template editor, these markup languages for display can be easily typed with the keyboard, of course, you need to position the cursor somewhere in the template. In addition, you can enter it directly in the declaration code.

Static markup languages, Label controls, and data binding code have been added, so the "Price and Inventory" template column can display unit price and total quantity information as follows:

Unit price (In Stock / On Order: inventory / order quantity)

After doing this, the declaration tag code for your DetailsView should look like this:

(In Stock / On Order: /)

After making these changes, we have uniformly displayed the unit price and total quantity information in a separate DetailsView line.

Figure 8: unit price and total quantity information are displayed on a separate line

Step 3: customize the information of the discount field

The Discontinued field of the Products table is a bit value that indicates whether a product is discounted. When a DetailsView (or GridView) is bound to a data source control, Boolean fields (such as Discontinued) are implemented as CheckBoxField, while non-Boolean fields (such as ProductID, ProductName, and so on) are implemented as BoundField. CheckBoxField is rendered as a disabled CheckBox, and CheckBox is selected if the value of the data is true, otherwise it is unchecked.

Rather than displaying a CheckBoxField, we may prefer to display it as a text to indicate whether the product has a discount. To do this, we can delete the CheckBoxField from DetailsView, add another BoundField, and set its DataField property to Discontinued. Well, take some time to finish it! After making this change, DetailsView displays a "True" for discounted products and a "False" for others.

Figure 9: the strings "True" and "False" are used to display the discount status

Think about it. Instead of using "True" or "False", we want "YES" and "NO". Such customization can be implemented by a TemplateField and a formatting method. The formatting method can accept several input parameters, but intelligently returns a HTML (of type string) for insertion into the template.

Add a formatting method called DisplayDiscontinuedAsYESorNO to the post-code class of the DetailsViewTemplateField.aspx page, which takes a Boolean value as an argument and returns a string. As discussed in the previous section, this method must be marked protected or public, otherwise it cannot be accessed from the template.

Protected string DisplayDiscontinuedAsYESorNO (bool discontinued) {if (discontinued) return "YES"; else return "NO";}

This method checks the input parameter (whether it is discounted) and returns "YES" if it is true, otherwise it returns "NO".

Note: recall from our previous section that the parameters passed to the formatting method may be null, so we need to check for null values before accessing the employee's HiredDate. Such a check is not needed here, because the Discontinued field will never be null. In addition, this is why this method accepts a Boolean value instead of a parameter of type ProductsRow or object.

Once the formatting method is complete, all that's left is to call it in TemplateField's ItemTemplate. To create this TemplateField, we can delete the Discontinued binding column and add a new TemplateField, or we can directly convert the Discontinued BoundField to TemplateField. Then, in the source view, edit the TemplateField to include an ItemTemplate that calls the DisplayDiscontinuedAsYESorNO method, and the parameter passed is the Discontinued property of the current ProductRow instance. This can be accessed through the Eval method. Now, the markup code for this TemplateField looks like this:

In this way, the DisplayDiscontinuedAsYESorNO method is called when the DetailsView is rendered, passing it the discontinued value of the ProductRow instance. Because the Eval method returns a value of type obejct, while the DisplayDiscontinuedAsYESorNO method accepts only Boolean parameters, we convert the return value of the Eval method to Boolean. Depending on the value received, the DisplayDiscontinuedAsYESorNO method will return "YES" or "NO", which is what is to be displayed in the DetailsView line.

Figure 10: "YES" or "NO" is now displayed in the discount line

Summary

In the DetailsView control, template columns can handle more complex data rendering than other column controls. Template columns are mainly used in such situations:

Multiple data columns need to be displayed in a DetailsView column

It is better to use a Web control to display data than a simple piece of text

The output of the page depends on the data bound to DetailsView, such as metadata or reformatting of the data

Although the template column can render DetailsView data with a high degree of complexity, the input of DetailsView is still a bit awkward because it displays each field as a line marked by HTML.

The FormView control provides a more complex output rendering. FormView does not contain any columns, it just includes a series of templates (ItemTemplate, EditItemTemplate, HeaderTemplate, and so on). In the next section, we'll see how to use FormView to render more controls.

Happy programming!

Thank you for reading! This is the end of this article on "how to use TemplateField in DetailsView controls". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.