我的博客网站开发5——博文正文页

为实现页面间的统一性和开发时代码的工作量，我们将页面相同的布局做成母版页，变化的内容在内容页进行变化。如下图：

这样，我们在写博文的显示全文页面时，我们只需在新增页面引用母版页就可实现，页面相同页面的内容的统一性。

我们在点击阅读博文的全文的链接后，跳转到全文显示的页面BlogContent.aspx。

在该页面下，除母版页的内容外，内容页中有博文的全文、评论、评论的编辑器。

博文的全文显示和评论的内容只是简单的数据绑定

Html代码：

 1 <div id="blogEssayTitle">

 2 <%=gettitle()%>

 3 </div>

 4 <div id="blogEssayContent">

 5 <%=getcontent()%>

 6 </div>

 7 

 8 <div>

 9 <div style=" text-align:left; font-weight:bold; font-size:16px;">评论</div>

10 

11     <asp:GridView ID="gdv_BlogReply" runat="server" AutoGenerateColumns="False" 

12         BorderStyle="None">

13         <Columns>

14             <asp:TemplateField>

15                 <ItemTemplate>

16                     <div style=" margin-top:10px; width:650px;">

17                     <div style=" text-align:left; background:#D9F0FE;"><a href="#"><%# DataBinder.Eval(Container.DataItem, "name") %></a> 发表于：<%# DataBinder.Eval(Container.DataItem, "esssayReplyTime")%></div>

18                     <div style=" text-align:left; margin-top:5px; padding-left:15px;"><%# DataBinder.Eval(Container.DataItem, "essayReplyContent")%></div>

19                     <div style=" text-align:right;"><a href="#" style=" color:#FF0000;">支持(<%# DataBinder.Eval(Container.DataItem, "supportCount")%>)</a><a href="#">反对(<%# DataBinder.Eval(Container.DataItem, "againstCount")%>)</a></div>

20                     </div>

21                 </ItemTemplate>

22             </asp:TemplateField>

23         </Columns>

24     </asp:GridView>

25 </div>

C#代码：

 1  protected void Page_Load(object sender, EventArgs e)

 2         {

 3             //对博文的评论的相关处理

 4             DataTable dt_essayReply = BLL.BLL_BlogContent.Select_essayReply(essayId);

 5             this.gdv_BlogReply.DataSource = dt_essayReply;

 6             this.gdv_BlogReply.DataKeyNames = new string[] { "blogReplyId" };

 7             this.gdv_BlogReply.DataBind();

 8 

 9             this.btn_BlogReply.ServerClick += new EventHandler(btn_BlogReply_ServerClick);//为btn_BlogReply添加单击事件

10         }

11 

12 

13 

14         //获取显示博文的标题

15         public static string gettitle()

16         {

17             return dt.Rows[0]["title"].ToString().Trim();

18         }

19 

20         //获取显示博文的正文内容

21         public static string getcontent()

22         {

23             return dt.Rows[0]["essayContent"].ToString().Trim(); ;

24         }

还存在对编辑器的处理，由于博客的博文是对所有的用户开放的（即是游客和登录用户），但是当只是以游客的身份进入时，编辑器时不能显示，取代的是一段提示文字，如下：

当用户登录后即可看到编辑器，进行相关的评论操作。实现代码：

Html代码：

1 <div id="BlogReply" style=" text-align:left;">

2     <textarea id="txa_BlogReply" runat="server" style="" cols="40" rows="10"></textarea>

3     <input id="btn_BlogReply" type="button" value="提交评论" runat="server" />

4 </div>

5 <div id="div_unLogin" style=" text-align:left; font-weight:bold;">

6 注册用户登录后才能发表评论，请<a href="../LoginPage.aspx" style=" color:#FF0000;">登录</a>或 注册

7 </div>

通过js代码控制编辑器的显示与隐藏

Js代码：

 1 $(document).ready(function () {

 2     var sessionIsNull = "";

 3     var options = {

 4         type: "POST",

 5         url: "../BlogContent.aspx/sessionIsNull",

 6         data: "{}",

 7         contentType: "application/json;charset=urf-8",

 8         dataType: "json",

 9         success: function (response) {

10             sessionIsNull = response.d;

11             if (sessionIsNull == 1) {

12                 $("#BlogReply").hide();

13                 $("#div_unLogin").show();

14             }

15             else {

16                 $("#BlogReply").show();

17                 $("#div_unLogin").hide();

18             }

19         }

20     };

21     $.ajax(options);

22 

23 });

后台CS的C#代码：

 1         //通过判断session是否为空判断用户是否已经登录

 2         [WebMethod]

 3         public static string sessionIsNull()

 4         {

 5             if (SessionUserId == null)

 6             {

 7                 return "1";

 8             }

 9             else

10             {

11                 return "0";

12              }

13         }

博文的正文页显示完成。