PagingBulletedListExtender Control in AJAX

Davin Martyn
12y
12.9k
0
0
100
Article

Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique use for interactive websites. With AJAX help we can develop web applications and retrieve small amounts of data from web servers. AJAX is a different type of technology.

JavaScript
XML
Asynchronous Call to the server

PagingBulletedListExtender control

The PagingBulletedExtender control with the ASP.NET BulletedList control provide client-side sorted paging. When we define a TargetControlID then pass the "BulletedList1" id and define all the related items or fields. When we define a number or character then use in the heading indices or the maximum number of items to display per index.

Properties

TargetControlID
ClientSort
IndexSize
MaxItemPerPage
Separator

Step 1 : Open Visual Studio 2010

Go to File->New->WebSite
Select ASP.NET WebSite

Step 2 : Go to Solution Explorer and right-click.

Select Add->New Item
Select WebForm
Default.aspx page open

Step 3 : Open Default.aspx page and click in [Design option].

Drag and drop a BulletedList and ScriptManager

Step 4 : Go to Default.aspx[Source] page and define the ListItem Tag inside the BulletedList control.

<asp:ListItem>

Code
<asp:BulletedList ID="BulletedList1" runat="server" BackColor="#CBAA9A">
        <asp:ListItem>C</asp:ListItem>
        <asp:ListItem>C++</asp:ListItem>
        <asp:ListItem>C#</asp:ListItem>
        <asp:ListItem>JAVA</asp:ListItem>
        <asp:ListItem>ASP.NET</asp:ListItem>
        <asp:ListItem>ADO.net</asp:ListItem>
        <asp:ListItem>vb.net</asp:ListItem>
        <asp:ListItem>sqlserver2005</asp:ListItem>
        <asp:ListItem>sqlserver2008</asp:ListItem>
        <asp:ListItem>sql</asp:ListItem>
        <asp:ListItem>pl\sql</asp:ListItem>
        <asp:ListItem>oracle9i</asp:ListItem>
        <asp:ListItem>oracle10g</asp:ListItem>
        </asp:BulletedList>

Step 5 : Now go to Toolbox option and drag PagingBulletedListExtender control.

my image5.jpg

Step 6 : Now in Default.aspx[Source] option register the PagingBulletedListExtender control using TagPrefix.

Syntax

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ddd" %>

Step 7 : Now we define all the PagingBulletedExtender control's properties.

Code

<ddd:PagingBulletedListExtender ID="PagingBulletedListExtender1" runat="server" TargetControlID="BulletedList1" Enabled="true">
</ddd:PagingBulletedListExtender>

Step 8 : Write some code in the Default.aspx[Source].

Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ddd" %>
<!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>My Ajax</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div style="background-color: #87E3F8">
        <ddd:PagingBulletedListExtender ID="PagingBulletedListExtender1" runat="server" TargetControlID="BulletedList1" Enabled="true">
        </ddd:PagingBulletedListExtender>
        <asp:BulletedList ID="BulletedList1" runat="server" BackColor="#CBAA9A">
        <asp:ListItem>C</asp:ListItem>
        <asp:ListItem>C++</asp:ListItem>
        <asp:ListItem>C#</asp:ListItem>
        <asp:ListItem>JAVA</asp:ListItem>
        <asp:ListItem>ASP.NET</asp:ListItem>
        <asp:ListItem>ADO.net</asp:ListItem>
        <asp:ListItem>vb.net</asp:ListItem>
        <asp:ListItem>sqlserver2005</asp:ListItem>
        <asp:ListItem>sqlserver2008</asp:ListItem>
        <asp:ListItem>sql</asp:ListItem>
        <asp:ListItem>pl\sql</asp:ListItem>
        <asp:ListItem>oracle9i</asp:ListItem>
        <asp:ListItem>oracle10g</asp:ListItem
        </asp:BulletedList>
      </div>
    </form>
</body>
</html>

Step 9 : Now run the application by pressing F5.

my image1.jpg

Step 10 : Now click on the "S"; then the following output will show.

Step 11 : When we define the PagingBulletedList control property indexsize the following will be the output:

Code
<ddd:PagingBulletedListExtender ID="PagingBulletedListExtender1" runat="server" TargetControlID="BulletedList1" Enabled="true" IndexSize="7">
</ddd:PagingBulletedListExtender>

Step 12 : Now run the application pressing F5; the following output will be show: