我的博客网站开发3——博客首页功能实现之各排行版(阅读数,评论数,推荐数)的数据绑定

实现气泡提示功能后,这更能对用户的体验有一定程度的提高。

接下来是对博客首页功能的左侧的排行版的实现。

为了学习,采取了两种方式,一种是js语言进行数据的绑定,另一种是使用asp.net的GridView控件绑定。

(1)Js方法

主要是通过循环语句逐个插入

Js代码:

 1         $(document).ready(function () {
 2 
 3             var MasterBlogReadSort; //博主博文阅读排名
 4             var MasterBlogReadSort_Count; //各博文的阅读次数
 5             var MasterBlogReadSort_Url; //各博文地址
 6 
 7             MasterBlogReadSort = "<%=GetTopMasterBlogReadSort() %>";
 8             MasterBlogReadSort_Count = "<%=GetTopMasterBlogReadSort_Count() %>";
 9             MasterBlogReadSort_Url = "<%=GetTopMasterBlogReadSort_Url() %>";
10 
11             var spilit_MasterBlogReadSort = MasterBlogReadSort.split(",");
12             var spilit_MasterBlogReadSort_Count = MasterBlogReadSort_Count.split(",");
13             var spilit_MasterBlogReadSort_Url = MasterBlogReadSort_Url.split(",");
14             for (var j = 0; j < spilit_MasterBlogReadSort.length; j++) {
15                 $("#articlesort").append("<div style='margin:5px auto auto 15px;'><a href='../BlogContent.aspx/" + "<%=getMasterId() %>" + "?id=" + spilit_MasterBlogReadSort_Url[j] + "' style=' color:#000000;'>" + spilit_MasterBlogReadSort[j] + "(" + spilit_MasterBlogReadSort_Count[j] + ")" + "</a></div>");
16             };
17         });

后台CS的C#代码:

View Code
 1 //博主博文阅读排名
 2         [WebMethod]
 3         public string GetTopMasterBlogReadSort()
 4         {
 5             string str = "";
 6             for (int i = 0; i < dt_MasterBlogReadSort.Rows.Count; i++)
 7             {
 8                 if (i == 0)
 9                 {
10                     str = dt_MasterBlogReadSort.Rows[i]["title"].ToString().Trim();
11                 }
12                 else
13                 {
14                     str = str + "," + dt_MasterBlogReadSort.Rows[i]["title"].ToString().Trim();
15                 }
16             }
17             return str;
18         }
19 
20         //各博文的阅读次数
21         [WebMethod]
22         public string GetTopMasterBlogReadSort_Count()
23         {
24             string str = "";
25             for (int i = 0; i < dt_MasterBlogReadSort.Rows.Count; i++)
26             {
27                 if (i == 0)
28                 {
29                     str = dt_MasterBlogReadSort.Rows[i]["essayClickCount"].ToString().Trim();
30                 }
31                 else
32                 {
33                     str = str + "," + dt_MasterBlogReadSort.Rows[i]["essayClickCount"].ToString().Trim();
34                 }
35             }
36             return str;
37         }
38 
39         //各博文的点击链接url
40         [WebMethod]
41         public string GetTopMasterBlogReadSort_Url()
42         {
43             string str = "";
44             for (int i = 0; i < dt_MasterBlogReadSort.Rows.Count; i++)
45             {
46                 if (i == 0)
47                 {
48                     str = dt_MasterBlogReadSort.Rows[i]["essayId"].ToString().Trim();
49                 }
50                 else
51                 {
52                     str = str + "," + dt_MasterBlogReadSort.Rows[i]["essayId"].ToString().Trim();
53                 }
54             }
55             return str;
56         }

(2)Asp.net控件GridView实现数据绑定:

以评论排行版为例,推荐排行版是一样的

Html代码:

 1  <asp:GridView ID="dgv_CommentSort" runat="server" AutoGenerateColumns="False" 
 2                 BorderStyle="None" GridLines="None" ShowHeader="False">
 3                 <Columns>
 4                     <asp:TemplateField>
 5                         <ItemTemplate>
 6                             <div style=" margin-bottom:20px;">
 7                                  <div style=" width:29px; background:url(../img/num.png); background-position:-5px 0px; background-repeat:no-repeat; text-align:center; float:left; color:#FFFFFF;">
 8                                  <%#Container.DataItemIndex+1 %>
 9                                  </div>
10                                  <div style="float:left;margin-left:5px; width:150px; overflow:hidden;">
11                                       <a href="../BlogContent.aspx/<%# DataBinder.Eval(Container.DataItem, "dengLuName") %>?id=<%# DataBinder.Eval(Container.DataItem, "essayId") %>" style=" color:#000000;"><%# DataBinder.Eval(Container.DataItem, "title") %>(<%# DataBinder.Eval(Container.DataItem, "ReplyCount")%>)</a>
12                                  </div>
13                             </div>
14                         </ItemTemplate>
15                     </asp:TemplateField>
16                 </Columns>
17             </asp:GridView>

后台CS代码主要实现对GridView控件进行数据的绑定

后台CS中的C#代码:

1             //查找博主博文评论排行
2             DataTable dt_MasterCommentSort = BLL.BLL_BlogMaster.Select_MasterCommentSort(BlogMasterId);
3             dgv_CommentSort.DataSource = dt_MasterCommentSort;
4             dgv_CommentSort.DataKeyNames = new string[] { "essayId" };
5             dgv_CommentSort.DataBind();

asp.net的服务器控件的确很方便,而且开发速度特别快;js纯手工编写代码加载数据,相对来说就相对慢,而且容易出错。但是封装好的控件还是有它的缺点的,这就要斟酌使用了。

 

 

posted @ 2012-05-06 20:24  Ghost Soar  阅读(...)  评论(... 编辑 收藏