Ajax Slider for GridView Page

1.建立一個ASP.NET WEB項目

2.添一個頁面和建立一個資料類Customer,代碼如下:

namespace WebUI.AJAXSlider{    public class Customer    {        public string Name { set; get; }        public string Address { set; get; }        public string Phone { set; get; }        public int Age { set; get; }        public bool Sex { set; get; }    }}

2.為頁面添加ScriptManager,UpdatePanel兩個控制項,並把GridView控制項添加到UpdatePanel中,代碼如下:

<asp:ScriptManager ID="ScriptManager1" runat="server">        </asp:ScriptManager>        <asp:UpdatePanel ID="UpdatePanel1" runat="server">            <ContentTemplate>          <asp:GridView ID="MyGV" runat="server" AutoGenerateColumns="False" AllowPaging="true"            OnDataBound="MyGV_DataBound">                    <Columns>                        <asp:BoundField HeaderText="Name" DataField="Name" />                        <asp:BoundField HeaderText="Address" DataField="Address" />                        <asp:BoundField HeaderText="Sex" DataField="Sex" />                        <asp:BoundField HeaderText="Phone" DataField="Phone" />                        <asp:BoundField HeaderText="Age" DataField="Age" />                    </Columns>                  </asp:GridView>            </ContentTemplate>        </asp:UpdatePanel>

3.為GridView控制項添加

<PagerTemplate>      <asp:TextBox ID="TextBox1" runat="server" Text="<%#MyGV.PageIndex+1%>" AutoPostBack="true"       OnTextChanged="TextBox1_TextChanged"></asp:TextBox>   <cc1:SliderExtender ID="TextBox1_SliderExtender" runat="server" Enabled="True" Orientation="Horizontal"       TargetControlID="TextBox1">         cc1:SliderExtender>       <asp:Label ID="lblPage" runat="server"       Text='<%# "Page " + (MyGV.PageIndex + 1) + " of " + MyGV.PageCount %>' /> </PagerTemplate>

4.綁定資料:

protected void Page_Load(object sender, EventArgs e)       {           if (!IsPostBack)           {               LoadDate();           }       }       public void LoadDate()       {           MyGV.DataSource = list();           MyGV.DataBind();       }       public List<Customer> list()       {           List<Customer> list = new List<Customer>();           list.Add(new Customer           {               Name = "caodaiming",               Address = "四川",               Age = 23,               Sex = true,               Phone = "13259460884"           });           list.Add(new Customer           {               Name = "caodaiming",               Address = "四川",               Age = 23,               Sex = true,               Phone = "13259460884"           });           list.Add(new Customer           {               Name = "caodaiming",               Address = "四川",               Age = 23,               Sex = true,               Phone = "13259460884"           });           return list;       }

5.為文本添加Chanage事件,代碼如下:

protected void TextBox1_TextChanged(object sender, EventArgs e)       {           TextBox txtCurrentPage = sender as TextBox;           GridViewRow rowPager = MyGV.BottomPagerRow;           TextBox Slietext = rowPager.Cells[0].FindControl("TextBox1") as TextBox;           MyGV.PageIndex = Convert.ToInt32(Slietext.Text) - 1;       }

6.為GridView控制項添加Bound事件,代碼如下:

protected void MyGV_DataBound(object sender, EventArgs e)       {           GridViewRow rowPager = MyGV.BottomPagerRow;           SliderExtender Slider = rowPager.Cells[0].FindControl("TextBox1_SliderExtender") as SliderExtender;           Slider.Maximum = MyGV.PageCount;           Slider.Minimum = 1;           Slider.Steps = MyGV.PageCount;       }

7.運行結果如下:

完成,收工,這個程式還有一個小的問題,大家去發現,並修改吧