如何在JavaScript中设置Razor变量？ASP.NET MVC+Vue实现方案

首先直接给结论：你当前的写法完全不可行。

为什么原方法不行？ #

Razor代码（带@的部分）是在服务器端执行的——当页面被渲染并发送到浏览器之前，所有Razor逻辑已经跑完了，@filterData的值在页面加载完成后就固定成静态内容了。而JavaScript是在客户端浏览器里执行的，这时候服务器早就把页面发过来了，你没法通过客户端的JS去修改服务器端的Razor变量——两者的执行时机、运行环境完全分离，根本不在一个频道上。

你写的这段JS里，@filterData = @newData这种写法，在服务器渲染时会直接被解析成静态文本，完全达不到“根据用户选择动态更新数据”的效果。

结合ASP.NET MVC + Vue.js的高效实现方案 #

既然用了Vue.js，我们可以利用它的前端数据绑定能力，配合后端提供API接口来实现动态数据加载，这是前后端分离思路下的标准做法，高效且易维护。

步骤1：后端编写API接口

在你的ShipmentController里添加一个返回JSON数据的Action，用来接收前端的条件参数，返回对应的数据：

public ActionResult GetShipmentsByCondition(string condition)
{
    var result = new List<YourShipmentModel>(); // 替换成你的实际数据模型
    switch(condition)
    {
        case "CMR not received":
            result = GetNoCmrs(new List<int>() { 1 }); // 调用你已有的方法
            break;
        case "Not invoiced":
            result = GetNotInvoicedShipments(); // 替换成你获取未开票数据的方法
            break;
        // 可根据需求添加更多条件分支
    }
    return Json(result, JsonRequestBehavior.AllowGet);
}

步骤2：前端Vue.js实现数据绑定与动态加载

在你的Razor视图里，用Vue管理前端状态，监听下拉选择变化，调用后端API更新数据：

<!-- 给页面容器加个ID，方便Vue挂载 -->
<div id="shipment-app">
    <!-- 下拉选择框，用Vue的v-model绑定选中值 -->
    <select v-model="selectedCondition" @change="loadShipmentsByCondition">
        <option value="CMR not received">CMR not received</option>
        <option value="Not invoiced">Not invoiced</option>
    </select>

    <!-- 数据展示区域，用Vue的v-for自动渲染数据 -->
    <div v-for="item in shipmentData" :key="item.id" class="shipment-item">
        <!-- 替换成你的实际数据字段，比如 {{ item.cmrNumber }} -->
        {{ item }}
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <!-- 引入Vue，也可以用项目本地的Vue文件 -->
<script>
new Vue({
    el: '#shipment-app',
    data: {
        selectedCondition: '',
        shipmentData: [] // 存储从后端获取的数据
    },
    methods: {
        loadShipmentsByCondition() {
            // 用fetch调用后端API，也可以用axios（更推荐，需提前引入）
            fetch(`@Url.Action("GetShipmentsByCondition", "Shipment")?condition=${this.selectedCondition}`)
                .then(response => response.json())
                .then(data => {
                    this.shipmentData = data; // 更新Vue数据，页面会自动重新渲染
                })
                .catch(error => console.error('加载数据失败:', error));
        }
    },
    // 可选：页面加载完成后默认加载初始数据
    mounted() {
        this.selectedCondition = "CMR not received";
        this.loadShipmentsByCondition();
    }
});
</script>

这种方案的优势

• 前后端职责清晰：后端专注提供数据接口，前端负责交互逻辑与数据展示
• Vue的响应式系统自动处理数据更新后的页面渲染，无需手动操作DOM
• 异步加载数据，用户体验更流畅，不会因数据加载阻塞页面

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