ASP.net 个人中心模块

最新推荐文章于 2023-03-16 08:10:39 发布

白露-

最新推荐文章于 2023-03-16 08:10:39 发布

阅读量1.3k

点赞数 2

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

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

版权

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

49 篇文章 14 订阅

订阅专栏

一.说明

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

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

二.登录界面(index.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="MyMusci.index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .linkBtn {
            padding:0px 20px;
        }

    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            
            <asp:LinkButton ID="LinkButton1" runat="server" CssClass="linkBtn">发现音乐</asp:LinkButton>
            <asp:LinkButton ID="LinkButton2" runat="server" CssClass="linkBtn">我的主页</asp:LinkButton>
            <asp:LinkButton ID="LinkButton3" runat="server" CssClass="linkBtn" PostBackUrl="~/Home.aspx">个人中心</asp:LinkButton>
            
        </div>
    </form>
</body>
</html>

后台逻辑:

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 index : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        	//如果Session对象为空,则退回至登录界面
            if (Session["userName"] == null)
            {
                Response.Write("<script>alert('您的登录已过时,请重新登录!!!')</script>");
                Response.Redirect("login_new.aspx");
            
            }
        }
    }
}

这里只时简单的给几个超链接控件,并不是重点,后续再作优化.

三.个人中心(Home.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="MyMusci.Home" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet" />
    <script src="bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
    <style>
        .img {
            height:126px;
            width:126px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <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>
    </form>
</body>
</html>

后台代码:

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 Home : 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";
			
			//这是我们自己创建的类,记得引用using Model;Model是我们自己创建的类库
            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>");
            }
        }
    }
}

四.ToolMysqlDate.cs增加方法

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

//从数据库查询数据并将数据返回为DataTable类型
public static DataTable executTable(String sql, Hashtable ht) {
            

  MySqlDataAdapter mda = new MySqlDataAdapter(sql, conn);

   //把ht传递过来之后，需要给参数赋值；
   foreach (DictionaryEntry de in ht)
   {
       //第一个参数：key;第二个参数:value值
       mda.SelectCommand.Parameters.AddWithValue(de.Key.ToString(), de.Value.ToString());
   }

   DataTable dt = new DataTable();

   mda.Fill(dt);

   return dt;
}

五.创建类库(Model)

首先,我们右击项目/添加/新建项目
在这里插入图片描述

然后添加/新建项:

里面填充的是数据库的字段的内容,大家需要根据自己创建的数据库字段,作相应的调整:

using System;
using System.Collections.Generic;
using System.Text;

namespace Model
{
    public class DataUser
    {
        public int id { get; set; }
        public string user_name { get; set; }
        public string user_pwd { get; set; }
        public string u_Nick { get; set; }
        //这里将原本booL类型的字段更改为int字段,因为使用上面的修改数据库方法,是没有办法传递bool类型的
        //改为int 类型后,数据库会字段的将其转换为bool类型,这样我们修改的时候就不会出错了
        public int u_sex { get; set; }
        public string u_photo { get; set; }
        public DateTime u_time { get; set; }
        public string u_Sign { get; set; }
        public int u_age { get; set; }
    }
}