ASP.NET MVC：如何在JavaScript中实现页面间数据传递？附场景示例

嘿，针对你这个带汽车详情列表和联系按钮的场景，我整理了几个实用的方法，结合ASP.NET MVC的特性来实现数据传递：

1. 通过URL参数直接传递（最直观） #

这种方法适合数据量不大、不敏感的场景，因为参数会显示在地址栏里，ASP.NET MVC的路由也能轻松接收这些参数。

前端JavaScript代码： #

给你的按钮绑定点击事件，读取data-*属性的值，拼接到目标页面的URL上然后跳转：

// 给所有call按钮绑定点击事件
document.querySelectorAll('.call').forEach(btn => {
    btn.addEventListener('click', function() {
        // 读取data属性的值
        const model = this.dataset.model;
        const price = this.dataset.price;
        const carId = this.dataset.id;
        
        // 拼接URL（注意用encodeURIComponent处理特殊字符）
        const targetUrl = `/Contact/Call?model=${encodeURIComponent(model)}&price=${encodeURIComponent(price)}&id=${encodeURIComponent(carId)}`;
        
        // 跳转到目标页面
        window.location.href = targetUrl;
    });
});

后端ASP.NET MVC Action接收： #

在你的ContactController里写对应的Action来接收参数：

public ActionResult Call(string model, decimal price, string id)
{
    // 这里可以处理数据，比如传给视图
    ViewBag.CarModel = model;
    ViewBag.CarPrice = price;
    ViewBag.CarId = id;
    
    return View();
}

2. 用SessionStorage/LocalStorage临时存储数据 #

如果不想把数据暴露在URL里，或者数据量稍大，可以用浏览器的存储API临时保存，跳转到目标页面后再读取。

前端跳转页面时存储数据： #

document.querySelectorAll('.chat').forEach(btn => {
    btn.addEventListener('click', function() {
        // 把数据整理成对象
        const carData = {
            model: this.dataset.model,
            price: this.dataset.price,
            id: this.dataset.id
        };
        
        // 转成JSON字符串存在SessionStorage（会话级，关闭标签就消失）
        sessionStorage.setItem('selectedCar', JSON.stringify(carData));
        
        // 跳转到聊天页面
        window.location.href = '/Contact/Chat';
    });
});

目标页面读取数据： #

在聊天页面的JavaScript里读取存储的数据：

// 页面加载时读取数据
window.addEventListener('load', function() {
    const carDataStr = sessionStorage.getItem('selectedCar');
    if (carDataStr) {
        const carData = JSON.parse(carDataStr);
        
        // 在这里使用数据，比如显示在页面上
        console.log('Selected Car:', carData);
        document.getElementById('car-model').textContent = carData.model;
        
        // 用完可以清除存储，避免残留
        sessionStorage.removeItem('selectedCar');
    }
});

⚠️ 注意：如果需要持久化数据（比如关闭浏览器再打开还能拿到），可以换成localStorage，但要记得及时清理不需要的数据。

3. 通过动态表单POST提交（适合敏感数据） #

如果数据比较敏感（比如价格、用户联系方式），不想用GET方法暴露在URL里，可以动态创建表单，用POST方法提交到后端Action。

前端JavaScript代码： #

document.querySelectorAll('.call').forEach(btn => {
    btn.addEventListener('click', function() {
        // 创建隐藏表单
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '/Contact/Call'; // 对应后端POST Action
        
        // 添加隐藏字段
        const modelInput = document.createElement('input');
        modelInput.type = 'hidden';
        modelInput.name = 'model';
        modelInput.value = this.dataset.model;
        
        const priceInput = document.createElement('input');
        priceInput.type = 'hidden';
        priceInput.name = 'price';
        priceInput.value = this.dataset.price;
        
        const idInput = document.createElement('input');
        idInput.type = 'hidden';
        idInput.name = 'id';
        idInput.value = this.dataset.id;
        
        // 把字段加到表单里，再把表单加到页面
        form.appendChild(modelInput);
        form.appendChild(priceInput);
        form.appendChild(idInput);
        document.body.appendChild(form);
        
        // 提交表单
        form.submit();
        
        // 提交后移除表单
        document.body.removeChild(form);
    });
});

后端ASP.NET MVC POST Action接收： #

记得给Action加上[HttpPost]特性：

[HttpPost]
public ActionResult Call(string model, decimal price, string id)
{
    // 处理数据逻辑
    // ...
    
    return View();
}

这几种方法可以根据你的实际需求来选：简单场景用URL参数，不想暴露数据用存储API，敏感数据用POST表单提交~

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