Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to sort items of Bulleted List control using jQuery in ASP.NET

Author: Rachel Nicole

In this article, I will show another feature of jQuery that you can use in your application. How we can sort BulletedList items in ascending or descending order is the purpose of this article.

 

 

There are many ways to sort items of BulletedList. You can use JavaScript code or jQuery plug-in to sort items and you can also write a function in ASP.NET to sort your bulleted list items but jQuery has the built in easier, better and faster solution for this problem. You can change items to an array, sort these items and later you can put these items back to list in sorted form.
 
Let’s use jQuery to sort items in BulletedList.
 
  1. Open Visual Studio 2010
  2. File > New > Web Site
  3. Visual Basic or Visual C#  > ASP.NET Empty Web Site
  4. Right click on web site > Add New Item > Web Form
  5. Right click on website > New Folder (Name the folder as “Scripts”). Download jQuery and include this file in this folder.

    Jquery-1.4.1.min.js
     
  6. Add a <script> tag in between <head> tag of Default.aspx page. You have to give reference for jQuery as below.

    <head runat="server">
        <title>Sort BulletedList Items using jQuery</title>
        <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>    
    </head>
     
  7.  Write code below in Default.aspx page in between <form> tag

    div><asp:BulletedList ID="BulletedList1" runat="server" cssClass="bullet">
         <asp:ListItem>Michael Suyama</asp:ListItem>
         <asp:ListItem>Steven Buchanan</asp:ListItem>
         <asp:ListItem>Anne Dodsworth</asp:ListItem>
         <asp:ListItem>Andrew Fuller</asp:ListItem>
         <asp:ListItem>Janet Leverling</asp:ListItem>
    </asp:BulletedList>
    <asp:Button ID="Button1" runat="server" Text="Sort in Ascending Order" />
    <asp:Button ID="Button2" runat="server" Text="Sort in Decending Order" />
 
Add a BulletedList control and two buttons in your aspx page. Now add items to BulletedList control as above.
 
  • Add another  <script>  tag in between <body> tag and write code below in it.

    <script type="text/javascript">
            $(function () {
                $("input[id$=Button1]").click(function (a) {
                    a.preventDefault();
                    var bulletedList = $.makeArray($('.bullet li'))
                    .sort(function (a, b) {
                        var aText = $(a).text();
                        var bText = $(b).text();
                        return (aText < bText) ? -1 : 1;
                    });
                    $('.bullet').html(bulletedList);
                });
            });
       </script>  
      
        <script type="text/javascript">
            $(function () {
                $("input[id$=Button2]").click(function (p) {
                    p.preventDefault();
                    var bulletedList = $.makeArray($('.bullet li'))
                    .sort(function (a, b) {
                        var aText = $(a).text();
                        var bText = $(b).text();
                        return (aText > bText) ? -1 : 1;
                    });
                    $('.bullet').html(bulletedList);
                });
            });
       </script>   


    I have written two identical functions, the only difference is in “sort” function. First you need to get the Button control. “makeArray()”  function will change the BulletedList items into an array. Then sort() function will sort all array items. At the end the sort BulletedList items are replaced by sorted array items using html() function.
     
  • The Entire default.aspx file will look like as under

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <!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>Sort BulletedList Items using jQuery</title>
        <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
     
        <script type="text/javascript">
            $(function () {
                $("input[id$=Button1]").click(function (a) {
                    a.preventDefault();
                    var bulletedList = $.makeArray($('.bullet li'))
                    .sort(function (a, b) {
                        var aText = $(a).text();
                        var bText = $(b).text();
                        return (aText < bText) ? -1 : 1;
                    });
                    $('.bullet').html(bulletedList);
                });
            });
       </script>  
      
        <script type="text/javascript">
            $(function () {
                $("input[id$=Button2]").click(function (p) {
                    p.preventDefault();
                    var bulletedList = $.makeArray($('.bullet li'))
                    .sort(function (a, b) {
                        var aText = $(a).text();
                        var bText = $(b).text();
                        return (aText > bText) ? -1 : 1;
                    });
                    $('.bullet').html(bulletedList);
                });
            });
       </script>  
        
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:BulletedList ID="BulletedList1" runat="server" cssClass="bullet">
                <asp:ListItem>Michael Suyama</asp:ListItem>
                <asp:ListItem>Steven Buchanan</asp:ListItem>
                <asp:ListItem>Anne Dodsworth</asp:ListItem>
       
                <asp:ListItem>Andrew Fuller</asp:ListItem>
                <asp:ListItem>Janet Leverling</asp:ListItem>
            </asp:BulletedList>
            <asp:Button ID="Button1" runat="server" Text="Sort in Ascending Order" />
            <asp:Button ID="Button2" runat="server" Text="Sort in Decending Order" />
        </div>
        </form>
    </body>
    </html>
     
  • Build website and see in browser. Click on Buttons to see BulletedList in ascending or descending order. 
  •  

       
    Add Article Comment:
    Name :
    Email Address :
       
    Comments :
     
       
    << How to update Database from DataSet in ASP.NET

    Disclaimer - Privacy
    © 2002-2017 DevASP.net