0


Visual Studio Community安装WebForm创建和数据连接

注意:此文主要针对西南林业大学的课程

一、安装Visual Studio Community

1.下载Visual Studio Community

2.双击安装

3.配置

二、项目创建

1.创建新项目

f37c60e0a2114501aacb190382cec1b4.png

3b0198e63053424fb2573e4844e01fa2.png

如果没有怎么办?不好办啊,得加钱。这里因为少装一个东西,不要卸载重装,有的话跳过到步骤2

feb7fbbb8a9a4dd48619e28120186e79.png

0b7ef7803ef24bb1a7aa1d9180e4c8e5.png

0e32b4800ac648fcbe32eb7bd31769a8.png

2.配置新项目

d187d1cd747244d88ba80357b0b3d01d.png

9d2b7f9a63a94d43b4aaecee6ae9cdf1.png

好吧,等待创建,可能有一丢丢卡

3.创建web窗体

8b743fec3329477e8cff4c09f495c30d.png

56b6d0049a3e4cf4bfa2eca86fc5407b.png

85f1eef483594183bc29f0b1b6eb0cb2.png

4.代码分部

(1)html,这里可以自己建立一个文件夹,把html页面放里面,也可以放在外面,也可以写在WebForm1.aspx里面,演示我就不放了

d3961d23929d4585885e755c0020d6dd.png

(2)web窗体

206cc86f1da2488a82264f6f16919139.png

主要用来写后端代码,ajax请求代码是放在前端的,图片说法有误

5.文件打开问题

(1)文件打开是这样的,注意,这是运行不了的,会报错哦!只要点击后缀为sln的文件就可以了

29bd831c07b14604b231d764dd92704f.png

1b4f73139a6947dcbf7d87dc59294ea9.png

错误信息:

b54753ef64d94d18ade06b6651052617.png


三、数据库访问

1.自己先装一个sql server

推荐使用navicat作为管理工具。

创建数据库和表:

create database StudManage;

CREATE TABLE [dbo].[UserInfo] (

[UserID] varchar(50) COLLATE Chinese_PRC_CI_AS NOT NULL,

[UserName] varchar(50) COLLATE Chinese_PRC_CI_AS NULL,

[Password] varchar(50) COLLATE Chinese_PRC_CI_AS NULL,

[role] varchar(50) COLLATE Chinese_PRC_CI_AS NULL

)

CREATE TABLE [dbo].[StudInfo] (

[StudNo] varchar(50) COLLATE Chinese_PRC_CI_AS NOT NULL,

[StudName] varchar(50) COLLATE Chinese_PRC_CI_AS NULL,

[StudSex] varchar(50) COLLATE Chinese_PRC_CI_AS NULL,

[Email] varchar(50) COLLATE Chinese_PRC_CI_AS NULL

)

2.创建实体数据模型

773b75e7fe7841d2a741954977921dae.png

90c91e48bf4849d9b602fc632fe1491f.png

e6ba29b701e244f392fece955e71188c.png

3.创建连接

fa88810bd456482596164acb3eb1d0ef.png

e7fa5c78e3f14060841214752c5e3909.png

e8abdbae9a6d4709bf0026a749212e7d.png

7877032f5cb642de867594ac90211c08.png

e94575b6c2b749dd9d4d4929a30a8eeb.png

b7e5bd565a554fdeab9247ba4ab4a2f6.png

b1fb94b429cf4d07abf635589c019015.png

14331e503ae44524a21c052e421ecd55.png

6578014f0c4745c58a9c766d410d38b9.png

4.修改更新

(少选了,漏选了,或者表结构修改了,更新就好,不用删掉重来)

下面是个简单测试例子

4cac58c440e2439f8c3069a01dc48152.png9e6958673a42402790d15b9417648f4d.png

584a42d1c5944ede984ea68680dbc7d0.png

四、项目实战(登录验证)

1.创建两个html

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>登录界面</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h3>登录</h3>
    <form id="loginForm">
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" id="userName" /></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" id="password" /></td>
            </tr>
            <tr>
                <td colspan="2" id="errorInfo" style="color: red;"></td>
            </tr>
        </table>
        <button type="button" id="submit">登录</button>
    </form>

    <script>
        $(document).ready(function () {
            $("#submit").click(function () {
                var userName = $("#userName").val();
                var psw = $("#password").val();
                var jsonData = '{"userName":"' + userName + '","psw":"' + psw + '"}';
                if (userName.length == 0 || psw.length == 0) {
                    $("#errorInfo").html("*用户名和密码都不能为空").css("color", "red");
                    return;
                }
                $.ajax({
                    type: "POST",
                    url: "WebForm1.aspx/UserIsValidsjk",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: jsonData,
                    success: function (data) {
                        if (data.d == "true") {
                            window.location.href = "welcome.html";
                        } else {
                            $("#errorInfo").html("*用户名或密码错误").css("color", "red");
                        }
                    },
                    error: function (err) {
                        alert(err.responseText);
                    }
                });
            });
        });
    </script>
</body>
</html>

welcome.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h3>Welcome</h3>
</body>
</html>

2. 创建WebForm1,写入下面代码

 [WebMethod]
 public static string UserIsValidsjk(string userName, string psw)
 {
   
     using (StudManageEntities1 entity = new StudManageEntities1())
     {
         var query = "SELECT * FROM dbo.UserInfo WHERE UserName='" + userName + "' AND Password='" + psw + "'";

         List<UserInfo> list = entity.Database.SqlQuery<UserInfo>(query).ToList();

         if (list.Count > 0)
             return "true";
         else
             return "false";
     }
 }

3.创建数据库,写入测试信息

上面有创建数据表的代码,在UserInfo自己插入两条数据

4.运行测试

先输入错误信息

在输入正确的,将为跳转到welcome界面


本文转载自: https://blog.csdn.net/FHY26828/article/details/140941044
版权归原作者 FHYAAAX 所有, 如有侵权,请联系我们删除。

“Visual Studio Community安装WebForm创建和数据连接”的评论:

还没有评论