ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 编程语言> 文章详细

ASP.net 主页模块

2022-02-24 22:58:17  阅读：201  来源： 互联网

标签：ASP 主页 System us ROWS using net rownum SELECT


一.说明

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

六.说明

推荐歌曲的图片存储位置(需要大家手动导入)
在这里插入图片描述
对应数据库的内容:
在这里插入图片描述
这样,一个比较简陋的音乐主页模块就做好了,谢谢大家

标签：ASP,主页,System,us,ROWS,using,net,rownum,SELECT
来源： https://blog.csdn.net/m0_56227168/article/details/123122327

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有