ASP.net 主页模块

白露-

于 2022-02-24 22:54:54 发布

阅读量787

点赞数

分类专栏： asp.net web学习笔记文章标签： asp.net

本文链接：https://blog.csdn.net/m0_56227168/article/details/123122327

版权

asp.net web学习笔记专栏收录该内容

49 篇文章 14 订阅

订阅专栏

一.说明

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

这一篇要练习的是,如下课程的代码:
在这里插入图片描述

二.增加母版页(Musci_Menu.Master)

右击项目/添加/新建项:
在这里插入图片描述

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Musci_Menu.master.cs" Inherits="MyMusci.Musci_Menu" %>

<!DOCTYPE html>

<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <!--这里引用bootstrap5-->
    <link href="bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet" />
    <script src="bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
    <script src="js/jquery.js"></script>
    <!--下面控件是将子页面的js引用至项目-->
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <!--一些样式设置-->
    <style>
        .img {
            height:126px;
            width:126px;
        }
        /*导航栏渐变色*/
        .bg-linear {
            background:-webkit-linear-gradient(#ffffff,#63B8FF)
        }
        /*排行榜渐变色*/
        .Repeater {
            width:200px;
            padding:50px;
            margin:10px;
            display:inline-block;
            background: linear-gradient(to bottom right ,#1E90FF,#FFC0CB, #FF69B4);
            border-radius: 25px;
        }
        /*歌曲推荐每首歌的样式*/
        .recommend {
            display:inline-flex;
            width:400px;
        }
    </style>
    <script>
    	/*实现母版导航栏按钮点击的方法,只要传入他的ID即可*/
        btn_active = function (str) {
            $("ul").find("a").removeClass("active");
            $("#" + str).addClass("active");
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
        <div>
            <div class="container-fluid">
            	<!--导航栏-->
                <header class="d-flex justify-content-center py-3 bg-linear justify-content-lg-start">
                 <!--图片及音乐软件名称-->
                  <img alt="" src="img/music.png" style="width:50px;height:50px;margin-left:20px;margin-right:10px" /><span style="font-size:30px;color:#0a58ca;margin-right:150px;">薄雾音乐</span>
                  <ul class="nav nav-pills">
                    <li class="nav-item"><a href="main.aspx" class="nav-link" id="main" >发现音乐</a></li>
                    <li class="nav-item"><a href="#" class="nav-link ">我的主页</a></li>
                    <li class="nav-item"><a href="user_center.aspx" class="nav-link" id="center">个人中心</a></li>
                    <li class="nav-item"><a href="#" class="nav-link ">FAQs</a></li>
                    <li class="nav-item"><a href="#" class="nav-link ">About</a></li>
                  </ul>
                </header>
              </div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
            <!--固定在底部的栏位-->
            <div style="width:100%;background-color:#363636;color:white;text-align:center;position:fixed;bottom:0;">
                Copyright &copy;2021-2022 小白. 保留所有权利
            </div>
        </div>
    </form>
</body>
</html>

三.优化个人中心(user_center.aspx)

右击项目/添加/新建项:
在这里插入图片描述
然后选择我们刚刚创建的母版页:

然后我们将Home.aspx里的代码转移至user_center.aspx里:前端

<%@ Page Title="" Language="C#" MasterPageFile="~/Musci_Menu.Master" AutoEventWireup="true" CodeBehind="User_Center.aspx.cs" Inherits="MyMusci.User_Center" %>
<!--这里可独立于母版页放置一些js或css-->
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <!--此控件下放置内容-->
    <div class="container-fluid">
            <table class="table">
                <tbody>
                  <tr>
                    <td>账号</td>
                    <td><asp:Label ID="userId" runat="server"></asp:Label></td>
                    <td rowspan="3"><asp:Image ID="userPhoto" runat="server" CssClass="img" />
                        <br />
                        <asp:FileUpload ID="FileUpload1" runat="server" />
                        <asp:Button ID="btnUpload" runat="server" Text="上传" OnClick="btnUpload_Click" />
                    </td>
                  </tr>
                  <tr>
                    <td>昵称</td>
                    <td><asp:TextBox ID="userNetname" runat="server"></asp:TextBox></td>
                  </tr>
                  <tr>
                    <td>性别</td>
                    <td><asp:DropDownList ID="userSex" runat="server">
                            <asp:ListItem Value="true">男</asp:ListItem>
                            <asp:ListItem Value="false">女</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                  </tr>
                  <tr>
                    <td>签名</td>
                    <td><asp:TextBox ID="userSign" runat="server" Height="101px" TextMode="MultiLine"></asp:TextBox></td>
                  </tr>
                  <tr>
                    <td>年龄</td>
                    <td><asp:TextBox ID="userAge" runat="server"></asp:TextBox></td>
                  </tr>
                </tbody>
              </table>
            <asp:Button ID="sub_Btn" runat="server" Text="编辑" class="btn btn-primary" OnClick="sub_Btn_Click" />
        </div>
        <script>
            btn_active("center");
        </script>
</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.Collections;
using System.Data;
using Model;

namespace MyMusci
{
    public partial class User_Center : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //防止用户直接进入用户中心
            if (Session["userName"] == null)
            {
                Response.Redirect("login_new.aspx");
            }
            else
            {
                //将数据库中的值赋值于页面的控件中
                if (!IsPostBack)
                {
                    GetUser();
                }

            }
        }

        private void GetUser()
        {
        	//读取Session,从数据库中获取相应的数据
            string nameid = Session["userName"].ToString();
            string sql = "select * from user_all where user_Name=?userName";

            Hashtable ht = new Hashtable();
            ht.Add("userName", nameid);

            DataTable dt = ToolMysqlDate.executTable(sql, ht);

            userId.Text = nameid;
            userNetname.Text = dt.Rows[0]["u_nick"].ToString();
            
            //下拉列表选中FindByValue,则时要选中的value值
            //将数据库返回的BOOL值转换字符串后,再判断哪一项被选中
            userSex.Items.FindByValue(dt.Rows[0]["u_sex"].ToString() == "True" ? "true" : "false").Selected = true;

            userSign.Text = dt.Rows[0]["u_sign"].ToString();

            userAge.Text = dt.Rows[0]["u_age"].ToString();
            userPhoto.ImageUrl = dt.Rows[0]["u_photo"].ToString();
        }
		
		//上传图片按钮点击事件
        protected void btnUpload_Click(object sender, EventArgs e)
        {
            //判断是否有图片
            if (FileUpload1.HasFile)
            {
                //获取文件名
                string imgName = FileUpload1.FileName;
                //添加时间参数,可以规避掉图片重名问题
                imgName = DateTime.Now.ToString("yyyymmddhhmmss") + imgName;
                //图片上传的地址(路径)
                FileUpload1.SaveAs(Server.MapPath("\\user_img\\") + imgName);
                //显示到图片框上
                userPhoto.ImageUrl = "\\user_img\\" + imgName;
            }
            else
            {
                Response.Write("<script>alert('需要先选择图片,再上传')</script>");
            }
        }

		//编辑按钮提交事件
        protected void sub_Btn_Click(object sender, EventArgs e)
        {
            //修改数据库中的值
            string sql = "update user_all set " +
                "u_Nick=?u_Nick,u_sex=?u_sex,u_Sign=?u_Sign,u_age=?u_age,u_photo=?u_photo " +
                "where user_name=?user_name";

            DataUser us = new DataUser();
            //给中间实体类赋值
            us.user_name = userId.Text;
            us.u_Nick = userNetname.Text;
            //判断下拉列表选中的数据,并提取,然后将其转换为int 类型,1为True,0为False
            us.u_sex = userSex.SelectedValue == "true" ? 1 : 0;
            us.u_Sign = userSign.Text;
            us.u_age = Convert.ToInt32(userAge.Text);
            us.u_photo = userPhoto.ImageUrl;

            Hashtable ht = new Hashtable();
            //参数的赋值
            ht.Add("user_name", us.user_name);
            ht.Add("u_Nick", us.u_Nick);
            ht.Add("u_sex", us.u_sex);
            ht.Add("u_Sign", us.u_Sign);
            ht.Add("u_age", us.u_age);
            ht.Add("u_photo", us.u_photo);
			
			//调用增删改方法
            int result = ToolMysqlDate.executeSql(sql, ht);
            //向用户提示信息
            if (result > 0)
            {
                Response.Write("<script>alert('信息修改成功')</script>");
            }
            else
            {
                Response.Write("<script>alert('信息修改失败')</script>");
            }
        }
    }
}

这样我们在登录后,会得到如下的个人中心界面(ps:登录界面的路径需要大家修改一下):
在这里插入图片描述

四.发现音乐界面(Main.aspx)

我们同样使用包含母版页的web窗体来创建发现音乐,创建完毕后,填入如下代码:

<%@ Page Title="" Language="C#" MasterPageFile="~/Musci_Menu.Master" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="MyMusci.Main" %>
<!--这里可独立于母版页放置一些js或css-->
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
	<!--内容区域-->
    <div class="container">
        <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 控件,读取数据库数据--%>
                    <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">
                                   <p><%# Eval("ROWS") %><%# Eval("m_name") %></p><p><%# Eval("m_singer") %></p>
                                </a>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
                <div id="menu1" class="container tab-pane fade"><br>
                  <asp:Repeater ID="Repeater6" runat="server">
                        <ItemTemplate>
                            <div class="col recommend">
                            <img src="img/music.png" style="width:125px;height:125px" />
                                <a href="Musci_Main.aspx?id">
                                   <p><%# Eval("ROWS") %><%# Eval("m_name") %></p><p><%# Eval("m_singer") %></p>
                                </a>
                        </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
                <div id="menu2" class="container tab-pane fade"><br>
                  <asp:Repeater ID="Repeater7" runat="server">
                        <ItemTemplate>
                            <div class="col recommend">
                                <img src="img/music.png" style="width:125px;height:125px" />
                                <a href="Musci_Main.aspx?id">
                                   <p><%# Eval("ROWS") %><%# Eval("m_name") %></p><p><%# Eval("m_singer") %></p>
                                </a>
                        </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
            </div>

			<%--这里是歌曲推荐下方的按钮,点击可以切换下一页推荐歌曲--%>
            <div class="d-flex justify-content-center">
                <ul class="nav nav-pills" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link active" data-bs-toggle="pill" href="#home">.</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-bs-toggle="pill" href="#menu1">.</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-bs-toggle="pill" href="#menu2">.</a>
                    </li>
                  </ul>
            </div>
        </div>

		<!--热歌榜数据-->
        <div class="row">
            <div class="col Repeater">
                <span style="font-size:30px;align-content:center">热歌榜</span><p></p>
                <!--同样使用aspx控件来填充数据-->
                <asp:Repeater ID="Repeater1" runat="server">
                    <ItemTemplate>
                        <div class="row">
                            <a href="Musci_Main.aspx?id">
                                <p><%# Eval("ROWS") %> <%# Eval("m_name") %></p>
                                <p><%# Eval("m_singer") %></p>
                            </a>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>

            <div class="col Repeater">
                <span style="font-size:30px;align-content:center">治愈榜</span><p></p>
                <asp:Repeater ID="Repeater2" runat="server">
                    <ItemTemplate>
                        <div class="row">
                            <a href="Musci_Main.aspx?id">
                                <p><%# Eval("ROWS") %> <%# Eval("m_name") %></p>
                                <p><%# Eval("m_singer") %></p>
                            </a>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>

            <div class="col Repeater">
                <span style="font-size:30px;align-content:center">国风榜</span><p></p>
                <asp:Repeater ID="Repeater3" runat="server">
                    <ItemTemplate>
                        <div class="row">
                            <a href="Musci_Main.aspx?id">
                                <p><%# Eval("ROWS") %> <%# Eval("m_name") %></p>
                                <p><%# Eval("m_singer") %></p>
                            </a>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>

            <div class="col Repeater">
                <span style="font-size:30px;align-content:center">欧美榜</span><p></p>
                <asp:Repeater ID="Repeater4" runat="server">
                    <ItemTemplate>
                        <div class="row">
                            <a href="Musci_Main.aspx?id">
                                <p><%# Eval("ROWS") %> <%# Eval("m_name") %></p>
                                <p><%# Eval("m_singer") %></p>
                            </a>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </div>
    </div>
    <script>
    	/*当运行至该页面,导航栏按钮则定位选中该页面的'发现音乐'按钮*/
        btn_active("main");
    </script>
</asp:Content>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace MyMusci
{
    public partial class Main : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack) {
                Bindlist();
            }
        }

		//向控件填充数据
        private void Bindlist()
        {
            //rows mysql特殊写法,用于返回序列排序个数
            string sql = "SELECT @rownum:=@rownum+1 AS ROWS,t.* FROM music t,"+
                         "(SELECT @rownum:=0)t1 ORDER BY m_clicknum DESC LIMIT 5 ";

			//填充热歌榜的数据
            Repeater1.DataSource = ToolMysqlDate.executTable(sql);
            Repeater1.DataBind();

            Repeater2.DataSource = ToolMysqlDate.executTable("SELECT @rownum:=@rownum+1 AS ROWS,t.* FROM music t ,(SELECT @rownum:=0)t1 WHERE m_type IN (SELECT m_number FROM music_type WHERE m_type='治愈') ORDER BY m_clicknum DESC LIMIT 5");
            Repeater2.DataBind();

            Repeater3.DataSource = ToolMysqlDate.executTable("SELECT @rownum:=@rownum+1 AS ROWS,t.* FROM music t ,(SELECT @rownum:=0)t1 WHERE m_type IN (SELECT m_number FROM music_type WHERE m_type='国风') ORDER BY m_clicknum DESC LIMIT 5");
            Repeater3.DataBind();

            Repeater4.DataSource = ToolMysqlDate.executTable("SELECT @rownum:=@rownum+1 AS ROWS,t.* FROM music t ,(SELECT @rownum:=0)t1 WHERE m_type IN (SELECT m_number FROM music_type WHERE m_type='欧美') ORDER BY m_clicknum DESC LIMIT 5");
            Repeater4.DataBind();

            //填充歌曲推荐数据(0-9)(10-18)(19-27)
            Repeater5.DataSource = ToolMysqlDate.executTable("SELECT t.* FROM (SELECT @rownum:=@rownum+1 AS ROWS,t.* FROM music t ,(SELECT @rownum:= 0)t1 ORDER BY m_clicknum DESC)t WHERE ROWS BETWEEN(1 - 1)*9 AND(2 - 1) * 9 ORDER BY ROWS ");
            Repeater5.DataBind();

            Repeater6.DataSource = ToolMysqlDate.executTable("SELECT t.* FROM (SELECT @rownum:=@rownum+1 AS ROWS,t.* FROM music t ,(SELECT @rownum:= 0)t1 ORDER BY m_clicknum DESC)t WHERE ROWS BETWEEN(2 - 1)*9+1 AND(3 - 1) * 9 ORDER BY ROWS ");
            Repeater6.DataBind();

            Repeater7.DataSource = ToolMysqlDate.executTable("SELECT t.* FROM (SELECT @rownum:=@rownum+1 AS ROWS,t.* FROM music t ,(SELECT @rownum:= 0)t1 ORDER BY m_clicknum DESC)t WHERE ROWS BETWEEN(3 - 1)*9+1 AND(4 - 1) * 9 ORDER BY ROWS ");
            Repeater7.DataBind();
        }
    }
}

歌曲推荐部分:
在这里插入图片描述
榜单部分:

五.ToolMysqlDate.cs增加方法

我们在之前的ToolMysqlDate.cs中添加如下方法:

//不带参数查询
public static DataTable executTable(String sql)
{
    MySqlDataAdapter mda = new MySqlDataAdapter(sql, conn);

    DataTable dt = new DataTable();

    mda.Fill(dt);

    return dt;
}

六.说明

推荐歌曲的图片存储位置(需要大家手动导入)
在这里插入图片描述
对应数据库的内容:

这样,一个比较简陋的音乐主页模块就做好了,谢谢大家

白露-

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ASP.net 主页模块

一.说明此文是小白在学习张晨光老师的视频教学<<Asp.Net WEB服务器编程技术>>中做的学习笔记,一些知识点也是跟着教程走的,大家也可以去老师的主页去学习,谢谢大家.这一篇要练习的是,如下课程的代码:二.增加母版页(Musci_Menu.Master)右击项目/添加/新建项:<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Musci_Menu.master.cs" Inherits="M
复制链接

扫一扫