Asp.net| Control
The GridView control is one of a series of data display controls that can be bound to the SqlDataSource control to dynamically generate a grid for the fields of the data records returned, and the GridView provides us with a variety of data-bound column types, such as BoundField The default data-bound column type is a simple data type that exhibits text data values.
Other types of data display text content alternating use, CheckBoxField check box display boolean data type, CommandField display a button, button type can be button General button, LinkButton Hyperlink button, ImageButton picture by button, and so on type, the GridView control also provides TemplateField, using templates. A template that can be customized for a data field, which can include a variety of static text, lable, textbox text boxes. In addition, there are various TemplateField templates that can be used to provide users with templates in different situations. For example, ItemTemplate display templates can be used to make display data, but EditItemTemplate edit templates can be used to make edits, HeaderTemplate custom header templates, FooterTemplate custom footer templates.
Today we're going to show you how to use TemplateField to set the appearance style of the GridView. The following example we use the GridView control to display the EmployeeID, LastName, and the Employees (employee table) under the Northwind database. Firtname, brthdote field, to list all employees, the employee's last name, first name (and the last name and name in the same grid) hire date, when we edit the data with the Calendar control display.
Create a new page, add a SqlDataSource control to the page in the design diagram to provide the data to be displayed for the GridView control, create a new connection, select local (Locals or.) from the data source configuration and use the SQL Servert mixed authentication mode, enter the user name, Password, select the database named Northwind and test the connection, save the connection string when the connection is successful, click Next button, select the Employees table in the Specify from table or view, select LastName, FirstName, Title in the Select column, HireDate and other fields. Click Advanced, select the Generate INSERT, UPDATE and DELETE statements and use optimistic concurrency check boxes, and then click Finish to complete the selection of the data.
Add the GridView control to the page, select SqlDataSource in the Convenience task panel, and then close the Convenience task panel. This creates a data-bound control. and set the AutoFormat for the GridView control. Save and run
The HTML code is as follows:
<%@ Page language= "C #" autoeventwireup= "true" codefile= "Default.aspx.cs" inherits= "_default"%>
! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled Page </title>
<body>
<form id= "Form1" runat= "Server"
<div>
<asp:sqldatasource id= "SqlDataSource1" runat= "Server" conflictdetection= "CompareAllValues"
connectionstring= "<%$ connectionstrings:northwindconnectionstring%>" deletecommand= "DELETE from [Employees] WHERE [ EmployeeID] = @original_EmployeeID and [LastName] = @original_LastName and [FirstName] = @original_FirstName and [Title] = @original_Title and [hiredate] = @original_HireDate "
insertcommand= INSERT into [Employees] ([LastName], [FirstName], [Title], [HireDate]) VALUES (@LastName, @FirstName, @ Title, @HireDate) "
oldvaluesparameterformatstring= "original_{0}" selectcommand= "SELECT [EmployeeID], [LastName], [FirstName], [Title], [HireDate] From [Employees] "
Updatecommand= "UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [Title] = @Title, [hiredate] = @Hi Redate WHERE [EmployeeID] = @original_EmployeeID and [LastName] = @original_LastName and [FirstName] = @original_FirstName and [Title] = @original_Title and [hiredate] = @original_HireDate ">
<DeleteParameters>
<asp:parameter name= "Original_employeeid" type= "Int32"
<asp:parameter name= "Original_lastname" type= "String"/>
<asp:parameter name= "original_FirstName" type= "String"/>
<asp:parameter name= "Original_title" type= "String"/>
<asp:parameter name= "Original_hiredate" type= "DateTime"
</DeleteParameters>
<UpdateParameters>
<asp:parameter name= "LastName" type= "String"/>
<asp:parameter name= "FirstName" type= "String"/>
<asp:parameter name= "Title" type= "String"/>
<asp:parameter name= "HireDate" type= "DateTime"
<asp:parameter name= "Original_employeeid" type= "Int32"
<asp:parameter name= "Original_lastname" type= "String"/>
<asp:parameter name= "original_FirstName" type= "String"/>
<asp:parameter name= "Original_title" type= "String"/>
<asp:parameter name= "Original_hiredate" type= "DateTime"
</UpdateParameters>
<InsertParameters>
<asp:parameter name= "LastName" type= "String"/>
<asp:parameter name= "FirstName" type= "String"/>
<asp:parameter name= "Title" type= "String"/>
<asp:parameter name= "HireDate" type= "DateTime"
</InsertParameters>
</asp:SqlDataSource>
</div>
<asp:gridview id= "GridView1" runat= "Server" autogeneratecolumns= "False" cellpadding= "4"
Datakeynames= "EmployeeID" datasourceid= "SqlDataSource1" forecolor= "#333333" gridlines= "None"
Width= "640px" >
<footerstyle backcolor= "#990000" font-bold= "True" forecolor= "white"/>
<Columns>
<asp:boundfield datafield= "EmployeeID" headertext= "EmployeeID" insertvisible= "False"
Readonly= "True" sortexpression= "EmployeeID"/>
<asp:boundfield datafield= "LastName" headertext= "LastName" sortexpression= "LastName"/>
<asp:boundfield datafield= "FirstName" headertext= "FirstName" sortexpression= "FirstName"/>
<asp:boundfield datafield= "title" headertext= "title" sortexpression= "title"
<asp:boundfield datafield= "HireDate" headertext= "HireDate" sortexpression= "HireDate"/>
</Columns>
<rowstyle backcolor= "#FFFBD6" forecolor= "#333333"/>
<selectedrowstyle backcolor= "#FFCC66" font-bold= "True" forecolor= "Navy"/>
<pagerstyle backcolor= "#FFCC66" forecolor= "#333333" horizontalalign= "Center"
<alternatingrowstyle backcolor= "White"/>
</asp:GridView>
</form>
</body>
Currently, the surname and name of each employee are displayed in different tables. We can also display both last name and first name in a table. Here we need to edit the template using TemplateField. We can add a new TemplateField, plus it needs the tag and syntax databinding, click on the formula bar to connect the GridView Smart tag, select Edit column Options. Select the secondary field in the lower-left corner of the BoundField property to the TemplateField option, and then click Convert to TemplateField.
At this point we did not find any change in Design view, and in fact TemplateField has set the EditItemTemplate edit time template and ItemTemplate custom template for the FirstName field by default, and replaced the original code
<asp:boundfield datafield= "FirstName" headertext= "FirstName" sortexpression= "FirstName"/> The new code is 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 divided into two templates-itemtemplate custom template with lable label display data field FirstName, EditItemTemplate edit-time template displays the data field FirstName with a TextBox text box. You can see that there are <% #bind ("fieldname")%> statements in all two templates that specify the data fields to bind, and the fields we bind to are FieldName.
You can enter the editing interface of the GridView template by clicking on the smart tag of the GridView template in Design view to select the edit touch version.
We want to display both the last name and the first name in a grid, and we just need to edit the ItemTemplate template, and then select a lable control from the Toolbox to add to the ItemTemplate templates editing interface.
After adding the lable label to the ItemTemplate template, the next thing we want to do is to bind the data field to it, click lable Smart Tag to select the Edit DataBindings option.
The DataBindings dialog box pops up. Here you can select the properties to bind and the data fields to bind, and in the bindable properties we select the Text property, and the field binds us to select the LastName field.
Note that there is a two-way data binding checkbox in the DataBindings dialog box that is used when data is inserted and edited, which we'll introduce later, we run this program, We can see that the LastName and FirstName two fields are also displayed in the FirstName column.
So we're done with this first step, and here's the HTML code for these changed GridView controls that we modified:
<asp:gridview id= "GridView1" runat= "Server" autogeneratecolumns= "False" cellpadding= "4"
Datakeynames= "EmployeeID" datasourceid= "SqlDataSource1" forecolor= "#333333" gridlines= "None"
Width= "640px" >
<footerstyle backcolor= "#990000" font-bold= "True" forecolor= "white"/>
<Columns>
<asp:boundfield datafield= "EmployeeID" headertext= "EmployeeID" insertvisible= "False"
Readonly= "True" sortexpression= "EmployeeID"/>
<asp:boundfield datafield= "LastName" headertext= "LastName" sortexpression= "LastName"/>
<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= ' <%# Eval ("LastName")%> ' width= ' 62px "> </asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:boundfield datafield= "title" headertext= "title" sortexpression= "title"
<asp:boundfield datafield= "HireDate" headertext= "HireDate" sortexpression= "HireDate"/>
</Columns>
<rowstyle backcolor= "#FFFBD6" forecolor= "#333333"/>
<selectedrowstyle backcolor= "#FFCC66" font-bold= "True" forecolor= "Navy"/>
<pagerstyle backcolor= "#FFCC66" forecolor= "#333333" horizontalalign= "Center"
<alternatingrowstyle backcolor= "White"/>
</asp:GridView>
The next thing we want to do is to display the employee hire date in the edit state with the Calendar control, click the smart tag in the edit Bar connection GridView, and select Edit column Options. Select the Hireddate field, Select the secondary field in the lower-left corner of the BoundField property to the TemplateField option, and then click Convert to TemplateField.
When we enter the editing touch again, click on the smart tag of the GridView, select Edit Template, TemplateField contains a ItemTemplate and EditItemTemplate label, Select the Hiredatetemplatefield edititemtemplatee option, remove the lable tag, select the Calendar control from the toolbox and place it on the EditItemTemplate Edit Template interface, and design the style of the Calendar control control.
We select the data fields to display for the Calendar control, select the SelectedDate property and the VisibleDate property for data binding in the Bindable property, and when we click the Edit button to modify the GridView data, In the Hireddate column is not a text box let's enter the date to be modified instead of a calendar control that can be used to select a date, which makes it easy for the user to modify the date and prevent the exception that is thrown by the field that the user entered is not a date.
Run the program.
So far, we've applied two templates: displaying two data fields in the same grid, editing the data without being a text box, entering edits, but a calendar control for date selection.
The HTML code for the GridView control is as follows:
<asp:gridview id= "GridView1" runat= "Server" autogeneratecolumns= "False" cellpadding= "4"
Datakeynames= "EmployeeID" datasourceid= "SqlDataSource1" forecolor= "#333333" gridlines= "None"
Width= "620px" autogenerateeditbutton= "True" >
<footerstyle backcolor= "#990000" font-bold= "True" forecolor= "white"/>
<Columns>
<asp:boundfield datafield= "EmployeeID" headertext= "EmployeeID" insertvisible= "False"
Readonly= "True" sortexpression= "EmployeeID"/>
<asp:boundfield datafield= "LastName" headertext= "LastName" sortexpression= "LastName"/>
<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= ' <%# Eval ("LastName")%> ' width= ' 62px "> </asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:boundfield datafield= "title" headertext= "title" sortexpression= "title"
<asp:templatefield headertext= "HireDate" sortexpression= "HireDate"
<EditItemTemplate>
<asp:calendar id= "Calendar1" runat= "Server" backcolor= "#FFFFCC" bordercolor= "#FFCC66"
Borderwidth= "1px" daynameformat= "shortest" font-names= "Verdana" font-size= "8pt"
Forecolor= "#663399" height= "200px" selecteddate= ' <%# Bind ("HireDate")%> ' showgridlines= ' True '
Visibledate= ' <%# Eval ("HireDate")%> ' width= "220px" >
<selecteddaystyle backcolor= "#CCCCFF" font-bold= "True"/"
<todaydaystyle backcolor= "#FFCC66" forecolor= "white"
<selectorstyle backcolor= "#FFCC66"/>
<othermonthdaystyle forecolor= "#CC9966"/>
<nextprevstyle font-size= "9pt" forecolor= "#FFFFCC"/>
<dayheaderstyle backcolor= "#FFCC66" font-bold= "True" height= "1px"/>
<titlestyle backcolor= "#990000" font-bold= "True" font-size= "9pt" forecolor= "#FFFFCC"/>
</asp:Calendar>
</EditItemTemplate>
<ItemTemplate>
<asp:label id= "Label3" runat= "server" text= ' <%# Eval ("HireDate")%> ' > </asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<rowstyle backcolor= "#FFFBD6" forecolor= "#333333"/>
<selectedrowstyle backcolor= "#FFCC66" font-bold= "True" forecolor= "Navy"/>
<pagerstyle backcolor= "#FFCC66" forecolor= "#333333" horizontalalign= "Center"
<alternatingrowstyle backcolor= "White"/>
</asp:GridView>
The application template in the GridView control has the flexibility to present the data, and we can set the unused templates according to different needs.
