使用 jquery/jtemplate的高效通用页导航控件

分享于 

8分钟阅读

Web开发

  繁體
pager1.gif

介绍

我使用以下功能开发了这里页导航控件:

  • 它可以使用任何 ASP.NET 数据绑定控件,如 RepeaterGridView 等。
  • 它具有可扩展性,高效和友好的特性。
  • 它很容易实现&理解。

这是主要的想法

控件的数据库部分。 所有的技巧都在这里。 我使用 Repeater 控件作为数据绑定控件,我的寻呼机将在该控件上工作。 但是它可以在任何数据绑定控件上工作。 例如绑定这里repeater控件的查询输出如下所示:

pagerDB.gif

repeater控件每页显示 5条记录。 当前这个"number-of-records"在逻辑中被硬编码。 AddressID 字段是数字,是主键。 基本上,我只存储每个页面的第一个 AddressID,在客户端。

因此,对于 上面 查询,我将在客户机端保存以下开始 AddressID

AddressID = 859 (Page# 1)
AddressID = 15460 (Page# 2)
AddressID = 20017 (Page# 3)
AddressID = 25816 (Page# 4)
AddressID = 27652 (Page# 5)

现在,当一个next按钮改变页面索引时,单击或者通过dropdownlist选择更改--会在DB上触发一个查询,通过 AddressID的启动。 它从提供的AddressID 开始检索 5条记录。 下面是一个示例:

[WebMethod]publicstatic List<RepeaterData> getRepeaterData(int nStartAddressID)
{
 List<RepeaterData> _RepeaterData = new List<RepeaterData>();
 SqlDataReader reader = null;
 DataTable dt = new DataTable();
 using (SqlConnection conn = new SqlConnection())
 {
 conn.ConnectionString = ConfigurationManager.ConnectionStrings
 ["ConnStr2"].ConnectionString;
 using (SqlCommand cmd = new SqlCommand())
 {
 //Instead of Dynamic SQL, please use StoredProc for better design.//The SqlParameter will protect against any SQL injection //as well as the strong int data-type for the variable nStartAddressID. cmd.CommandText = "SELECT TOP (5) AddressID, AddressLine1, 
 City, PostalCode" +
 "FROM [AdventureWorks].[Person].[Address]" +
 "WHERE AddressLine1 like '105%'" +
 "and AddressID> = @AddressID" +
 "ORDER BY AddressID";
 cmd.Parameters.Add("@AddressID", SqlDbType.Int).Value = nStartAddressID;
 cmd.Connection = conn;
 StringBuilder sb = new StringBuilder();
 conn.Open();
 reader = cmd.ExecuteReader();
 dt.Load(reader);
 conn.Close();
 }
 }
 foreach (DataRow dr in dt.Rows)
 {
 RepeaterData lp = new RepeaterData();
 lp.AddressID = int.Parse(dr["AddressID"].ToString());
 lp.AddressLine1 = dr["AddressLine1"].ToString();
 lp.City = dr["City"].ToString();
 lp.PostalCode = dr["PostalCode"].ToString();
 _RepeaterData.Add(lp);
 }
 return _RepeaterData;
}

在本例中,我使用了动态 SQL,但是为了更好的设计,请尝试使用 StoredProc。 在这种情况下,SqlParameter 将保护任何 SQL注入。 请注意,变量 nStartAddressID 是一个 int,它再次保护各种注入攻击。

这里要注意的一点是第一个 PageLoad 上的--,我绑定 RepeaterDropdownlist,设置代码中的JavaScript变量。 加载页面后,所有操作都通过使用jTemplate的jQuery AJAX进行。 无回发。
由于中继器不会自己发出任何 HTML,因这里jTemplate在完成了AJAX调用后很容易替换 Repeater HTML。

第一个 PageLoad 中,我使用了一些不同的查询来获得第 5行。

SELECT ROW_NUMBER () OVER (ORDERBY AddressID) AS RowNumber, _
AddressID, AddressLine1, City, PostalCode FROM [AdventureWorks].[Person].[Address] where AddressLine1 _like'105%'ORDERBY AddressID; 

你可以在 SqlParameter 中使用 StoredProc 来防止注入攻击。 我只是想演示一下这个概念。

如你所见,我在 DataView &中获得了用于抓取第 5个记录的to。 但是,在任何后续的分页操作中,我使用了启动 AddressID 来获得相关 5个记录。 这就是我的意思。

客户端--中,对应起始 AddressID s的pagenumber &如何存储在初始 PageLoad 中。

var js1=[{"PagerNums":1,"AddressID":859},
{"PagerNums":2,"AddressID":15460},{"PagerNums":3,"AddressID":20017},
{"PagerNums":4,"AddressID":25816},{"PagerNums":5,"AddressID":27652}] 

正如你所看到的,我只需要跟踪哪个 mtf,页面当前是在。 因此,当单击 prev/下一个按钮或者更改下拉选择时,我将从 AddressID 提供 AddressID 作为AJAX数据库调用参数的当前页面号&中的起始。

function UpdatePrevNextClick() {
 $.ajax({
 type: "POST",
 url: "PagerRepeater4.aspx/getRepeaterData",
 data: "{ 'nStartAddressID': '" + CurAddrID + "' }",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (data) {
 $('#RptPager').setTemplateURL('JTemplates/PagerTemplate.htm');
 $('#RptPager').processTemplate(data.d);
 HidePrevNextButton();
 UpdateDDL();
 }
 });
}

分页操作主要取决于当前页号,即数据绑定控件。 分页--有 3个触发器即--下一步按钮单击,上一步按钮单击或者从dropdownlist选择页码。

当用户从控件中选择任何页码时,让我们查看详细信息。

页导航中的dropdownlist包含所有唯一的页码。
所以当用户选择任何想要的页码时,我将从存储在客户端的JS array 中找到相应的start- AddressID

下面是该代码的代码:

<script type="text/javascript">
 var Totalpages = 0;
 $(document).ready(function () {
 var dropDownList1 = $('select[id$=ddl1]');
 Totalpages = dropDownList1[0].length;
 $('.b1').html(dropDownList1[0].length);
 HidePrevNextButton();
 dropDownList1.change(function (e) {
 CurPageNum = this.value;
 CurAddrID = js1[CurPageNum-1].AddressID;
 UpdatePrevNextClick();
 });
 });
 </script>

一旦获得起始地址 ID,我就通过 jQuery AJAX异步地触发查询,作为状态 上面。 刷新页面相关部分时,总是检查是否需要显示/隐藏上一个按钮。 当第一个页面被加载时,Prev按钮被隐藏,并且当最后一个页面被隐藏时。

这就是一切,感谢阅读。

历史记录

  • 2011-05-05: 版本 1

控制  generic  Pager  
相关文章