打造自己的音乐网站（3）

开发自己的音乐网站（3）续2

下面我们来接着流行歌曲页面来进行深入的研究吧

首先们关心的是流行金曲的图标变化，因为我们从首页点击的时候，分为流行金曲，经典老歌，欧美经典等导航，但是到了具体每个页的时候，我们的图标应该有变化的就像上面所示图标变化成了所有的都应该有变化，才成为自然，更能引起人们的完美的心情，好了，我们看看是怎么实现的吧。其实我们就是在那里放入一段图片代码而已前台应该是这样的<table width="649" height="37" cellpadding="0" cellspacing="0">
              <tr>
                <td align="center">
                    <asp:Image ID="imgTb" width="640" height="27" border="0"  runat="server" />
                </td>
              </tr>
            </table>

而后台我们只不过在加载页面的时候，更换image的URL而已后代码是这样的

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //调用自定义bindGV方法,显示歌曲的详细信息
         bindGV();
            bindAudition();
        }  
        //根据歌曲类型显示图片
        string id = Request["id"].ToString();
        switch (id)
        {
            case "1": imgTb.ImageUrl = "~/images/lxjq.GIF"; break;
            case "2": imgTb.ImageUrl = "~/images/jdlg.GIF"; break;
            case "3": imgTb.ImageUrl = "~/images/omjd.GIF"; break;
            case "4": imgTb.ImageUrl = "~/images/xymy.GIF"; break;
        }  

    }

//我们根据首页点击超连接的时候，传送自定的id根据id我们放入根目录已做好的图片，这样我们的图片就会动起来了，这点我们平时应该要注意的小小技巧。

再看看试听或者下载是怎么实现的。

我们首从gridview说起吧，我们先设计gridvew的列项

下载与试听还有选择列我们都用了TemplateField列，其它显示列我们用BoundField列，全部的代码

<asp:GridView ID="gvMusic" runat="server" AutoGenerateColumns="False"
                            Width="645px" OnRowCommand="gvMusic_RowCommand" >
                                    <Columns>
                                        <asp:TemplateField HeaderText="选择">
                                            <ItemTemplate>
                                                <asp:CheckBox ID="CheckBox1" runat="server" />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:BoundField DataField="musicName" HeaderText="歌曲名称" />
                                        <asp:BoundField DataField="singerName" HeaderText="歌手" />
                                        <asp:BoundField DataField="specialName" HeaderText="专辑名称" />
                                        <asp:BoundField DataField="auditionSum" HeaderText="试听次数" />
                                        <asp:BoundField DataField="downSum" HeaderText="下载次数" />
                                        <asp:BoundField DataField="fileSize" HeaderText="文件大小" />
                                        <asp:TemplateField HeaderText="试听">
                                            <ItemTemplate>
                                                  <a   οnclick="window.open('playMusic.aspx?id=<%#Eval("id")%>','','width=380,height=260');" href="#" ><img border="0" src="images/shit.GIF" width="16" height="16" /></a>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="下载">
                                            <ItemTemplate>
                                                <asp:LinkButton ID="likbtnDown" runat="server" CommandName="down" Font-Underline="False" CommandArgument='<%# Eval("id") %>'><img border="0" src="images/xz.gif" width="16" height="16" /></asp:LinkButton>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                    <RowStyle CssClass="huise1" />
                                    <HeaderStyle CssClass="huise1" />

               </asp:GridView>

在上面的代码很可能犯的几个错，这也是初学者甚至很多程序员都会犯的问题，我们先一个一个的说吧，

TemplateField 列模版很灵活，我们可以尽情的发挥自己的想要的东西。在“选择”列我们是加入的CheckBox控件，而在asp:TemplateField HeaderText="试听"里面我们却可以加的是一个<a   οnclick="window.open('playMusic.aspx?id=<%#Eval("id")%>','','width=380,height=260');" href="#" ><img border="0" src="images/shit.GIF" width="16" height="16" /></a>
这样很表现的很灵活了，呵呵，不是吗？在这里我们不仅要绑定了一个事情，这样才可以打开试听音的界面，注意参数的绑定id，这个id就是我们数据数在后台里绑定对应的列，数据库里面一定要有此列，不然就会出错了。而真正的href="#" 我们却把它指向了自己，可以有刷新的作用。<img border="0" src="images/shit.GIF" width="16" height="16" />就是我们试听图标而已，这样这个图标就可以一个很美的超连接了，动起来了，呵呵。

/再看看下载的前台代码<ItemTemplate>
                                                <asp:LinkButton ID="likbtnDown" runat="server" CommandName="down" Font-Underline="False" CommandArgument='<%# Eval("id") %>'><img border="0" src="images/xz.gif" width="16" height="16" /></asp:LinkButton>
                                            </ItemTemplate>很有趣了，我们换了一个角度去看吧，我们并没有用试听的方式添加，当然用那种方法也是可以的。

我们在下载的时候，是用了同样的模板<ItemTemplate>，但是里面却入的是LinkButton控件，它本身就是一个超连接，呵呵，更简单了，不是吗？

但是这还没完，假如说我们在gridview里面放入了很多像LinkButton控件，我们在后台怎么知道是点了哪个LinkButton控件呢？所以我们得把它们区别开来，首先用CommandName="down" 来表示我们点的是下载超连接，而不是其它的了，在后台进行判断就行了，还有一个要说明的地方，我们还得把点击该下载的歌曲id传到下载界面，有两个原因，首先们得更新数据库下载次数，我们还得通过这个id进行在数据库的查询，这样才可以找出该歌曲的路径才可以下载下来呢，对吧，好了看下后台代码吧。

先绑定    protected void bindGV()
    {
        //创建SQL语句，该语句用来查询歌曲的详细信息
        string sqlSel = "select * from tb_musicInfo where musicType=" + Request["id"].ToString();
        //设置GridView控件的数据源
        gvMusic.DataSource = dataOperate.getRows(sqlSel);
        //设置GridView控件的主键
        gvMusic.DataKeyNames = new string[] { "id" };
        //绑定GridView控件
        gvMusic.DataBind();
    }
注意一定要 设置GridView控件的主键
你自己想想为什么吧？我解释过了，呵呵。

    //实现下载操作
    protected void gvMusic_RowCommand(object sender, GridViewCommandEventArgs e)
    {
    
        //判断是否为下载操作
       if (e.CommandName == "down")
        {
           //获取歌曲的id
            string id = e.CommandArgument.ToString();
           //创建SQL语句，查询歌曲的详细信息
            string sqlSel = "select musicPath from tb_musicInfo where id=" + id;         
            //创建SQL语句，更新歌曲的下载次数
            string sqlUpdate = "update tb_musicInfo set downSum=downSum+1 where id=" + id; ;
           //执行SQL语句
            dataOperate.execSql(sqlUpdate);
           //调用自定义downFile方法实现歌曲的下载操作
            downFile(dataOperate.getTier(sqlSel));

        }
    }

   protected void downFile(string musicPath)
    {
        string path = Server.MapPath("musicFile/") + musicPath;
        //初始化 FileInfo 类的实例，它作为文件路径的包装
        FileInfo fi = new FileInfo(path);
        //判断文件是否存在
        if (fi.Exists)
        {
            //将文件保存到本机上
            Response.Clear();
            Response.AddHeader("Content-Disposition", "attachment; filename=" + Server.UrlEncode(fi.Name));
            Response.AddHeader("Content-Length", fi.Length.ToString());
            Response.ContentType = "application/octet-stream";
            Response.Filter.Close();
            Response.WriteFile(fi.FullName);
            Response.End();
        }
    }

看到了吧，e.CommandName == "down")判断，    string id = e.CommandArgument.ToString()接受参数。很多人都在这点犯错，总结下吧，

1.没设commandname。2.CommandArgument.没有绑定参数,肯定会错的。

/再看看“选择”列是怎么样设计的。

这是全选与取消的代码

protected void imgBtnHaving_Click(object sender, ImageClickEventArgs e)
    {
        //判断GridView控件中的复选框状态
        if (isCheck(gvMusic))
        {
            //遍历GridView控件
            foreach (GridViewRow gvr in gvMusic.Rows)
            {
                //将GridView控件中的复选框设置为选中状态
                ((CheckBox)gvr.FindControl("CheckBox1")).Checked = false;
            }
        }
        else
        {
            //遍历GridView控件
            foreach (GridViewRow gvr in gvMusic.Rows)
            {
                //将GridView控件中的复选框设置为不选中状态
                ((CheckBox)gvr.FindControl("CheckBox1")).Checked = true;
            }
        }

    protected bool isCheck( GridView gv )
    {
        bool c = false;
        //遍历GridView控件
        foreach (GridViewRow gvr in gv.Rows)
        {
            //判断复选框状态是否选中
            if (((CheckBox)gvr.FindControl("CheckBox1")).Checked)
            {
                c = true;
                break;
            }
        }
        return c;
    }

很简单，我们首先定义一个方法参数就是gridview，再查出找每个checkbox的状态进行返回值.,这是全选择，只要有一个有选中，我们再点击的时候肯定意味着取消全选择。

好了，这样我们就实现了上面的要求了。

反选更简单了，选择的我们点击时变成不选择，不选择的点击时变成选择了。就是一个A=！A的问题一样而已，代码这样的。

  protected void imgBtnReverse_Click(object sender, ImageClickEventArgs e)
    {
        foreach (GridViewRow gvr in gvMusic.Rows)
        {
            ((CheckBox)gvr.FindControl("CheckBox1")).Checked = !((CheckBox)gvr.FindControl("CheckBox1")).Checked;
        }
    }

这样都解决了全选与反选的问题OK！呵呵。

还有一个试听按钮。更简单了，我们回忆下，试听就是一个超连接绑定了对应歌曲的id，我们只要把它导向播放的界面就行了，下面的“播放”选择的代码也比较简单，

我就在代码中说明吧代码如下

    protected void imgBtnSeries_Click(object sender, ImageClickEventArgs e)
    {
        int j = 0;
        if (isCheck(gvMusic))//这行代码说明，只要gridview里面有一个被选中了，我们就得把它找出来进行播放
        {
            string musicList = "";//我们定义这个变量进行把所有的歌曲都进行字格串连接起来，有多少连多少，中间中“，”隔开，后面的我们会在播放中进行拆开
            for (int i = 0; i < gvMusic.Rows.Count; i++)//好吧，我们既然知道有被选中的，所以我们得从头开始查找到每一项，呵呵
            {
                if (((CheckBox)gvMusic.Rows[i].FindControl("CheckBox1")).Checked)//开始找checkbox控件
                {
                    musicList += gvMusic.DataKeys[i].Value.ToString() + ",";//累加
                }
            }

            Response.Write("<script>window.open('playListMusic.aspx?id=" + musicList + "','','width=440,height=260')</script>");//导向播放页面
        }
        else
        {
            RegisterStartupScript("", "<script>alert('请选择需要播放的歌曲！')</script>");
        }
    }

好了，今天由于把自己的项目做完，才上来写这篇文章的，时间有点紧。不好意思呀，明天还得上班，明天会更精彩，

下节就是播放界面了，我分别想出了两个界面，一个是试听的界面，试听的时候，歌与词要同步有点麻烦哦。一个就是多歌播放的时候，有很多播放模式，有连续的，随机的等，下节都会给大家展示吧。好了就到这里面，祝工作顺心。

未完后续4