无需提交/刷新实现数据库读写，同时执行客户端JavaScript逻辑

看起来你已经搞定了前端的交互逻辑，现在要把SQL Server的读写操作加进去对吧？结合你已有的ASP.NET/C#/Razor页面，咱们可以按以下步骤来实现，既保留原有客户端功能，又完成数据库交互：

1. 保留原有客户端逻辑，新增后端调用触发 #

先把你现有的客户端JS逻辑原封不动保留，在提交按钮的事件处理函数里，完成前端计算、表格更新、地图标记添加后，再发起对后端Razor页面的请求。如果后端读写不依赖前端计算结果，也可以并行发起请求（不过一般建议先完成前端操作，再处理后端）。

示例代码：

document.getElementById('submitBtn').addEventListener('click', async function(e) {
  e.preventDefault();
  
  // 原有客户端操作：计算、更新表格、添加地图标记
  calculateFormData();
  updateResultsTable();
  addMarkerToGoogleMap();
  
  // 新增：调用后端接口完成SQL读写
  try {
    await syncDataWithBackend();
    alert('数据已同步到数据库！');
  } catch (err) {
    console.error('同步失败:', err);
    alert('数据同步出错，请重试');
  }
});

2. 在Razor页面编写SQL读写接口 #

利用你已有的ASP.NET/C#/Razor页面，添加一个处理POST请求的方法，用来接收前端数据，执行SQL Server的读写操作。这里可以用Entity Framework Core或者原生SqlClient，看你习惯哪种方式。

示例（用Dapper简化数据库操作） #

首先确保你已经安装了Dapper包（Install-Package Dapper），然后在Razor页面的.cs文件里：

using Dapper;
using Microsoft.AspNetCore.Mvc;
using System.Data.SqlClient;

public class YourRazorPageModel : PageModel
{
    private readonly IConfiguration _configuration;

    // 通过依赖注入获取配置（连接字符串存在appsettings.json里）
    public YourRazorPageModel(IConfiguration configuration)
    {
        _configuration = configuration;
    }

    // 处理前端POST请求，写入数据并返回读取结果
    public async Task<IActionResult> OnPostSyncDataAsync(FormDataDto formData)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        string connectionString = _configuration.GetConnectionString("DefaultConnection");
        
        // 1. 写入SQL Server
        using (var conn = new SqlConnection(connectionString))
        {
            await conn.OpenAsync();
            string insertSql = @"INSERT INTO FormRecords (InputValue, CalculatedResult, LocationLat, LocationLng)
                                VALUES (@InputVal, @CalcResult, @Lat, @Lng)";
            await conn.ExecuteAsync(insertSql, formData);
        }

        // 2. 读取最新数据返回给前端（可选，根据你的需求）
        var latestRecord = await GetLatestRecord(connectionString);
        return new JsonResult(latestRecord);
    }

    // 从数据库读取最新记录的辅助方法
    private async Task<FormRecordDto> GetLatestRecord(string connectionString)
    {
        using (var conn = new SqlConnection(connectionString))
        {
            await conn.OpenAsync();
            string selectSql = @"SELECT TOP 1 * FROM FormRecords 
                                ORDER CreatedAt DESC";
            return await conn.QueryFirstOrDefaultAsync<FormRecordDto>(selectSql);
        }
    }

    // 定义接收前端数据的DTO
    public class FormDataDto
    {
        public string InputVal { get; set; }
        public decimal CalcResult { get; set; }
        public double Lat { get; set; }
        public double Lng { get; set; }
    }

    // 定义返回前端的DTO
    public class FormRecordDto : FormDataDto
    {
        public int Id { get; set; }
        public DateTime CreatedAt { get; set; }
    }
}

别忘了在appsettings.json里配置SQL连接字符串：

"ConnectionStrings": {
    "DefaultConnection": "Server=你的SQL服务器地址;Database=你的数据库名;User Id=用户名;Password=密码;TrustServerCertificate=True;"
}

3. 前端编写后端请求函数 #

在客户端JS里实现syncDataWithBackend函数，把表单数据或计算后的数据传给后端，同时处理返回结果。注意Razor页面默认启用CSRF保护，必须带上验证令牌。

示例代码：

async function syncDataWithBackend() {
    // 收集需要传给后端的数据（比如表单输入、计算结果、地图标记坐标）
    const postData = {
        inputVal: document.getElementById('userInput').value,
        calcResult: calculatedValue, // 你前端计算出的结果
        lat: currentMarkerLat, // 地图标记的纬度
        lng: currentMarkerLng // 地图标记的经度
    };

    // 获取Razor自动生成的CSRF令牌
    const csrfToken = document.querySelector('input[name="__RequestVerificationToken"]').value;

    const response = await fetch('/YourRazorPagePath', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'RequestVerificationToken': csrfToken
        },
        body: JSON.stringify(postData)
    });

    if (!response.ok) {
        throw new Error(`请求失败：${response.statusText}`);
    }

    // 如果后端返回了数据，可以在这里处理（比如更新前端显示）
    const latestRecord = await response.json();
    console.log('最新数据库记录:', latestRecord);
}

4. 关键注意事项 #

• CSRF保护：如果你的前端表单是用Razor的<form>标签生成的，会自动包含__RequestVerificationToken隐藏字段；如果是纯HTML表单，需要手动添加这个字段（可以在Razor页面里用@Html.AntiForgeryToken()生成）。
• 异步处理：用async/await确保后端请求完成后再执行后续逻辑，避免出现数据不同步的问题。
• 错误处理：前端和后端都要添加错误捕获逻辑，给用户清晰的反馈，同时方便调试。
• 数据验证：后端一定要验证传入的数据合法性，避免SQL注入和无效数据入库。

这样操作后，用户点击提交按钮时，就会先完成你原来的客户端操作，再把数据同步到SQL Server，还能根据后端返回的结果更新前端内容。

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