帮助中心可以做成静态页面,然后链接上去。但是,考虑到网站的扩展性,把帮助中心做成动态的页面,以备以后可以在后台修改其内容。
1:在第一阶段,我们为新闻中心和商品专题做了Shop_news表,其实帮助中心也可以使用这个表,帮助中心的每一个子项都可以看成一篇已经做好的文章页面,在这个表中手工添加“type为帮助中心“的文章,title为帮助中心的一个个文章标题。这样,就可以在前台或者后台调用这些文章。
2:整合前台:建立helper.aspx页面,在主页中添加关于我们链接:
<td align="center">
<a href="helper.aspx?title=关于我们">关于我们</a>
</td>
aspx代码:
<table width="100%" border="0">
<tr>
<td align="left" valign="top">
<ul class="aboutus">
<asp:Repeater ID="rep" runat="server">
<ItemTemplate>
<li><a href='helper.aspx?title=<%#Eval("title") %>'><%#Eval("title") %></a></li>//循环显示出帮助中心子项
</ItemTemplate>
</asp:Repeater>
</ul>
</td>
</tr>
<tr>
<td class="aboutus_td" height="35" bgcolor="#CCCCCC">
帮助中心 :
<asp:Literal ID="litH1" runat="server"></asp:Literal>
</td>
</tr>
<tr>
<td style="text-align: left; padding: 10px;">
<asp:Literal ID="litBody" runat="server"></asp:Literal>
</td>
</tr>
</table>
cs代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace Web
{
public partial class aboutus : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//显示绑定标题列表
rep.DataSource = new MyShop.DAL.NewsDAO().GetList("type='帮助中心'");
rep.DataBind();
string title=Request.QueryString["title"];
if (string.IsNullOrEmpty(title))
{
title = "关于我们";
}
litH1.Text = title;
DataSet ds = new MyShop.DAL.NewsDAO().GetList("*","id","",1,1,"type='帮助中心' and title='"+title+"'");
if (ds.Tables.Count>0&&ds.Tables[0].Rows.Count>0)//如果表中的数据不为空,并且表中的第0行也存在
{
litBody.Text = ds.Tables[0].Rows[0]["body"].ToString();
}
}
}
}
}
3:整合后台:
新建后台页面helpChange.aspx
aspx代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
帮助中心修改<br />
<asp:DropDownList ID="ddltitle" runat="server" AutoPostBack="true"
onselectedindexchanged="ddltitle_SelectedIndexChanged">
</asp:DropDownList>
<br />
<asp:TextBox ID="txtbody" TextMode="MultiLine" runat="server" Height="237px" Width="571px"></asp:TextBox>
<br />
<asp:Button ID="btnSave" runat="server" Text="保存" οnclick="btnSave_Click" />
<asp:Literal ID="litmsg" runat="server"></asp:Literal>
</form>
</body>
</html>
在页面中使用下拉列表框,显示帮助中心的子项,下列表框的使用和Repeater控件的使用类似。
下拉列表框的使用:
1:双击下拉列表框,添加事件,并在下拉列表框的aspx代码中添加 AutoPostBack="true"属性,自动回发取得事件中的返回值
2:绑定显示字段和字段值,然后为下拉列表绑定数据源。
3:写事件代码。
在NewsDAO中,添加一个函数
//更新body字段,用于帮助中心
public void UpdateBody(string title, string body)
{
StringBuilder strSql = new StringBuilder();
strSql.Append("update Shop_news set body=@body where type='帮助中心' and title=@title");
Database db = DatabaseFactory.CreateDatabase();
DbCommand dbCommand = db.GetSqlStringCommand(strSql.ToString());
db.AddInParameter(dbCommand, "title", DbType.String, title);
db.AddInParameter(dbCommand, "body", DbType.AnsiString, body);
db.ExecuteNonQuery(dbCommand);
}
cs代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace Web.admin
{
public partial class helpChange : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//下拉列表框的使用
ddltitle.DataTextField = "title";//设置显示的是哪个字段
ddltitle.DataValueField = "title";//设置显示的是哪个字段的值
ddltitle.DataSource = new MyShop.DAL.NewsDAO().GetList("type='帮助中心'");
ddltitle.DataBind();
}
}
//下拉列表框选择事件
protected void ddltitle_SelectedIndexChanged(object sender, EventArgs e)
{
string title = ddltitle.SelectedValue;
DataSet ds = new MyShop.DAL.NewsDAO().GetList("*","id","",1,1,"type='帮助中心' and title='"+title+"'");
if (ds.Tables.Count>0&&ds.Tables[0].Rows.Count>0)
{
txtbody.Text = ds.Tables[0].Rows[0]["body"].ToString();
}
}
//保存事件
protected void btnSave_Click(object sender, EventArgs e)
{
string title = ddltitle.SelectedValue;
string body = txtbody.Text;
//在NewsDAO中,重新写一个UpdateBody函数(只需要把Update函数的内容复制过去修改一下就可以了)
new MyShop.DAL.NewsDAO().UpdateBody(title,body);
litmsg.Text = "<span style='color:blue'>保存成功</span>";
txtbody.Text = "";
}
}
}
但是此时,还有几个小问题:
第一,一旦保存成功,那么litmsg的值就是”保存成功“,此时我们在下拉列表框中选择其他子项,这个提示仍然存在。
第二,当进入整个helpChange.aspx页面时候,下拉列表框中已经显示了”关于我们“,而对应的下面的文本框中却是空空的,这个也要修改。
完善后的cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace Web.admin
{
public partial class helpChange : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//下拉列表框的使用
ddltitle.DataTextField = "title";//设置显示的是哪个字段
ddltitle.DataValueField = "title";//设置显示的是哪个字段的值
ddltitle.DataSource = new MyShop.DAL.NewsDAO().GetList("type='帮助中心'");
ddltitle.DataBind();
//刚刚进入页面的时候,下拉列表框中显示的是关于我们,对应地 ,下面的文本框中也要初始化,显示关于我们的内容
DataSet ds = new MyShop.DAL.NewsDAO().GetList("*", "id", "", 1, 1, "type='帮助中心' and title='" + ddltitle.SelectedValue + "'");
if (ds.Tables.Count > 0 && ds.Tables[0].Rows.Count > 0)
{
txtbody.Text = ds.Tables[0].Rows[0]["body"].ToString();
}
}
}
//下拉列表框选择事件
protected void ddltitle_SelectedIndexChanged(object sender, EventArgs e)
{
string title = ddltitle.SelectedValue;
DataSet ds = new MyShop.DAL.NewsDAO().GetList("*","id","",1,1,"type='帮助中心' and title='"+title+"'");
if (ds.Tables.Count>0&&ds.Tables[0].Rows.Count>0)
{
txtbody.Text = ds.Tables[0].Rows[0]["body"].ToString();
}
//点击下拉列表重新选择新的子项的时候,上一个保存完成而显示的提示应该消失
litmsg.Text = "";
}
//保存事件
protected void btnSave_Click(object sender, EventArgs e)
{
string title = ddltitle.SelectedValue;
string body = txtbody.Text;
//在NewsDAO中,重新写一个UpdateBody函数(只需要把Update函数的内容复制过去修改一下就可以了)
new MyShop.DAL.NewsDAO().UpdateBody(title,body);
litmsg.Text = "<span style='color:blue'>修改成功</span>";
txtbody.Text = "";
}
}
}
最后,文本框要做成在线编辑器:
1:最顶部一行代码中添加 ValidateRequest="false"属性
2:加入js代码。
<script src="../kindeditor/kindeditor.js" type="text/javascript"></script>
<script type="text/javascript">
KE.show({
id: 'txtbody',
items: [
'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',
'italic', 'underline', 'strikethrough', 'removeformat', '|', 'image',
'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink'
],
imageUploadJson: '/handler/upload_json.ashx'
});
</script>
最终完善的aspx代码:
<%@ Page Language="C#" ValidateRequest="false" AutoEventWireup="true" CodeBehind="helpChange.aspx.cs" Inherits="Web.admin.helpChange" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../kindeditor/kindeditor.js" type="text/javascript"></script>
<script type="text/javascript">
KE.show({
id: 'txtbody',
items: [
'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',
'italic', 'underline', 'strikethrough', 'removeformat', '|', 'image',
'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink'
],
imageUploadJson: '/handler/upload_json.ashx'
});
</script>
</head>
<body>
<form id="form1" runat="server">
帮助中心修改<br />
<asp:DropDownList ID="ddltitle" runat="server" AutoPostBack="true"
onselectedindexchanged="ddltitle_SelectedIndexChanged">
</asp:DropDownList>
<br />
<asp:TextBox ID="txtbody" TextMode="MultiLine" runat="server" Height="237px" Width="571px"></asp:TextBox>
<br />
<asp:Button ID="btnSave" runat="server" Text="保存" οnclick="btnSave_Click" />
<asp:Literal ID="litmsg" runat="server"></asp:Literal>
</form>
</body>
</html>