ASP.NET WEB——项目创建与文件上传操作

目录

ASP.NET WEB——项目创建与文件上传操作

前言

环境

项目创建

表单校验

创建自定义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;

}
    

上传操作效果：

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！