在ASP.NET MVC视图中向SelectedItem列表添加元素遇阻

你遇到的核心问题是：视图里定义的List<SelectedItem> selectedItems是服务器端内存对象，当页面渲染完成发送到浏览器后，这个对象就和前端完全脱节了——前端的点击事件是在浏览器环境中运行的，没法直接修改服务器端的内存列表。下面给你两种可行的解决方案，根据你的业务需求选择：

方案一：前端暂存选中项，提交表单时传给后端 #

这种方案适合需要批量提交选中项的场景，先在前端用JS存储选中内容，最终通过表单提交把数据传给后端解析。

1. 修改视图中的按钮，添加数据属性 #

给每个Select按钮绑定该行的Brand和Model值，方便JS获取：

<table class="table table-borderless table-hover table-striped table-sm mb-0">
  <tbody>
    @foreach (var item in Model.PhoneInfo) {
    <tr>
      <td>@Html.DisplayFor(modelItem => item.Brand)</td>
      <td>@Html.DisplayFor(modelItem => item.Model)</td>
      <td>
        <!-- 新增data-brand和data-model属性存储值 -->
        <button type="button" class="btn btn-sm btn-link select-btn"
                data-brand="@item.Brand.ToString()" <!-- 根据你的Brand类实际属性调整，比如item.Brand.Name -->
                data-model="@item.Model">
          Select
        </button>
      </td>
    </tr>
    }
  </tbody>
</table>

2. 添加前端JS代码管理选中项 #

用JS数组暂存选中内容，提交表单时转成JSON传给后端：

<script>
// 前端存储选中项的数组
let selectedItems = [];

// 绑定所有Select按钮的点击事件
document.querySelectorAll('.select-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const brand = this.dataset.brand;
    const model = this.dataset.model;
    
    // 避免重复添加相同项
    const isAlreadySelected = selectedItems.some(item => item.brand === brand && item.model === model);
    if (!isAlreadySelected) {
      selectedItems.push({ brand: brand, model: model });
      // 视觉反馈：标记已选中
      this.classList.add('disabled');
      this.textContent = 'Selected';
    }
  });
});

// 表单提交时，把选中项转成JSON存入隐藏字段
document.querySelector('form').addEventListener('submit', function(e) {
  const hiddenInput = document.createElement('input');
  hiddenInput.type = 'hidden';
  hiddenInput.name = 'SelectedItemsJson';
  hiddenInput.value = JSON.stringify(selectedItems);
  this.appendChild(hiddenInput);
});
</script>

3. 后端接收并解析数据 #

首先给你的ManualSelection模型添加一个接收JSON的属性：

public class ManualSelection
{
    public List<PhoneInfo> PhoneInfo { get; set; }
    // 新增属性接收前端传的选中项JSON
    public string SelectedItemsJson { get; set; }
}

然后在控制器的Post方法中解析成List<SelectedItem>：

using System.Text.Json;

[HttpPost]
public IActionResult Chart(ManualSelection model)
{
    // 解析JSON为服务器端列表
    List<SelectedItem> selectedItems = JsonSerializer.Deserialize<List<SelectedItem>>(model.SelectedItemsJson);
    
    // 在这里处理你的业务逻辑，比如保存到数据库等
    return View(model);
}

方案二：用AJAX实时提交选中项到后端 #

如果需要实时把选中项同步到服务器（比如不需要等待表单提交），可以用AJAX每次点击按钮就向后端发送请求，后端用Session或其他方式维护选中列表。

1. 前端AJAX请求代码 #

<script>
document.querySelectorAll('.select-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const brand = this.dataset.brand;
    const model = this.dataset.model;
    
    // 发送POST请求到后端接口
    fetch('/Chart/AddSelectedItem', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 防CSRF攻击，ASP.NET Core需要这个Token
        'X-CSRF-TOKEN': document.querySelector('input[name="__RequestVerificationToken"]').value
      },
      body: JSON.stringify({ Brand: brand, Model: model })
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        this.classList.add('disabled');
        this.textContent = 'Selected';
      }
    });
  });
});
</script>

2. 后端添加接收AJAX的Action #

using System.Text.Json;

// 先确保Session可用，Startup/Program.cs中配置了Session
[HttpPost]
public IActionResult AddSelectedItem(SelectedItem item)
{
    // 从Session获取已选中的列表，没有则新建
    var selectedItems = HttpContext.Session.Get<List<SelectedItem>>("SelectedItems") ?? new List<SelectedItem>();
    
    // 检查重复
    if (!selectedItems.Any(s => s.Brand.ToString() == item.Brand.ToString() && s.Model == item.Model))
    {
        selectedItems.Add(item);
        // 把更新后的列表存回Session
        HttpContext.Session.Set("SelectedItems", selectedItems);
    }
    
    return Json(new { success = true });
}

// 扩展方法：方便Session存储复杂对象
public static class SessionExtensions
{
    public static void Set<T>(this ISession session, string key, T value)
    {
        session.SetString(key, JsonSerializer.Serialize(value));
    }

    public static T Get<T>(this ISession session, string key)
    {
        var value = session.GetString(key);
        return value == null ? default : JsonSerializer.Deserialize<T>(value);
    }
}

关键原理说明 #

视图中的List<SelectedItem> selectedItems是服务器在渲染页面时创建的临时对象，页面加载到浏览器后，这个对象就被销毁了——前端代码运行在浏览器沙箱里，根本无法直接访问服务器内存里的对象。所以必须通过前端存储+表单提交或者AJAX异步请求的方式，把选中数据传递回服务器，再由服务器处理列表更新。

内容的提问来源于stack exchange，提问作者Wizard-of-Koz