[Asp.net tour] -- ListView of data binding control

Source: Internet
Author: User

The previous blogs discussed data binding controls and added some instances to consolidate the code. For. NET-bound controls, each has its own advantages and disadvantages. If the functions are complete, it is ListView. Today we will discuss the usage of ListView.

Link to the data binding control article: [Asp.net tour] -- Repeater of data binding control
[Asp.net journey] -- DataList of data binding controls
[GDI + programming -- an article (1)] -- GridView programming skills

1. ListView for control binding


Before proceeding, let's discuss the features of Asp.net. For Asp.net, Microsoft has encapsulated a large number of controls for us. Drag the controls onto the page to use them for programming, it is also commendable that some well-encapsulated controls can be visually set and then can be directly developed and used, just as the ListView control is mentioned today.

The ListView control is the most powerful data binding control. It can be visually developed to add, delete, and modify basic data operations. It also supports sorting and paging, however, the paging effect must work with the DataPager control. This type of paging is very efficient for small data volumes, but it is very inefficient for large numbers.

Advantages: it supports adding, deleting, modifying, and sorting, inherits the paging function, and supports custom templates.
Disadvantage: it affects program performance, and the paging efficiency of large data volumes is low.


2. Control usage skills


ListView is. net encapsulated controls, which are from. framework 3.5 is integrated, and its operations can be fully implemented by designing the front-end code. It can complete the design through a visual design window and complete the development without writing the background code.

For the data source used in the following example, we use the SqlDataSource control to bind it. In this control, we add the add, delete, modify, and query statements, and specify the parameters used in the statements.

<! -- The method for adding parameters to SQL statements is the same as that for SQL statements, in addition, to obtain the primary key of a row, bind DataKeyNames to the control, and add the SelectedValue attribute to the control. --> <asp: sqlDataSource ID = "SqlDataSource1" runat = "server" ConnectionString = "<% $ ConnectionStrings: MyBlogConnectionString %>" DeleteCommand = "delete from match WHERE (id = @ id) "InsertCommand =" insert into match (name) VALUES (@ name) "SelectCommand =" SELECT match. * FROM match "UpdateCommand =" UPDATE match SET name = @ name where id = @ id "> <DeleteParameters> <asp: controlParameter ControlID = "ListView1" Name = "id" PropertyName = "SelectedValue"/> </DeleteParameters> <InsertParameters> <asp: parameter Name = "name"/> </InsertParameters> <UpdateParameters> <asp: Parameter Name = "name"/> <asp: controlParameter ControlID = "ListView1" Name = "id" PropertyName = "SelectedValue"/> </UpdateParameters> </asp: SqlDataSource>

Note: There are two methods to add, delete, and modify functions in ListView: one is to write the add, delete, and modify statements in SqlDataSource, and the other is the traditional method provided in the previous blog, write control in the background code. The following sample code is implemented using the first method. This method can directly implement addition, deletion, and modification without writing background code, and. NET encapsulates the specific implementation process.

The basic style of a table. CSS styles are used to control the style of a display table.

<style>        table {            border:solid 1px #cccccc;            width:250px;        }            table th {                color: #00FFFF;                background: #284775;                font-weight: normal;                padding: 2px;            }            table tr {                border:solid 1px black;            }            td {                border:groove 1px #ffd800;            }        </style>

1. Edit

The required controls are defined in the EditItemplate template in the same way as the DataList control during editing. When you click the edit button, the editing page is displayed. It must be noted that the LayoutTemplate is used in the following example. The content in the template should store user-defined content, that is, other display content than the control encapsulation function.

<Asp: ListView ID = "ListView1" runat = "server" DataMember = "DefaultView" DataSourceID = "SqlDataSource1"> <AlternatingItemTemplate> <tr style = "background-color: # cccccc; "> <td> <asp: button ID = "EditButton" runat = "server" CommandName = "Edit" Text = "Edit"/> </td> <asp: label ID = "idLabel" runat = "server" Text = '<% # Eval ("id") %>'/> </td> <asp: label ID = "nameLabel" runat = "server" Text = '<% # Eval ("name ") %> '/> </td> </tr> </AlternatingItemTemplate> <EditItemTemplate> <tr style = ""> <td> <asp: button ID = "UpdateButton" runat = "server" CommandName = "Update" Text = "Update"/> <asp: button ID = "CancelButton" runat = "server" CommandName = "Cancel" Text = "Cancel"/> </td> <asp: label ID = "idLabel1" runat = "server" Text = '<% # Eval ("id") %>'/> </td> <asp: textBox ID = "nameTextBox" runat = "server" Text = '<% # Bind ("name ") %> '/> </td> </tr> </EditItemTemplate> <ItemTemplate> <tr style = ""> <td> <asp: button ID = "EditButton" runat = "server" CommandName = "Edit" Text = "Edit"/> </td> <asp: label ID = "idLabel" runat = "server" Text = '<% # Eval ("id") %>'/> </td> <asp: label ID = "nameLabel" runat = "server" Text = '<% # Eval ("name ") %> '/> </td> </tr> </ItemTemplate> <LayoutTemplate> <table runat = "server" cellpadding = "0" cellspacing = "0"> <tr runat = "server"> <td runat = "server"> <table id = "itemPlaceholderContainer" runat = "server" border = "0" style = ""> <tr runat = "server" style = ""> <th runat = "server"> </th> <th runat = "server"> id </th> <th runat = "server"> name </th> </tr> <tr id = "itemPlaceholder" runat = "server"> </tr> </table> </td> </tr> <tr runat = "server"> <td runat = "server" style = ""> </td> </tr> </table> </LayoutTemplate> </asp: listView>

With the front-end code above, you can easily implement the editing function without writing background code, which is easy to develop. The Code is as follows:

2. Delete and insert

The deletion implementation is implemented by the DELETE command added to the Itemplate template. We need to reflect the primary key value of the control specified by the DatakeyNames attribute of the ListView control, in this way, the attribute @ id used in SqlDataSource takes effect.

<Asp: listView ID = "ListView1" runat = "server" DataMember = "DefaultView" performanceid = "sqlperformance1" DataKeyNames = "id" InsertItemPosition = "LastItem"> <AlternatingItemTemplate> <tr style =" "> <td> <asp: button ID = "DeleteButton" runat = "server" CommandName = "Delete" Text = "Delete"/> </td> <asp: label ID = "idLabel" runat = "server" Text = '<% # Eval ("id") %>'/> </td> <asp: label ID = "nameLabel" runat = "server" Text = '<% # Eval ("name ") %> '/> </td> </tr> </AlternatingItemTemplate> <InsertItemTemplate> <tr style = ""> <td> <asp: button ID = "InsertButton" runat = "server" CommandName = "Insert" Text = "Insert"/> <asp: button ID = "CancelButton" runat = "server" CommandName = "Cancel" Text = "clear"/> </td> <asp: textBox ID = "nameTextBox" runat = "server" Text = '<% # Bind ("name ") %> '/> </td> </tr> </InsertItemTemplate> <ItemTemplate> <tr style = ""> <td> <asp: button ID = "DeleteButton" runat = "server" CommandName = "Delete" Text = "Delete"/> </td> <asp: label ID = "idLabel" runat = "server" Text = '<% # Eval ("id") %>'/> </td> <asp: label ID = "nameLabel" runat = "server" Text = '<% # Eval ("name ") %> '/> </td> </tr> </ItemTemplate> <LayoutTemplate> <table runat = "server"> <tr runat = "server"> <td runat = "server"> <table id = "itemPlaceholderContainer" runat = "server" border = "0" style = ""> <tr runat = "server" style = ""> <th runat = "server"> </th> <th runat = "server"> id </th> <th runat = "server"> name </th> </tr> <tr runat = "server" id = "itemPlaceholder"> </tr> </table> </td> </tr> <tr runat = "server"> <td runat = "server" style = ""> </td> </tr> </table> </LayoutTemplate> </asp: listView>

Example:

3. Paging and sorting

Pagination is implemented by the DataPager control added to the LayoutTemplate template. Therefore, you can modify the DataPager attribute value to specify the displayed navigation style.
DataPager's Fields field is used to add paging labels. The NextPreviousPagerField controls the navigation of the buttons and displays the navigation buttons on the first page and the previous page by setting its properties, in addition, you can set NumericPagerField to specify page navigation.

<LayoutTemplate> <table runat = "server"> <tr runat = "server"> <td runat = "server"> <table id = "itemPlaceholderContainer" runat = "server" border = "0" style = ""> <tr runat = "server" style = ""> <th runat = "server"> id </th> <th runat = "server "> name </th> </tr> <tr runat =" server "id =" itemPlaceholder "> </tr> </table> </td> </tr> <tr runat = "server"> <td runat = "server" style = "background-color: #284775; "> <asp: DataPager ID = "DataPager1" runat = "server"> <Fields> <asp: NextPreviousPagerField ButtonType = "Button" ShowFirstPageButton = "True" ShowLastPageButton = "True"/> <asp: numericPagerField ButtonType = "Button" ButtonCount = "3"/> </Fields> </asp: DataPager> </td> </tr> </table> <! -- Sort events, which must be placed in the LayoutTemplate and the CommandName value is Sort, and the CommandArgument value is the name of the database field to be sorted --> <asp: button Text = "Sort by id" runat = "server" CommandName = "Sort" CommandArgument = "id"/> </LayoutTemplate>

In addition, the sorting is implemented by adding the asp.net control to the LayoutTemplate template. Set the CommandName = "Sort" control and assign the CommandArgument value to the name of the database field to be sorted, commandArgument = "id ".


4. Grouping

Grouping is also a major feature of the ListView control. When we use data as a subset to display data on the control, it is like displaying data in blocks. We divide some data into one block and the other into another, you can set GroupItemCount of the control to control the number of groups of data.


In addition, you need to add a PlaceHolder control whose ID is itemPlaceholder in the GroupTemplate template when grouping, and then add a PlaceHolder control whose ID is groupPlaceholder in the LayoutTemplate template, in this way, you can simply group data.

<asp:ListView ID="ListView1"  GroupItemCount="5" runat="server" DataSourceID="SqlDataSource1">    <GroupTemplate>        <tr>            <asp:PlaceHolder runat="server" ID="itemPlaceholder" />                            </tr>    </GroupTemplate>    <GroupSeparatorTemplate>        <tr id="Tr1" runat="server">            <td colspan="5">

Example chart After grouping:


Iii. Comparison and sublimation


The data binding controls have been discussed. Let's go back and continue to discuss several frequently used data binding controls.


The Repeater control is the most basic for data binding controls. It is favored by developers because it is the most primitive. For experienced programmers, Repeater is often used during development, because it is flexible and stable, it does not produce malicious code and is highly efficient.
Compared to several controls, we have to talk about the other. net platform, different development controls are encapsulated for developers of different levels. For cainiao developers, GridView and ListView should be their first choice, because the operation is simple, you only need a few buttons to select a few options to implement powerful functions. In addition, the old programmer is used to writing code, and the first choice is Repeater. Not many learners are recommended to use the Repeater control, because it has fewer functions and is flexible, and has more opportunities for learning.

Code example: ListViewDemo.


Conclusion


The basic usage of the control has been discussed. The discussion of each control has gone through two steps: basic and application. The application is the focus, and the control is mastered through the application. This is a good ing between learning, thinking, and practice. In addition, you are advised to read more MSDN, which contains detailed usage methods.








Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.