ASP.net 歌曲界面

一.说明

此文是小白在学习张晨光老师的视频教学<<Asp.Net WEB服务器编程技术>>中做的学习笔记,一些知识点也是跟着教程走的,大家也可以去老师的主页去学习,谢谢大家.

这一篇要练习的是,如下课程的代码:

二.增加歌曲界面(Musci_Main.aspx)

这里使用的是包含母版页的Web窗体

<%@ Page Title="" Language="C#" MasterPageFile="~/Musci_Menu.Master" AutoEventWireup="true" CodeBehind="Musci_Main.aspx.cs" Inherits="MyMusci.Musci_Main" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="container">
        <div class="row">
            <div class="col-8">
                <div class="col-3">
                    <img id="m_photo" src="img/music.png" runat="server" style="width:125px;height:125px" />
                </div>
            
                <div class="col">
                    歌曲:《<asp:Label ID="lblname" runat="server" Text=""></asp:Label>》<br />
                    歌手:<asp:Label ID="lblsinger" runat="server" Text=""></asp:Label><br />
                    分类:<asp:Label ID="lbltype" runat="server" Text=""></asp:Label><br />
                    <audio controls="controls" id="audio" autoplay="autoplay" runat="server"></audio>
                </div>
                <asp:Button CssClass="btn btn-primary" ID="Button1" runat="server" Text="歌曲简介" /><br />
                <asp:Label ID="lbldescrip" runat="server" Text=""></asp:Label><br />
            </div>
            <div class="col" style="border:1px solid #000000">
                热门歌曲
            </div>
        </div>
    </div>
</asp:Content>

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 MyMusci
{
    public partial class Musci_Main : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        	//这里读取get请求
            string id = Request["id"].ToString();
            //数据抓取
            string sql = string.Format(@"SELECT t1.*,t2.m_type mu_type FROM music t1 INNER JOIN music_type t2 ON t1.`m_type`=t2.`m_number` AND t1.m_id={0}", id);

            DataTable dt = ToolMysqlDate.executTable(sql);

            //将查询的值赋值给页面
            if (dt.Rows.Count > 0) {
                lblname.Text = dt.Rows[0]["m_name"].ToString();
                lblsinger.Text = dt.Rows[0]["m_singer"].ToString();
                lbltype.Text = dt.Rows[0]["mu_type"].ToString();

                m_photo.Src = dt.Rows[0]["m_photo"].ToString();
                audio.Src = dt.Rows[0]["m_mediafile"].ToString();
                lbldescrip.Text = dt.Rows[0]["m_description"].ToString();
            }
            
        }
    }
}

然后我们在main.aspx中歌曲的超链接里,修改如下代码:

<div style="background-color:gainsboro">
            <span class="text-center" style="font-size:30px;">歌曲推荐</span><br />
            <div class="tab-content row">
                <div id="home" class="container tab-pane active" style="align-content:center;"><br>
                    <asp:Repeater ID="Repeater5" runat="server">
                        <ItemTemplate>
                            <div class="col recommend">
                                <img src="<%# Eval("m_photo") %>"" style="width:125px;height:125px" />
                                <a href="Musci_Main.aspx?id=<%# Eval("m_id") %>">
                                   <p><%# Eval("ROWS") %><%# Eval("m_name") %></p><p><%# Eval("m_singer") %></p>
                                </a>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
                ........

三.效果

点击连接:

进入歌曲界面:

其中热门歌曲因时间有限,未作处理,后续再添加上去吧,其中的原理和main.aspx中的歌曲推荐类似