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

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

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

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

（1）Js方法：

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

Js代码：

        $(document).ready(function () {

            var MasterBlogReadSort; //博主博文阅读排名
            var MasterBlogReadSort_Count; //各博文的阅读次数
            var MasterBlogReadSort_Url; //各博文地址

            MasterBlogReadSort = "<%=GetTopMasterBlogReadSort() %>";
            MasterBlogReadSort_Count = "<%=GetTopMasterBlogReadSort_Count() %>";
            MasterBlogReadSort_Url = "<%=GetTopMasterBlogReadSort_Url() %>";

            var spilit_MasterBlogReadSort = MasterBlogReadSort.split(",");
            var spilit_MasterBlogReadSort_Count = MasterBlogReadSort_Count.split(",");
            var spilit_MasterBlogReadSort_Url = MasterBlogReadSort_Url.split(",");
            for (var j = 0; j < spilit_MasterBlogReadSort.length; j++) {
                $("#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>");
            };
        });

后台CS的C#代码：

//博主博文阅读排名
        [WebMethod]
        public string GetTopMasterBlogReadSort()
        {
            string str = "";
            for (int i = 0; i < dt_MasterBlogReadSort.Rows.Count; i++)
            {
                if (i == 0)
                {
                    str = dt_MasterBlogReadSort.Rows[i]["title"].ToString().Trim();
                }
                else
                {
                    str = str + "," + dt_MasterBlogReadSort.Rows[i]["title"].ToString().Trim();
                }
            }
            return str;
        }

        //各博文的阅读次数
        [WebMethod]
        public string GetTopMasterBlogReadSort_Count()
        {
            string str = "";
            for (int i = 0; i < dt_MasterBlogReadSort.Rows.Count; i++)
            {
                if (i == 0)
                {
                    str = dt_MasterBlogReadSort.Rows[i]["essayClickCount"].ToString().Trim();
                }
                else
                {
                    str = str + "," + dt_MasterBlogReadSort.Rows[i]["essayClickCount"].ToString().Trim();
                }
            }
            return str;
        }

        //各博文的点击链接url
        [WebMethod]
        public string GetTopMasterBlogReadSort_Url()
        {
            string str = "";
            for (int i = 0; i < dt_MasterBlogReadSort.Rows.Count; i++)
            {
                if (i == 0)
                {
                    str = dt_MasterBlogReadSort.Rows[i]["essayId"].ToString().Trim();
                }
                else
                {
                    str = str + "," + dt_MasterBlogReadSort.Rows[i]["essayId"].ToString().Trim();
                }
            }
            return str;
        }

（2）Asp.net控件GridView实现数据绑定：

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

Html代码：

 <asp:GridView ID="dgv_CommentSort" runat="server" AutoGenerateColumns="False" 
                BorderStyle="None" GridLines="None" ShowHeader="False">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <div style=" margin-bottom:20px;">
                                 <div style=" width:29px; background:url(../img/num.png); background-position:-5px 0px; background-repeat:no-repeat; text-align:center; float:left; color:#FFFFFF;">
                                 <%#Container.DataItemIndex+1 %>
                                 </div>
                                 <div style="float:left;margin-left:5px; width:150px; overflow:hidden;">
                                      <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>
                                 </div>
                            </div>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

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

后台CS中的C#代码：

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

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