ASP.NET WEB——项目创建与文件上传操作
前言
ASP.NET WEB是一门非常简单的课程内容，我们大概用三章的内容来包含所有的知识点，三章分为
1、ASP.NET WEB项目创建与文件上传操作
2、ASP.NET WEB项目中Cookie与Session的用法
3、ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
分为三章，基本上将具体的用法讲解完毕，配套的【Repeater】的基础项目视频包含【数据库CRUD操作】让你快速上手，解决你考试的后顾之忧。
环境
系统环境：【win11】
开发工具：【Visual Studio 2017】
数据库：【SQLServer 2019】
项目创建
建议使用最新版本的2022活2023版本，这里操作是类似的，但是我这机房最高能使用到2017版本，不然就太大了运行起来经常崩溃。
我们选择创建【Web窗体】项目
创建完成后可以看到的页面。
点击【调试】->【运行(不调试)】
运行效果
表单校验
表单校验这个我就讲两个，一个是【非空验证】另外一个是【比较验证】，分别用于【文本是否为空验证】以及【两次密码比较】的情景。
创建自定义Web窗体
1、在项目上点击【鼠标右键】，注意，这里一定是在项目上，否则你找不到添加【Web窗体】的选项。
2、【添加】->【Web窗体】
3、输入窗体名称，我们这里先输入一个【Login】做测试
创建一个登陆页面
创建的窗体实际上是多个文件
我们在页面上进行绘制操作，在后台cs文件中写对应的控制函数。
登陆窗体示例
前台
这里要注意【OnClick="Unnamed_Click"】这个函数一定要有后台的对应函数，否则肯定报错。
<p> <asp:TextBox runat="server" ID="userName" placeholder="请输入用户名"></asp:TextBox> </p> <p> <asp:TextBox runat="server" ID="pwd" placeholder="请输入密码"></asp:TextBox> </p> <p> <asp:Button runat="server" OnClick="Unnamed_Click" Text="登陆"/> </p>
页面效果：
后台交互
这里我就做了一个后台的非空判断和账号密码判断。
protected void Unnamed_Click(object sender, EventArgs e) { string userName = this.userName.Text; string pwd = this.pwd.Text; if ( string.IsNullOrEmpty(userName) || string.IsNullOrEmpty(pwd) ) { Response.Write("<script>alert('账号面面不能为空！')</script>"); return; } if (userName == "admin" && pwd == "abcd1234") { Response.Write("<script>alert('登陆成功！')</script>"); } else { Response.Write("<script>alert('登陆失败！')</script>"); } }
前台验证
我们在后台添加了验证，但是为了保障程序肯定没问题，所以我们在前台也加上非空验证。
<p> <asp:TextBox runat="server" ID="userName" placeholder="请输入用户名"></asp:TextBox> <asp:RequiredFieldValidator runat="server" ControlToValidate="userName" ErrorMessage="用户名不能为空" ForeColor="Red" ></asp:RequiredFieldValidator> </p> <p> <asp:TextBox runat="server" ID="pwd" placeholder="请输入密码"></asp:TextBox> <asp:RequiredFieldValidator runat="server" ControlToValidate="pwd" ErrorMessage="用户密码不能为空" ForeColor="Red" ></asp:RequiredFieldValidator> </p> <p> <asp:Button runat="server" OnClick="Unnamed_Click" Text="登陆"/> </p>
测试效果：
登陆效果：
添加密码双次输入验证
前台源码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Demo_1.Login" %> <!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> </head> <body> <form id="form1" runat="server"> <div> <p> <asp:TextBox runat="server" ID="userName" placeholder="请输入用户名"></asp:TextBox> <asp:RequiredFieldValidator runat="server" ControlToValidate="userName" ErrorMessage="用户名不能为空" ForeColor="Red"></asp:RequiredFieldValidator> </p> <p> <asp:TextBox runat="server" ID="pwd" placeholder="请输入密码"></asp:TextBox> <asp:RequiredFieldValidator runat="server" ControlToValidate="pwd" ErrorMessage="用户密码不能为空" ForeColor="Red"></asp:RequiredFieldValidator> </p> <p> <asp:TextBox runat="server" ID="pwd1" placeholder="请输入密码"></asp:TextBox> <asp:RequiredFieldValidator runat="server" ControlToValidate="pwd" ErrorMessage="用户密码不能为空" ForeColor="Red"></asp:RequiredFieldValidator> <asp:CompareValidator runat="server" ErrorMessage="两次密码不同" ControlToValidate="pwd" ControlToCompare="pwd1" ForeColor="Red" ></asp:CompareValidator> </p> <p> <asp:Button runat="server" OnClick="Unnamed_Click" Text="登陆" /> </p> </div> </form> </body> </html>
实际效果：
文件上传
创建文件上传页面
前端代码：
<asp:FileUpload runat="server" ID="file"/> <hr /> <asp:Button runat="server" OnClick="Unnamed_Click" Text="文件上传"/> <hr /> <asp:Image runat="server" ID="showImg" Width="400" Height="200"/>
项目中创建保存图片文件夹【imgs】
创建效果：
后台代码：
/// <summary> /// 上传文件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Unnamed_Click(object sender, EventArgs e) { //获取文件后缀名 string ext = System.IO.Path.GetExtension(this.file.FileName); //组合新文件名 string newFileName = Guid.NewGuid().ToString("N") + ext; //拼接完整的服务保存路径 string saveUrl = Server.MapPath("/imgs/") + newFileName; //保存图片 this.file.SaveAs(saveUrl); //显示图片 this.showImg.ImageUrl = "/imgs/" + newFileName; }
上传操作效果：
