Home > Backend Development > C#.Net Tutorial > 'ASP.NET' data binding—Repeater graphic and text explanation

'ASP.NET' data binding—Repeater graphic and text explanation

黄舟
Release: 2017-03-08 11:57:47
Original
2053 people have browsed it

I have learned HTML static web page programming and understood some of its syntax, but I felt that my mastery of Web programming was not satisfying enough, so I followed the plan and started my ASP.NET journey. Before writing this ASP.NET blog, I would like to first compare the differences and connections between ASP.NET and HTML.

## 1. Connections and differences: HTML is programmed on the client side and usually generates static web pages; ASP.NET is programmed on the server side and can usually generate dynamic web pages. The controls in ASP.NET are redesigned and encapsulated from the controls in HTML. That is to say, the controls in ASP.NET are based on the controls in HTML. ASP.NET control has a callback function, which can use ViewState to maintain the state of the control. HTML controls cannot. When the page operation is clicked, its state will be lost.

In the learning process of ASP.NET, the learning and use of its controls account for a large part. Today, I will talk about the Repeater control. Use the control, use it to bind background data, and then display it on the client (browser)!

2. Repeater control

1. Purpose: Use templates to display data in a loop.

2. Included templates:

             Project template (the data inside is displayed normally)

Staggered display template (the data bound inside is displayed staggered)Footer template (edit footer)

##​ Header template (edit header)

Separation Template (Insert intervals in the displayed data, such as horizontal lines, special symbols, etc.)

3. Example

An example I wrote using the ASP.NET Web Forms application of vs2012.

1. Content introduction

Select the information in the Person table in the database, and then use the Repeater control to display it on the client. The picture below is the information in the person table in my Sqlser database.

## Form, add the following code in the Page_Load event of the form.

     

protected void Page_Load(object sender, EventArgs e)
        {
            SqlConnection con = DB.createConnection();
            SqlDataAdapter sda = new SqlDataAdapter();
            string sql="select * from person ";
            sda.SelectCommand = new SqlCommand(sql, con);
            DataSet ds=new DataSet();
            sda.Fill(ds, "per");
            this.Repeater1.DataSource=ds.Tables["per"];
            Repeater1.DataBind();
        }
Copy after login



# 2: Use the template of the control Repeater < /ItemTemplate> Display the information, the code is as follows

<asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <p align="center">
                        <%# DataBinder.Eval(Container.DataItem,"pID") %>
                        <%# DataBinder.Eval(Container.DataItem,"personName") %>
                        <%# DataBinder.Eval(Container.DataItem,"personSex") %>
                    </p>
                </ItemTemplate>
            </asp:Repeater>
Copy after login

3: The display effect is as follows


## 4:Template usage (allowing data to cross display)

 <asp:Repeater ID="Repeater1" runat="server">
                <AlternatingItemTemplate>
                    <p align="center">
                        <font color="blue"> <%# DataBinder.Eval(Container.DataItem,"pID") %>
                        <%# DataBinder.Eval(Container.DataItem,"personName") %> 
                        <%# DataBinder.Eval(Container.DataItem,"personSex") %></font>
                    </p>
                </AlternatingItemTemplate>
            </asp:Repeater>
Copy after login


The display effect is as follows. The structure only displays columns 2, 4, 6, and 9. This is the so-called cross display.

## Finally, I used the five templates together. The front-end code is as follows

<asp:Repeater ID="Repeater1" runat="server">
                <HeaderTemplate>
                    <h3 align="center">页眉模板</h3>
                </HeaderTemplate>

                <ItemTemplate>
                    <p align="center">
                        <font color="blue"> <%# DataBinder.Eval(Container.DataItem,"pID") %>
                        <%# DataBinder.Eval(Container.DataItem,"personName") %> 
                        <%# DataBinder.Eval(Container.DataItem,"personSex") %></font>
                    </p>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <p align="center">
                        <font color="blue"> <%# DataBinder.Eval(Container.DataItem,"pID") %>
                        <%# DataBinder.Eval(Container.DataItem,"personName") %> 
                        <%# DataBinder.Eval(Container.DataItem,"personSex") %></font>
                    </p>
                </AlternatingItemTemplate>

                <SeparatorTemplate>
                    <hr color="red" size="1" />
                </SeparatorTemplate>

                <FooterTemplate>
                    <h3 align="center">页脚模板</h3>
                </FooterTemplate>

            </asp:Repeater>
Copy after login
The rendering is shown below


## This It is a method of using controls to display the information in the background database in the browser. In fact, not only the Repeater control, but also DataList, GridView, CheckBoxList, DropDownList, etc. can bind the information in the database and then display it in the browser. , I will introduce them one by one later, so stay tuned! !



The above is the detailed content of 'ASP.NET' data binding—Repeater graphic and text explanation. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template