使用Dapper.net+c#+javascript+html5写一个问题记录的页面

2025/5/14 9:56:05 来源：https://blog.csdn.net/ChailangCompany/article/details/142601707 浏览: 次关键词：使用Dapper.net+c#+javascript+html5写一个问题记录的页面

要创建一个使用Dapper.net、C#、JavaScript和HTML5的问题记录小系统，我们需要从设计数据库模型开始，然后逐步实现后端API接口和前端页面。以下是一个简化的步骤和代码示例，用于指导如何构建这样的系统。

1. 设计数据库模型

首先，我们需要设计一个数据库模型来存储问题记录。这里假设我们有一个名为Questions的表，包含字段Id（主键）、Title（标题）、Description（描述）和CreatedAt（创建时间）。

CREATE TABLE Questions (Id INT IDENTITY(1,1) PRIMARY KEY,Title NVARCHAR(255) NOT NULL,Description TEXT NOT NULL,CreatedAt DATETIME NOT NULL
);

2. 创建C#后端项目并引入Dapper.net

使用Visual Studio或.NET CLI创建一个ASP.NET Core Web API项目，并通过NuGet安装Dapper库。

安装Dapper:

Install-Package Dapper

3. 实现后端API接口

在ASP.NET Core项目中，我们需要创建控制器来处理问题的增删改查操作。以下是一个简化的QuestionsController示例：

using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using Dapper;
using Microsoft.AspNetCore.Mvc;[ApiController]
[Route("[controller]")]
public class QuestionsController : ControllerBase
{private readonly string _connectionString = "YourConnectionStringHere";[HttpGet]public IActionResult GetQuestions(){using (var connection = new SqlConnection(_connectionString)){var sql = "SELECT * FROM Questions";var questions = connection.Query<Question>(sql).ToList();return Ok(questions);}}// 其他API方法（POST, PUT, DELETE）类似实现...// 示例Question类public class Question{public int Id { get; set; }public string Title { get; set; }public string Description { get; set; }public DateTime CreatedAt { get; set; }}
}

4. 创建HTML5前端页面

在前端，我们可以使用HTML5和JavaScript（可能还有AJAX）来构建用户界面和交互逻辑。这里不展示完整的HTML页面，但提供一个基本的AJAX调用示例，用于从后端获取问题列表：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>问题记录系统</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>$(document).ready(function() {$.ajax({url: 'http://localhost:5000/questions',type: 'GET',success: function(data) {var questions = $('#questions');questions.empty(); // 清空现有问题data.forEach(function(question) {questions.append('<div>' + question.Title + '</div>');});},error: function() {alert('无法加载问题列表！');}});});</script>
</head>
<body><div id="questions"></div>
</body>
</html>