我的博客网站开发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         }

博文的正文页显示完成。

 

posted @ 2012-05-06 21:33  Ghost Soar  阅读(363)  评论(0)  编辑  收藏  举报