如何将JavaScript localStorage值传入ASP.NET Core Razor Pages执行SQL查询

问题分析 #

你之前的代码错误核心在于：Razor语法（@开头的代码）是服务器端提前执行的，而JS函数是在浏览器端运行的，两者执行时机完全脱节，直接在JS里给服务器端变量赋值会破坏JS函数结构，导致addOwl函数未定义的错误。

下面是将localStorage购物车数据写入SQL Server的便捷实现方案：

1. 前端：正确获取并发送购物车数据 #

通过AJAX将localStorage中的JSON数据发送到后端API，避免服务器端与客户端代码混写：

function syncCartToServer() {
    // 读取localStorage中的购物车数据
    const cartJson = localStorage.getItem('productsInCart');
    if (!cartJson) {
        alert('购物车为空，无需同步');
        return;
    }

    // 发送POST请求到后端接口
    fetch('/api/Cart/Sync', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: cartJson,
    })
    .then(res => res.json())
    .then(result => {
        result.success ? alert('购物车同步成功') : alert('同步失败：' + result.msg);
    })
    .catch(err => {
        console.error('请求异常:', err);
        alert('网络请求失败');
    });
}

页面按钮绑定函数：

<button onclick="syncCartToServer()">同步购物车到服务器</button>

2. 后端：创建API接口接收并写入数据 #

以ASP.NET Core为例，先定义匹配商品结构的模型：

public class CartProduct
{
    public string Name { get; set; }
    public string Tag { get; set; }
    public decimal Price { get; set; }
    public int InCart { get; set; }
}

再创建API控制器处理请求：

[ApiController]
[Route("api/[controller]")]
public class CartController : ControllerBase
{
    private readonly string _dbConnStr;

    public CartController(IConfiguration config)
    {
        _dbConnStr = config.GetConnectionString("DefaultConnection");
    }

    [HttpPost("Sync")]
    public IActionResult SyncCart([FromBody] Dictionary<string, CartProduct> cartItems)
    {
        if (cartItems == null || cartItems.Count == 0)
        {
            return BadRequest(new { success = false, msg = "无有效购物车数据" });
        }

        try
        {
            // 使用参数化查询批量插入，防止SQL注入
            using var conn = new SqlConnection(_dbConnStr);
            conn.Open();
            foreach (var product in cartItems.Values)
            {
                var sql = @"INSERT INTO CartProducts (Name, Tag, Price, Quantity)
                            VALUES (@Name, @Tag, @Price, @Quantity)";
                using var cmd = new SqlCommand(sql, conn);
                cmd.Parameters.AddWithValue("@Name", product.Name);
                cmd.Parameters.AddWithValue("@Tag", product.Tag);
                cmd.Parameters.AddWithValue("@Price", product.Price);
                cmd.Parameters.AddWithValue("@Quantity", product.InCart);
                cmd.ExecuteNonQuery();
            }
            return Ok(new { success = true, msg = "数据同步完成" });
        }
        catch (Exception ex)
        {
            return StatusCode(500, new { success = false, msg = ex.Message });
        }
    }
}

3. 数据库表准备 #

在SQL Server中创建对应的数据表：

CREATE TABLE CartProducts (
    Id INT IDENTITY(1,1) PRIMARY KEY,
    Name NVARCHAR(100) NOT NULL,
    Tag NVARCHAR(50) NOT NULL,
    Price DECIMAL(10,2) NOT NULL,
    Quantity INT NOT NULL,
    SyncTime DATETIME DEFAULT GETDATE()
);

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