Hinauna,

Use jQuery Ajax to bind the ListView on ul click.

Create WebMethod that will be called using jQuery Ajax and bind the ListView on ul click on client side.

For bind listview using jquery ajax refer below link.

Bind ASP.Net ListView using jQuery AJAX

In this link ListView is binded on page load, you just need to bind it on ul click.

Hi nauna,

Check this example. Now please take its reference and correct your code.

HTML

<li><a class=" dropdown-toggle top-display" id="dropdownMenu4" href="#" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="true">Messages <span class="caret"></span></a>
    <ul class="dropdown-menu notifications" aria-labelledby="dropdownMenu4">
        <div class="notification-heading">
            <h4>
                Notifications <small class="pull-right">
                    <asp:ListView ID="lvCustomers" runat="server" GroupPlaceholderID="groupPlaceHolder1"
                        ItemPlaceholderID="itemPlaceHolder1">
                        <LayoutTemplate>
                            <table cellpadding="0" id="tblCustomers" cellspacing="0">
                                <tr>
                                    <th>
                                        CustomerId
                                    </th>
                                    <th>
                                        ContactName
                                    </th>
                                    <th>
                                        Country
                                    </th>
                                </tr>
                                <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
                            </table>
                        </LayoutTemplate>
                        <GroupTemplate>
                            <tr>
                                <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
                            </tr>
                        </GroupTemplate>
                        <ItemTemplate>
                            <td class="CustomerId">
                                <%# Eval("CustomerId") %>
                            </td>
                            <td class="ContactName">
                                <%# Eval("ContactName") %>
                            </td>
                            <td class="Country">
                                <%# Eval("Country") %>
                            </td>
                        </ItemTemplate>
                    </asp:ListView>
                </small>
            </h4>
        </div>
    </ul>
</li>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
    $(function () {
        $('li #dropdownMenu4').click(function () {
            $.ajax({
                type: "POST",
                url: "CS.aspx/GetCustomers",
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failuer: function (response) {
                    alert(resposnse.d);
                },
                error: function (response) {
                    alert(resposnse.responseText);
                }
            });
        });
    });

    function OnSuccess(response) {
        var customers = response.d;
        var row = $("[id*=tblCustomers] tr:last-child").clone(true);
        $("[id*=tblCustomers] tr").not($("[id*=tblCustomers] tr:first-child")).remove();
        $(customers).each(function () {
            var customer = $(this)[0];
            $(".CustomerId", row).html(customer.ContactName);
            $(".ContactName", row).html(customer.ContactName);
            $(".Country", row).html(customer.Country);
            $("[id*=tblCustomers]").append(row);
            $("td", row).eq(0).find("[id*=Label1]").html(customer.ContactName);
            $("[id*=tblCustomers]").append(row);
            row = $("[id*=tblCustomers] tr:last-child").clone(true);
            row1 = $("[id*=tbl1Customers] tr:last-child").clone(true);
        });
    }
</script>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindDummyRow();
    }
}
private void BindDummyRow()
{
    DataTable dummy = new DataTable();
    dummy.Columns.Add("CustomerId");
    dummy.Columns.Add("ContactName");
    dummy.Columns.Add("Country");
    dummy.Rows.Add();
    lvCustomers.DataSource = dummy;
    lvCustomers.DataBind();
}
[WebMethod]
public static List<Customer> GetCustomers()
{
    string constr = ConfigurationManager.ConnectionStrings["ConStr1"].ConnectionString;
    SqlConnection con = new SqlConnection(constr);

    SqlCommand cmd = new SqlCommand("GetCustomerDetailss");
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Connection = con;

    List<Customer> customers = new List<Customer>();
    con.Open();
    SqlDataReader sdr = cmd.ExecuteReader();

    while (sdr.Read())
    {
        customers.Add(new Customer
        {
            CustomerId = sdr["CustomerId"].ToString(),
            ContactName = sdr["ContactName"].ToString(),
            Country = sdr["Country"].ToString()
        });
    }

    con.Close();
    return customers;
}
public class Customer
{
    public string CustomerId { get; set; }
    public string ContactName { get; set; }
    public string Country { get; set; }
}

Screenshot