ASP.NET MVC Core 2.0：DOM与SQL Server无刷新传参方案及示例需求

哥们我太懂你这种转框架的痛苦了！之前WebForms那套无刷新玩法顺手得很，转MVC Core突然没了UpdatePanel，找个能直接跑的新手例子真的费神。下面给你整一个完全对应需求的示例：无刷新实现前端和SQL Server的双向数据传输，代码极简，跟着抄就能跑起来。

核心思路 #

用jQuery AJAX替代UpdatePanel的无刷新能力，用普通的<input type="hidden">（对应你之前的HiddenField）或者直接在AJAX请求里传参，后端写控制器Action作为接口，用EF Core操作SQL Server，最后返回JSON给前端更新页面——全程无页面刷新！

第一步：准备SQL Server表 #

先在你的SQL Server里建个简单测试表，比如叫UserInfo：

CREATE TABLE UserInfo (
    Id INT PRIMARY KEY IDENTITY(1,1),
    Name NVARCHAR(50) NOT NULL,
    Age INT NOT NULL
)

第二步：配置项目依赖 #

打开NuGet包管理器，安装这两个包（新手直接在包管理器控制台输命令就行）：

Install-Package Microsoft.EntityFrameworkCore.SqlServer
Install-Package Microsoft.EntityFrameworkCore.Tools

第三步：创建数据模型和DbContext #

1. 在项目里新建Models文件夹，添加UserInfo.cs：

public class UserInfo
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

2. 新建Data文件夹，添加AppDbContext.cs：

using Microsoft.EntityFrameworkCore;
using YourProjectName.Models; // 替换成你的项目名

public class AppDbContext : DbContext
{
    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
    {
    }

    public DbSet<UserInfo> UserInfos { get; set; }
}

3. 在Startup.cs里配置DbContext（找到ConfigureServices方法，加这段）：

services.AddDbContext<AppDbContext>(options =>
    options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

4. 在appsettings.json里添加SQL连接字符串：

"ConnectionStrings": {
    "DefaultConnection": "Server=你的SQL服务器名;Database=你的数据库名;Trusted_Connection=True;MultipleActiveResultSets=true"
}

第四步：写控制器 #

新建一个HomeController（或者用默认的），添加两个Action：一个存数据，一个取数据，都返回JSON：

using Microsoft.AspNetCore.Mvc;
using YourProjectName.Data;
using YourProjectName.Models;

public class HomeController : Controller
{
    private readonly AppDbContext _db;

    // 构造函数注入DbContext
    public HomeController(AppDbContext db)
    {
        _db = db;
    }

    // 主页视图
    public IActionResult Index()
    {
        return View();
    }

    // 保存数据到SQL（无刷新）
    [HttpPost]
    public JsonResult SaveUser(string userName, int userAge)
    {
        var newUser = new UserInfo { Name = userName, Age = userAge };
        _db.UserInfos.Add(newUser);
        _db.SaveChanges();
        return Json(new { Success = true, Message = "数据保存成功！", UserId = newUser.Id });
    }

    // 从SQL获取数据（无刷新）
    [HttpGet]
    public JsonResult GetLatestUser()
    {
        var latestUser = _db.UserInfos.OrderByDescending(u => u.Id).FirstOrDefault();
        return Json(latestUser);
    }
}

第五步：写视图（Index.cshtml） #

这个视图就是前端页面，包含隐藏字段、操作按钮、结果显示区，用jQuery AJAX实现无刷新交互：

@{
    ViewData["Title"] = "无刷新双向传数据示例";
}

<h1>WebForms UpdatePanel替代方案</h1>

<!-- 对应你之前的HiddenField，这里用普通隐藏框，也可以用输入框让用户输入 -->
<input type="hidden" id="hiddenUserName" value="张三" />
<input type="hidden" id="hiddenUserAge" value="25" />

<!-- 操作按钮 -->
<button id="btnSave">保存数据到SQL（无刷新）</button>
<button id="btnGet">获取最新数据（无刷新）</button>

<!-- 结果显示区 -->
<div id="resultArea" style="margin-top:20px; padding:10px; border:1px solid #ccc;"></div>

<!-- 引入jQuery（新手用CDN最方便） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        // 保存按钮点击事件
        $("#btnSave").click(function () {
            // 从隐藏字段取数据
            var userName = $("#hiddenUserName").val();
            var userAge = $("#hiddenUserAge").val();

            // AJAX无刷新请求后端
            $.ajax({
                url: "/Home/SaveUser",
                type: "POST",
                data: { userName: userName, userAge: userAge },
                success: function (response) {
                    // 更新页面结果区，无刷新
                    $("#resultArea").html(`<p style="color:green;">${response.Message} 新用户ID：${response.UserId}</p>`);
                },
                error: function () {
                    $("#resultArea").html("<p style='color:red;'>保存失败！</p>");
                }
            });
        });

        // 获取按钮点击事件
        $("#btnGet").click(function () {
            $.ajax({
                url: "/Home/GetLatestUser",
                type: "GET",
                success: function (user) {
                    if (user) {
                        $("#resultArea").html(`<p>最新用户：姓名${user.name}，年龄${user.age}，ID${user.id}</p>`);
                        // 也可以把数据塞回隐藏字段，实现双向同步
                        $("#hiddenUserName").val(user.name);
                        $("#hiddenUserAge").val(user.age);
                    } else {
                        $("#resultArea").html("<p>暂无数据！</p>");
                    }
                },
                error: function () {
                    $("#resultArea").html("<p style='color:red;'>获取失败！</p>");
                }
            });
        });
    });
</script>

测试步骤 #

1. 确保SQL Server服务正常，连接字符串配置正确
2. 启动项目，打开主页
3. 点击「保存数据到SQL」按钮：看结果区显示成功，去SQL Server查UserInfo表，确实新增了数据，页面完全没刷新
4. 点击「获取最新数据」按钮：结果区显示最新用户，同时隐藏字段的值也被更新了，同样无刷新

关键要点解释 #

1. 无刷新核心：jQuery AJAX异步请求后端，页面不会重载，完全替代UpdatePanel的局部刷新
2. 双向传输：前端把隐藏字段的数据传给后端存SQL，后端把SQL数据返回给前端，还能更新隐藏字段，完美对应你之前的需求
3. 新手友好：没有复杂配置，所有代码都是极简版，抄过去改改项目名和连接字符串就能跑

内容的提问来源于stack exchange，提问作者user4231600