开发自己的音乐网站(1)

()经典音乐网站的开发（一）

/首先展示下网站整体效果：

//首页:

流行歌曲:

经典老歌:

播放界面:

下载界面:

选择歌曲界面：

选择播放音乐播放模式界面：

下面是设计的详细步骤：

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

首页我们用母版页和内容页而成，

//上面的导航栏放在母版页里面，这样方便开发和设计的整体效果，其核心就是在表格里放入超连接

//代码：

首页 | 流行金曲 | 经典老歌 | 欧美经典 | 校园民谣 | 联系我们 | 编程词典网 | 明日图书网 | 明日科技主站 技术服务热线：0461-56565 传真：0461-25656 企业邮箱：[email protected] 公司地址：吉林省长春市亚泰广场C座 Copyright©www.mrbook.com All Rights Reserved!

内容页里面的GridView其设计就是在几个模板里面放入试听的图片加上超连接和复选框等，全部代码如下：asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

NavigateUrl="~/musicInfo.aspx?id=1">HyperLink HyperLink GridLines="None" ForeColor="#333333" Width="312px"> ','','width=380,height=260');" href="#"> ForeColor="#333333" GridLines="None" Width="312px"> ','','width=380,height=260');" href="#"> NavigateUrl="~/musicInfo.aspx?id=3">HyperLink HyperLink GridLines="None" ForeColor="#333333" Width="312px"> ','','width=380,height=260');" href="#"> CellPadding="4" ForeColor="#333333" GridLines="None"> ','','width=380,height=260');" href="#">

关键就是处理试听的时候要注意超连接写法因为后面要传递参数的。

再对内容页放入5个GridView进行绑定，

下面看看绑定的代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class index : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//调用自定义bindAudition方法，显示试听排行帮
bindAudition();
//调用自定义bindFashion方法，显示流行金曲
bindFashion();
//调用自定义bindOld方法，显示经典老歌
bindOld();
//调用自定义bindOccident方法，显示欧洲经典
bindOccident();
//调用自定义bindCampus方法，显示校园民谣
bindCampus();
}
}
//绑定GridView控件显示试听排行榜
protected void bindAudition()
{
string sqlSel = "select top 10 * from tb_musicInfo order by auditionSum desc";
gvAudition.DataSource = dataOperate.getRows(sqlSel);
gvAudition.DataKeyNames = new string[] { "id" };
gvAudition.DataBind();
}
//绑定GridView控件显示流行金曲
protected void bindFashion()
{
string sqlSel = "select top 7 * from tb_musicInfo where musicType=1 order by id desc ";
gvFashion.DataSource = dataOperate.getRows(sqlSel);
gvFashion.DataKeyNames = new string[] { "id" };
gvFashion.DataBind();
}
//绑定GridView控件显示经典老歌
protected void bindOld()
{
string sqlSel = "select top 7 * from tb_musicInfo where musicType=2 order by id desc ";
gvOld.DataSource = dataOperate.getRows(sqlSel);
gvOld.DataKeyNames = new string[] { "id" };
gvOld.DataBind();
}
//绑定GridView控件显示欧洲经典
protected void bindOccident()
{
string sqlSel = "select top 7 * from tb_musicInfo where musicType=3 order by id desc ";
gvOccident.DataSource = dataOperate.getRows(sqlSel);
gvOccident.DataKeyNames = new string[] { "id" };
gvOccident.DataBind();
}
//绑定GridView控件显示校园民谣
protected void bindCampus()
{
string selSel = "select top 7 * from tb_musicInfo where musicType=4 order by id desc ";
gvCampus.DataSource = dataOperate.getRows(selSel);
gvCampus.DataKeyNames = new string[] { "id" };
gvCampus.DataBind();

}

///在绑定前需要对gridview进的显示列进行自定义显示，设计方式如图所示
看上面图所示，我们就成功的定义了歌名列是绑定musicName数据列的，这个列就是我们在后台数据查询的数据库表列名称。

这样我们就绑定上了五个gridview,就像首页显示的那样。

/好了首页设计完成，后续