将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 应用程序项目:

  1. 打开 Visual Studio。
  2. 选择 "创建新项目"。
  3. 选择 "ASP.NET Core Web 应用程序"。
  4. 选择 "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

csharp
using 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,并配置数据库上下文。

csharp
using 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 文件中配置服务和中间件。

csharp
public void ConfigureServices(IServiceCollection services) { services.AddDbContext<ApplicationDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"))); services.AddControllersWithViews(); }

2.6. 创建控制器

Controllers 文件夹中创建一个新的控制器 UsersController.cs,以处理用户数据的读取和写入。

csharp
using 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. 运行和测试

  1. 在 Visual Studio 中运行应用程序。
  2. 导航到 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