Bind ListView on Bootstrap DorpDown menu click using jQuery AJAX in ASP.Net

Last Reply 10 months ago By dharmendr

Posted 10 months ago

hello,

i have listview which is connected with database table. it works fine.

i have master page and on top of master page i have bootstrap menu and when user click on menu it shows listview.

the problem is listview is always in bind mode so when user is navigating the pages listview bind and takes time to load the page.

i want listview only bind when user clickon bootstrap menu to open it.

so flow should be

1. page with boostrap menu

2. inside menu a listview should be on unbind mode

3. when user click on menu a loading image dispaly 

4. then listview data show to user

so while navigating on other pages listview data should not load so it saves time of navigation.

<li>//dropdown menu is on master page and listview is also on master page. the problem
    is listview is always binding and takes time to load. i want listview only binds
    when user click on dropdown menu so while navigating to other page it does not time
    to bind every time. it should only bind when user click on dropdown menu to view
    it <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">//listview bind here
                    <asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound"
                        OnItemCommand="ListView1_ItemCommand">
                        <ItemTemplate>
                            <asp:Label ID="Label3" runat="server" Text='<%# Eval("chatid") %>' Visible="false"></asp:Label>
                            <div class="inbox">
                                <asp:LinkButton ID="LinkButton1" runat="server" CommandName="chat">
                                    <div>
                                        <h5 class="padding nomargin">
                                            <asp:Label ID="Label2" runat="server" Text='<%# Eval("displayname") %>'></asp:Label>
                                            <br>
                                            <small>&nbsp;
                                                <asp:Label ID="Label1" runat="server" Text='<%# Eval("insertdate") %>'></asp:Label>
                                            </small>
                                    </div>
                                    </h5>
                                    <hr class="nomargin">
                            </div>
                        </ItemTemplate>
                    </asp:ListView>
        //listview end here
    </ul>
</li>

binding of listview method is on page load event.

Pro probydisplay = new Pro();
ListView1.DataSource = probydisplay.selectallprobydisplayname(displayname);           
ListView1.DataBind();

 

Posted 10 months ago

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.


Posted 10 months ago

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