两种方法实现asp.net方案的前后端数据交互(aspx文件html+ashx+ajax)

Posted wangmengdx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了两种方法实现asp.net方案的前后端数据交互(aspx文件html+ashx+ajax)相关的知识,希望对你有一定的参考价值。

一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互。asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术

 

一、创建数据库

  这里以SQL Server数据库为例,打开SSMS,创建一个数据库,注意数据库的保存路径,后面要将数据库复制到Visual Studio的工程项目中。

  创建数据库

  打开Visual Studio,创建一个基于.NET Framework的空项目(不创建.NET Core项目)。

  创建一个基于.NET Framework的空项目 

  在右侧的Solution Explorer(解决方案管理器)下只显示出这么几个文件。

  解决方案文件夹下的内容

  右键项目,选择Add-Add ASP.NET Folder-App_Data。这个文件夹就是存放数据库的文件夹,注意它的名字不能改变,只能是App_Data。

  添加App_Data文件夹

  在SSMS中将数据库分离。找到刚才创建的数据库的路径,复制。如果出现权限的错误不能复制,右键数据库-属性-安全,更改权限为完全控制。

  复制数据库 

  将Authenticated User的权限更改为完全控制。如果权限还是错误,将其他用户的权限也更改为完全控制。

  更改数据库属性1 

  复制mdf和ldf文件,在Visual Studio的App_Data文件夹下粘贴。(如果有ndf数据库文件,一起复制)。打开App_Data文件夹下的数据库,如果Visual Studio的版本和SQL Server的版本不兼容,则会出现这个错误。当前Visual Studio的版本是2017,SQL Server的版本也是2017。在别人的电脑上用低版本的SQL Server创建数据库,然后复制到我们自己的电脑上即可。这里更换一个低版本的数据库。

  数据库与Visual Studio的版本不兼容

  双击数据库,在Server Explorer管理器中,右键Table,创建一个新的数据表,添加相应字段值,为用户名添加主键。

  创建新表

  创建新表2 

 

  二、aspx文件实现前后端数据交互

  右键项目,添加一个WebForm,后缀名为.aspx。

  添加一个WebForm

  aspx文件的语法与普通的HTML文件不同,它使用的控件名字前会加上asp,如:asp:Button。aspx文件涉及很多方面的知识,具体信息请查看:https://app.pluralsight.com/player?author=dan-wahlin&name=webforms-01&mode=live&clip=0&course=aspdotnet-webforms4-intro。将一个普通个HTML文件的代码直接复制到aspx文件中,是可以运行的。

  aspx文件

  打开Web.config文件,在<configuration></configuration>标签内添加数据库连接信息。

  在Webconfig文件中添加数据库连接信息

1   <!-- 数据库连接-->
2   <connectionStrings>
3     <add name="connectionString" 
4          connectionString="Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\data1.mdf;Integrated Security=True" 
5          providerName="System.Data.SqlClient"/>
6   </connectionStrings>

  其中,在<add>标签内需要填写3个信息:①name,为这个数据库连接起个名字,可以任取,后面会用到 ②connectionString,数据库连接的相关属性设置:Data Source=(LocalDB)\\MSSQLLocalDB,如果使用的是SQL Server数据库,则不用更改;AttachDbFileName=|DataDirectory|\\data1.mdf,这里要将最后的数据库主文件(.mdf),更改为自己的数据库;Integrated Security=True,不用更改。 ③providerName="System.Data.SqlClient",如果使用的是SQL Server数据库,则不用更改。

  aspx文件采用了微软可视化编程的机制,基于事件编程,和WinForm、WPF一致,前后端代码分离,且前端代码可以在代码视图与设计视图之前切换。从工具箱中拖拽一个控件(如Button)到设计视图时,代码视图会自动地添加相应代码;同样,在代码视图中写上代码,在布局视图中会出现相应的控件。

  aspx文件结构

  aspx文件的后端代码分成了两部分,一个是*.aspx.cs文件,一个是*.aspx.designer.cs文件。两个文件其实是同一个类,用partial关键字分成了两个分部类。在.*aspx.designer.cs文件中,包含的是每一个控件的字段声明。在asp.net中,WebForm里每一种控件都是一个类,具体的添加的控件是相应类的一个个实例。比如Button是一个类,拖拽一个Button到布局视图中,这个Button就是Button类的一个实例。如果再拖拽一个Button,则第二个拖拽的Button是第二个实例,两个Button名字不同。在*.aspx.cs文件中存放的是相应控件的事件响应函数。这样就实现了字段与响应函数的分离,结构更合理。

  aspx文件的后端代码

  添加控件,设计一个增删改查的页面。

  aspx文件页面设计

  aspx文件页面设计代码 

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="前后端数据交互.WebForm1" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7     <title></title>
 8 </head>
 9 <body>
10     <form id="form1" runat="server">
11         <asp:Button ID="btnAll" runat="server" Text="点击按钮查看所有数据" />
12         <br />
13         <asp:GridView ID="GridView1" runat="server">
14         </asp:GridView>
15         <br />
16         <br />
17<br />
18         <asp:Label ID="Label1" runat="server" Text="用户名:"></asp:Label>
19         <asp:TextBox ID="tbxInsertUser" runat="server"></asp:TextBox>
20 &nbsp;
21         <asp:Label ID="Label2" runat="server" Text="密码:"></asp:Label>
22         <asp:TextBox ID="tbxInsertPassword" runat="server"></asp:TextBox>
23 &nbsp;
24         <asp:Button ID="btnInsert" runat="server" Text="确认添加" />
25         <br />
26         <br />
27         <br />
28<br />
29         <asp:Label ID="Label3" runat="server" Text="用户名:"></asp:Label>
30         <asp:TextBox ID="tbxDeleteUser" runat="server"></asp:TextBox>
31 &nbsp;
32         <asp:Label ID="Label6" runat="server" Text="密码:"></asp:Label>
33         <asp:TextBox ID="tbxDeletePassword" runat="server"></asp:TextBox>
34 &nbsp;
35         <asp:Button ID="btnDelete" runat="server" Text="确认删除" />
36         <br />
37         <br />
38         <br />
39<br />
40         <asp:Label ID="Label4" runat="server" Text="用户名:"></asp:Label>
41         <asp:TextBox ID="tbxUpdateUser" runat="server"></asp:TextBox>
42 &nbsp;
43         <asp:Label ID="Label5" runat="server" Text="密码:"></asp:Label>
44         <asp:TextBox ID="tbxUpdatePassword" runat="server"></asp:TextBox>
45 &nbsp;
46         <asp:Button ID="btnUpdate" runat="server" Text="确认修改" />
47         <br />
48         <br />
49         <br />
50<br />
51         <asp:Label ID="Label7" runat="server" Text="用户名:"></asp:Label>
52         <asp:TextBox ID="tbxSelectUser" runat="server"></asp:TextBox>
53 &nbsp;
54         <asp:Label ID="Label8" runat="server" Text="密码:"></asp:Label>
55         <asp:TextBox ID="tbxSelectPassword" runat="server"></asp:TextBox>
56 &nbsp;
57         <asp:Button ID="btnSelect" runat="server" Text="确认查询" />
58     </form>
59 </body>
60 </html>
aspx文件页面设计代码

 

  下面进行增删改查的设置。

  ①增

  双击“确认添加”按钮,编写事件响应函数。事件响应函数的意思是,当点击这个按钮时,会发生什么事情,发生的这个事情就写在事件响应函数里。

  双击确认添加按钮,进入后台代码编写事件响应函数

  编写事件响应函数

  添加两个命名空间。

1 using System.Data;
2 using System.Data.SqlClient;

  为了调试方便,引入System.Windows.Forms命名空间,并在Solution Explorer(解决方案管理器)中右键Reference添加相应的引用。这是为了使用MessageBox.Show()方法弹出提示框。

   添加System.Windows.Forms引用

  在WebForm1类的开头添加字段,包含数据库连接字符串的信息。字段名connectionString是任取的,后面会用到。System.ConfigurationManager.ConnectionString["connectionString"].ToString()中,connectionString是之前在Web.config文件中设置的。

1         //数据库连接字符串
2         string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["connectionString"].ToString();

  这是添加之后的后端代码。

  添加命名空间和数据库连接字符串后的后端代码

  编写btnInsert_Click()响应函数。

    1°添加表示账户名和密码的变量,tbxInsertUser、tbxInsertPassword是自己设置的文本框的ID名字。

string user = tbxInsertUser.Text;
string password = tbxInsertPassword.Text;

    2°SqlConnection是提供连接到SQL Server数据库方法的类,这里实例化为conn,在构造函数中传入刚才添加的connectionString字段(数据库连接字符串),表示我们想连接的是这个数据库。conn.Open()打开这个连接,conn.Close()关闭连接。这里SqlConnection的构造函数还有其他的重载形式,但这样写更清楚一点。

1 SqlConnection conn = new SqlConnection(connectionString);
2 conn.Open();
3 
4 
5 conn.Close();

    SqlConnection类

     3°创建SqlCommand对象,它存储我们想对数据库进行的操作。cmd.Connection设置连接的数据库,cmd.CommandText是我们书写的SQL语句,即我们想对数据库进行的操作。同样地,也可以将这两个内容写在SqlCommand的构造函数中。除了SQL语句,SqlCommand对象也可以保存Stored Procedure(存储过程)。这里将在文本框中输入的信息添加到数据库中。SQL Server中添加信息的SQL语句为:INSERT INTO 用户表(用户,密码) VALUES(\'user\',\'password\')。SQL语句不区分大小写,写成小写也可以。表的名字不用加引号,字段的名字也不用加引号,如果表的名字和字段名字都是中文,直接写就可以。VALUES()中相应的值要添加引号。上面这条语句的意思是,对用户表的用户和密码字段进行信息的添加,添加的值为user和password的值。如果想对表中所有字段进行值的添加,则在表名后不用写上具体的字段名,在VALUES()中按表中字段的顺序进行添加。

1 SqlCommand cmd = new SqlCommand();
2 cmd.Connection = conn;
3 cmd.CommandText = "INSERT INTO 用户表 VALUES(\'" + user + "\',\'" + password + "\')";

     SqlCommand

    4°设置好了cmd.CommandText的内容后,要让cmd对象执行它所包含的操作。常用的函数有3个,它们都执行cmd的内容,但返回值不同,适用于不同的场合。可以根据这些特点进行执行成功与否的判断、数据的展示、注册登录的设计等。

    ①cmd.ExecuteNonQuery()

    ExecuteNonQuery

    ExecuteNonQuery()在执行完cmd命令后返回受影响的行数。注意这里受影响的行数不包括查询出来的行数,比如INSERT、DELETE、UPDATE一条信息后,受影响的行数是1,但SELECT一条信息后,受影响的行数是0.

    ②cmd.ExecuteReader()

    ExecuteReader

    SqlDataReader

    ExecuteReader()在执行完cmd命令后会返回一个DataReader对象,提供了HasRows等属性和Read()等方法。HasRows判断DataReader对象所对应的,ExecuteReader()所执行的cmd命令后返回的结果集中有无行数。如果cmd命令执行后返回的结果集不空,则HasRows为true,否则为false。Read()方法提供了DataReader对象逐行访问结果集的方式。

    ③cmd.ExecuteScalar()

    ExecuteScalar

    ExecuteScalar()在执行完cmd命令后返回结果集第一行第一列的那个值,是object类型。

 

    在这里进行相应的设置,如果是做一个注册功能,还需要进行用户是否存在的检查,这里就不进行检查了。

1 if (cmd.ExecuteNonQuery() != 0)
2 {
3     MessageBox.Show("添加信息成功!\\n用户名:" + user + "\\n密码:" + password);
4 }
5else
6 {
7     MessageBox.Show("添加信息失败!");
8 }

 

    全部代码如下:

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI;
 6 using System.Web.UI.WebControls;
 7 
 8 using System.Data;
 9 using System.Data.SqlClient;
10 
11 using System.Windows.Forms;
12 
13 namespace 前后端数据交互
14 {
15     public partial class WebForm1 : System.Web.UI.Page
16     {
17         //数据库连接字符串
18         string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["connectionString"].ToString();
19 
20         protected void Page_Load(object sender, EventArgs e)
21         {
22             
23         }
24 
25         protected void btnInsert_Click(object sender, EventArgs e)
26         {
27             string user = tbxInsertUser.Text;
28             string password = tbxInsertPassword.Text;
29 
30             SqlConnection conn = new SqlConnection(connectionString);
31             conn.Open();
32 
33             SqlCommand cmd = new SqlCommand();
34             cmd.Connection = conn;
35             cmd.CommandText = "INSERT INTO 用户表 VALUES(\'" + user + "\',\'" + password + "\')";
36 
37             if (cmd.ExecuteNonQuery() != 0)
38             {
39                 MessageBox.Show("添加信息成功!\\n用户名:" + user + "\\n密码:" + password);
40             }
41             else
42             {
43                 MessageBox.Show("添加信息失败!");
44             }
45 
46             conn.Close();
47         }
48     }
49 }

    运行后查看结果:

    添加信息成功

    打开数据库,可以看到数据已经被写入。

    数据已经被写入数据库

  下面进行删改查,大体框架都是一样的,只是SQL语句和执行的cmd的3种方法不同。

  ②删

 1      protected void btnDelete_Click(object sender, EventArgs e)
 2         {
 3             string user = tbxDeleteUser.Text;
 4             string password = tbxDeletePassword.Text;
 5 
 6             SqlConnection conn = new SqlConnection(connectionString);
 7             conn.Open();
 8 
 9             SqlCommand cmd = new SqlCommand();
10             cmd.Connection = conn;
11             cmd.CommandText = "DELETE FROM 用户表 WHERE 用户名=\'" + user + "\' AND 密码=\'" + password + "\'";
12 
13             if (cmd.ExecuteNonQuery() != 0)
14             {
15                 MessageBox.Show("删除信息成功!\\n用户名:" + user + "\\n密码:" + password);
16             }
17             else
18             {
19                 MessageBox.Show("数据不存在!");
20             }
21 
22             conn.Close();
23         }

  这里要注意SQL Server中删除操作的SQL语句:DELETE FROM 用户表 WHERE 用户名=\'user\' AND 密码=\'password\',这里WHERE一定不能少,不然会删掉表中全部数据。

  ③改

 1      protected void btnUpdate_Click(object sender, EventArgs e)
 2         {
 3             string user = tbxUpdateUser.Text;
 4             string password = tbxUpdatePassword.Text;
 5 
 6             SqlConnection conn = new SqlConnection(connectionString);
 7             conn.Open();
 8 
 9             SqlCommand cmd = new SqlCommand();
10             cmd.Connection = conn;
11             cmd.CommandText = "UPDATE 用户表 SET 密码=\'" + password + "\' WHERE 用户名=\'" + user + "\'";
12 
13             if (cmd.ExecuteNonQuery() != 0)
14             {
15                 MessageBox.Show("更新信息成功!\\n用户名:" + user + "\\n密码:" + password);
16             }
17             else
18             {
19                 MessageBox.Show("更新失败!");
20             }
21 
22             conn.Close();
23         }

   SQL Server中更新操作的SQL语句:UPDATE 用户表 SET 密码=\'user\' WHERE 用户名=\'password\'.

  ④查

 1         protected void btnSelect_Click(object sender, EventArgs e)
 2         {
 3             string user = tbxSelectUser.Text;
asp.net怎么实现前后端分离 asp.net如何实现前后端分离

ASP.NET MVC+Ajax前后端交互

ASP.net与SQLite数据库通过js和ashx交互(连接和操作)

ASP.NET Core中使用Swagger

前后端分离方案以及技术选型

分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi