Use TemplateField to display the last name and name in a column

Now, the names and surnames of each employee are displayed separately in the two columns. It may be a good idea to put them in a column. To do this, we need to use TemplateField. We can add a new TemplateField, add some required Markup Language and data binding code to it, and then delete the original BoundField FirstName and LastName. Of course, we can also directly convert the BoundField FirstName into a TemplateField, edit it to add the value of LastName, and then delete the BoundField LastName.

Either method works, but I personally prefer direct conversion, because this method can automatically add ItemTemplate and EditItemTemplate containing the Web Control and corresponding data binding code, they can be used to simulate the rendering and functions of a BoundField. The benefits of doing so are naturally self-evident, because the conversion process has already helped us to do a lot of things, so of course we can save a lot of time.

To convert a BoundField to a TemplateField, click Edit Columns in the intelligent label pop-up menu of the GridView ). Select the BoundField to be converted from the list in the lower-left corner of the dialog box, and click "Convert this column to template column" Convert this field into a TemplateField in the lower-right corner.

 

TemplateField: in the field dialog box, convert a binding column into a template column.

Let's continue to convert the BoundField FirstName to the TemplateField. After this change, there is no obvious difference in the designer. This is because when BoundField is converted to TemplateField, A TemplateField is created to maintain the appearance and feeling of the previous BoundField. Although there are no visual changes in the designer, the conversion process has already included BoundField declaration code -- <asp: boundField DataField = "FirstName" HeaderText = "FirstName" SortExpression = "FirstName"/> -- changed the declaration code of TemplateField as follows:

 
 

  
  
< asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">  
  
  
    < EditItemTemplate>  
  
  
        < asp:TextBox ID="TextBox1" runat="server" Text='< %# Bind("FirstName") %>'>< /asp:TextBox>  
  
  
    < /EditItemTemplate>  
  
  
    < ItemTemplate>  
  
  
        < asp:Label ID="Label1" runat="server" Text='< %# Bind("FirstName") %>'>< /asp:Label>  
  
  
    < /ItemTemplate>  
  
  
< /asp:TemplateField> 
 
 

As you can see, TemplateField is composed of two templates-An ItemTemplate, which has a Label control, and its Text attribute is set to the value of the FirstName data field. There is also an EditItemTemplate, it has a TextBix control, and its Text attribute is also set to the value of the FirstName data field. Data Binding Syntax --

<% # Bind ("fieldName") %> -- indicates that the data field fieldName is bound to the attributes of this specific Web control.

To add LastName to TemplateField, we need to add a Label Control for ItemTemplate and bind its Text attribute to LastName. This can be done either through the designer or by writing code manually. To manually write the code, simply add the corresponding declaration code to the ItemTemplate, as shown below:

 
 

  
  
< asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">  
  
  
    < EditItemTemplate>  
  
  
        < asp:TextBox ID="TextBox1" runat="server" Text='< %# Bind("FirstName") %>'>< /asp:TextBox>  
  
  
     < /EditItemTemplate>  
  
  
     < ItemTemplate>  
  
  
         < asp:Label ID="Label1" runat="server" Text='< %# Bind("FirstName") %>'>< /asp:Label>  
  
  
         < asp:Label ID="Label2" runat="server" Text='< %# Bind("LastName") %>'>< /asp:Label>  
  
  
     < /ItemTemplate>  
  
  
 < /asp:TemplateField> 
 
 

If you want to add it through the designer, click "Edit column" Edit Templates in the pop-up menu of the intelligent label of the GridView ). The template editing page of The GridView is displayed. In this interface, the smart tag is the template list in the GridView. At this time, we only have one TemplateField, so the drop-down list only contains various FirstName templates, EmptyDataTemplate and PagerTemplate. If the EmptyDataTemplate template is specified, it will be used for output rendering when no record is found in the data source bound to the GridView; If PagerTemplate is specified, it will be used to display the pagination interface of the GridView.

 

TemplateField: The template column of the GridView can be edited by the designer.

To display the LastName in the FirstName template column at the same time, drag a Label from the toolbox to the ItemTemplate in the FirstName template column. Of course, this is only available on the template editing interface of the GridView, as shown in:

 

TemplateField: Add a Label to the ItemTemplate in the FirstName template Column

Now, the Text attribute of the Label control added to the TemplateField is still "Label ". We need to modify this attribute to bind it to the LastName field of the data source. You can click "Edit data binding" Edit DataBindings "on the Smart tag of the Label control, as shown in:

 

TemplateField: select the Edit DataBindings option from the smart Label of the Label.

In the pop-up data binding dialog box, you can select the attribute to be bound in the list on the left, and select a data field in the lower box on the right. Now, select the Text attribute on the left, select the LastName field on the right, and click OK.

 

TemplateField: bind the Text attribute to the LastName field.

Note: The data binding dialog box allows you to declare a two-way data binding. If the check box "tw" Two-way databinding) is not selected, the data binding code will be <% # Eval (" LastName ") %> instead of <% # Bind ("LastName") %>. However, for this tutorial, the effects of both methods are OK. Bidirectional data binding is important when data is inserted and edited. However, the two methods are the same if data is simply displayed. We will discuss in detail two-way Data Binding in future chapters.

Let's take a moment to look at this page in the browser. As you can see, the GridView still contains four columns. However, the FirstName column shows the data of last name and first name.

 

TemplateField: The last name and name are displayed in the same column.

To complete this step, first Delete the binding column LastName and change the header text HeaderText of the column of the template column FirstName to "Name ". After that, the declaration code of the GridView will be as follows:

 
 

  
  
< asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"   
  
  
DataKeyNames="EmployeeID" 
  
  
     DataSourceID="ObjectDataSource1">  
  
  
     < Columns>  
  
  
         < asp:TemplateField HeaderText="Name" SortExpression="FirstName">  
  
  
             < EditItemTemplate>  
  
  
                 < asp:TextBox ID="TextBox1" runat="server" Text='< %# Bind("FirstName") %>'>  
  
  
< /asp:TextBox>  
  
  
             < /EditItemTemplate>  
  
  
             < ItemTemplate>  
  
  
                 < asp:Label ID="Label1" runat="server" Text='< %# Bind("FirstName") %>'>< /asp:Label>  
  
  
                < asp:Label ID="Label2" runat="server" Text='< %# Eval("LastName") %>'>< /asp:Label>  
  
  
            < /ItemTemplate>  
  
  
        < /asp:TemplateField>  
  
  
        < asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />  
  
  
        < asp:BoundField DataField="HireDate" HeaderText="HireDate" SortExpression="HireDate" />  
  
  
    < /Columns>  
  
  
< /asp:GridView> 
 
 

 

TemplateField: The names and surnames of each employee are displayed in the same column.

1. Use ASP. NET DetailsView to display details
2. Familiar with the use of DropDownList and ObjectDataSource
3. ASP. NET DropDownList creation and filling
4. Use the GridView and ObjectDataSource in ASP. NET
5. Example of ASP. NET DropDownList