ASP.Net: List View Basic Example

 ASP.Net     sbo     Updated on Aug 25, 2013     VIKRAM     1272   

Introduction:

In this article i will explain how to use List View control in ASP.Net.

Description:

In previous articles i explained JQuery, Java Script, C#, and SQL Server articles. Now i will explain how to use List View control in ASP.Net.

Here i am bindind Employee's data to List View control.

Now drag and drop List View control from Data control

    <asp:ListView ID="ListView1" runat="server">
    </asp:ListView>

Now change the List View ID

    <asp:ListView ID="lvEmployee" runat="server">
    </asp:ListView>

add LayoutTemplate to ListView

            <LayoutTemplate>
                <table class="lamp" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <th>
                            S.No.
                        </th>
                        <th>
                            Employee Name
                        </th>
                        <th>
                            Email
                        </th>
                        <th>
                            Employee Code
                        </th>
                    </tr>
                    <tr id="itemplaceholder" runat="server">
                    </tr>
                </table>
            </LayoutTemplate>

In the above code if you see there is

<tr id="itemplaceholder" runat="server"> </tr>

This means data will be rendered here. All rows rendered here.

Now add ItemTemplate as shown below:

            <ItemTemplate>
                <tr>
                    <td>
                        <%# Container.DataItemIndex + 1%>
                    </td>
                    <td>
                        <%#Eval("EmployeeName")%>
                    </td>
                    <td>
                        <%#Eval("Email")%>
                    </td>
                    <td>
                        <%#Eval("EmployeeCode")%>
                    </td>
                </tr>
            </ItemTemplate>

Here Container.DataItemIndex + 1 will give serial number to each row. Initial number starts from Zero.So we are adding 1 to it.

Now we will bind the data to List View by using FillEmployees()

#region FillEmployees()

    /// <summary>
    /// Fill Employees data.
    /// </summary>

    private void FillEmployees()
    {
        try
        {
            string strConnection = @"Data Source = .; Initial Catalog = Test; Integrated Security= true;";
            SqlConnection con = new SqlConnection(strConnection);

            SqlCommand cmd = new SqlCommand();
            cmd.CommandText = "select * from Employee";
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;

            con.Open();
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            da.Fill(ds);

            lvEmployee.DataSource = ds.Tables[0];
            lvEmployee.DataBind();

            con.Close();

        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

    #endregion

Now call FillEmployees() method in Page_Load().

Full Source Code:

ListViewBasicDemo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListViewBasicDemo.aspx.cs"
    Inherits="ListViewBasicDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>List View Basic Example</title>
    <style type="text/css">
        * { font-family: Arial, sans-serif; font-size: 12px; }
        table.lamp { padding: 0px; border: 1px solid #d4d4d4; }
        table.lamp th { color: white; background-color: #666; padding: 10px; padding-left: 10px; }
        table.lamp td { padding: 4px; padding-left:10px; background-color: #ffffff; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Employee's Data:
    </div>
    <br />
    <div>
        <asp:ListView ID="lvEmployee" runat="server">
            <LayoutTemplate>
                <table class="lamp" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <th>
                            S.No.
                        </th>
                        <th>
                            Employee Name
                        </th>
                        <th>
                            Email
                        </th>
                        <th>
                            Employee Code
                        </th>
                    </tr>
                    <tr id="itemplaceholder" runat="server">
                    </tr>
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <%# Container.DataItemIndex + 1%>
                    </td>
                    <td>
                        <%#Eval("EmployeeName")%>
                    </td>
                    <td>
                        <%#Eval("Email")%>
                    </td>
                    <td>
                        <%#Eval("EmployeeCode")%>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:ListView>
    </div>
    </form>
</body>
</html>

ListViewBasicDemo.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Data;
using System.Data.SqlClient;

public partial class ListViewBasicDemo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        FillEmployees();
    }

    #region FillEmployees()

    /// <summary>
    /// Fill Employees data.
    /// </summary>

    private void FillEmployees()
    {
        try
        {
            string strConnection = @"Data Source = .; Initial Catalog = Test; Integrated Security= true;";
            SqlConnection con = new SqlConnection(strConnection);

            SqlCommand cmd = new SqlCommand();
            cmd.CommandText = "select * from Employee";
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;

            con.Open();
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            da.Fill(ds);

            lvEmployee.DataSource = ds.Tables[0];
            lvEmployee.DataBind();

            con.Close();

        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

    #endregion
}

Output:

Employees data.

 

 

  Related Articles
SQL Server: Variables
SQL Server: Differences between CHAR, NCHAR, VARCHAR and NVARCHAR
SQL Server: System Databases
SQL Server: Insert values into Identity Column
ASP.Net: ListView Basics - ItemEditing, ItemUpdating and ItemCanceling events
ASP.Net: List View Basics - Insert a new record from List View Footer (or) How to use InsertItemTemplate in ListView
JQuery: How to replace string in JQuery
Java Script: How to replace string in Java Script
C#: How to replace string in C#
SQL Server: How to replace string in SQL Server
  Recent Articles
SQL Server: Variables
SQL Server: Differences between CHAR, NCHAR, VARCHAR and NVARCHAR
SQL Server: System Databases
SQL Server: Insert values into Identity Column
ASP.Net: ListView Basics - ItemEditing, ItemUpdating and ItemCanceling events
ASP.Net: List View Basics - Insert a new record from List View Footer (or) How to use InsertItemTemplate in ListView
JQuery: How to replace string in JQuery
Java Script: How to replace string in Java Script
C#: How to replace string in C#
SQL Server: How to replace string in SQL Server