[JavaScript知识库] ASP.net 主页模块

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> ASP.net 主页模块 -> 正文阅读

[JavaScript知识库]ASP.net 主页模块

一.说明

此文是小白在学习张晨光老师的视频教学<<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;
}