将HTML网页连接到SQL Server
要将 HTML 网页连接到 SQL Server 数据库,通常涉及前端(HTML)与后端(服务器端脚本)之间的交互。由于 HTML 是静态的,不能直接与 SQL Server 通信,因此需要使用服务器端语言(如 PHP、ASP.NET、Node.js 等)来处理数据的交互。下面是一个完整的解决方案,其中包括使用 ASP.NET 和 C# 来实现 HTML 页面与 SQL Server 数据库的连接。
1. 配置 SQL Server 数据库
确保 SQL Server 数据库已经安装并配置好,并且已经创建了必要的表和数据。
sql-- 创建一个示例数据库和表
CREATE DATABASE MyDatabase;
USE MyDatabase;
CREATE TABLE Users (
ID INT PRIMARY KEY IDENTITY,
Username NVARCHAR(50),
Password NVARCHAR(50)
);
2. 创建 ASP.NET Web 应用程序
2.1. 创建新的 ASP.NET 项目
在 Visual Studio 中创建一个新的 ASP.NET Web 应用程序项目:
- 打开 Visual Studio。
- 选择 "创建新项目"。
- 选择 "ASP.NET Core Web 应用程序"。
- 选择 "Web 应用程序 (模型-视图-控制器)" 模板。
2.2. 配置连接字符串
在 appsettings.json
文件中添加 SQL Server 的连接字符串。
json{
"ConnectionStrings": {
"DefaultConnection": "Server=localhost;Database=MyDatabase;User Id=myusername;Password=mypassword;"
}
}
2.3. 创建数据模型
在 Models
文件夹中创建一个新的 C# 类 User.cs
。
csharpusing System.ComponentModel.DataAnnotations;
namespace MyWebApp.Models
{
public class User
{
public int ID { get; set; }
[Required]
public string Username { get; set; }
[Required]
public string Password { get; set; }
}
}
2.4. 创建数据库上下文
在 Data
文件夹中创建一个新的 C# 类 ApplicationDbContext.cs
,并配置数据库上下文。
csharpusing Microsoft.EntityFrameworkCore;
using MyWebApp.Models;
namespace MyWebApp.Data
{
public class ApplicationDbContext : DbContext
{
public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
: base(options)
{
}
public DbSet<User> Users { get; set; }
}
}
2.5. 配置服务和中间件
在 Startup.cs
文件中配置服务和中间件。
csharppublic void ConfigureServices(IServiceCollection services)
{
services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
services.AddControllersWithViews();
}
2.6. 创建控制器
在 Controllers
文件夹中创建一个新的控制器 UsersController.cs
,以处理用户数据的读取和写入。
csharpusing Microsoft.AspNetCore.Mvc;
using MyWebApp.Data;
using MyWebApp.Models;
using System.Linq;
namespace MyWebApp.Controllers
{
public class UsersController : Controller
{
private readonly ApplicationDbContext _context;
public UsersController(ApplicationDbContext context)
{
_context = context;
}
public IActionResult Index()
{
var users = _context.Users.ToList();
return View(users);
}
// 其他操作(如 Create, Edit, Delete)可以在这里添加
}
}
2.7. 创建视图
在 Views/Users
文件夹中创建一个新的视图 Index.cshtml
来显示用户列表。
html@model IEnumerable<MyWebApp.Models.User>
<!DOCTYPE html>
<html>
<head>
<title>Users</title>
</head>
<body>
<h1>Users List</h1>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Username</th>
</tr>
</thead>
<tbody>
@foreach (var user in Model)
{
<tr>
<td>@user.ID</td>
<td>@user.Username</td>
</tr>
}
</tbody>
</table>
</body>
</html>
3. 运行和测试
- 在 Visual Studio 中运行应用程序。
- 导航到
http://localhost:[port]/Users
来查看用户列表。
总结
- 配置 SQL Server: 创建数据库和表。
- 创建 ASP.NET 项目: 使用 Visual Studio 创建和配置 ASP.NET Web 应用程序。
- 连接字符串: 在
appsettings.json
中配置连接字符串。 - 数据模型: 定义数据模型类
User
。 - 数据库上下文: 配置
ApplicationDbContext
类。 - 控制器和视图: 创建控制器
UsersController
和视图Index.cshtml
。 - 运行和测试: 在浏览器中访问应用程序,验证功能是否正常。
关键字
SQL Server, ASP.NET, C#, appsettings.json
, 连接字符串, 数据模型, DbContext
, 控制器, 视图, Visual Studio