MVC使用Ajax携带ID参数和Model追加加载Partial View的问题咨询

现有代码核心问题 #

• 重复ID问题：循环渲染表格行时，所有Add按钮都用了固定id="btnLoad"，HTML中ID必须唯一，导致只有第一行的按钮能触发点击事件，也无法正确获取对应行的ID
• 传参逻辑错误：前端直接将C#的@Model赋值给JS变量，会直接输出对象的ToString()结果，根本无法将完整的模型列表传递到后端，完全没必要传递整个模型，只需要传选中行的ID即可，后端可以直接根据ID从Sharepoint拉取对应数据
• 没有去重逻辑：没有判断当前ID是否已经加载过，会重复追加同一个ID的子数据
• 地址生成不规范：直接写死Ajax请求地址，项目部署路径变化时会请求失败

修改方案 #

1. 后端Controller修改 #

不需要接收整个模型列表，只接收ID参数，自行拉取对应数据即可，测试阶段可以把测试数据放到静态变量里保证请求时能访问：

public class HomeController : Controller
{
    // 测试用静态数据源，实际场景替换为Sharepoint查询逻辑+关联子数据查询逻辑
    private static List<myModel> TestModel = new List<myModel>()
    {
        new myModel { ID = 1, Name = "Try1", Value = 17 },
        new myModel { ID = 2, Name = "Try2", Value = 22 }
    };
    
    public ActionResult Index()
    {
        return View(TestModel);
    }
    
    [HttpPost]
    public ActionResult LoadRest(int id)
    {
        // 实际场景：这里先根据id查Sharepoint获取对应主数据，再查业务库获取关联子数据，组装成模型传给局部视图
        var element = TestModel.FirstOrDefault(x => x.ID == id);
        // 可扩展element为包含子数据的模型，局部视图对应修改渲染子数据即可
        return PartialView("_testPartial", element);
    }
}

2. Index视图修改 #

修正ID重复问题，给按钮绑定自定义属性存当前行ID，增加去重逻辑：

@model List<myModel>
@{ 
  ViewBag.Title = "Home";
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<h2>Partial Views - Demo</h2>

<table class="table">
  <tr>
    <th></th>
    <th>ID</th>
    <th>Name</th>
  </tr>
@foreach (var Item in Model)
{
  <tr>
    <td>
      <!-- 用class绑定事件，data-id存当前行ID -->
      <input class="btnLoad" type="button" value="Add" data-id="@Item.ID"/>
    </td>
    <td>
      @Html.DisplayFor(modelItem => Item.ID)
    </td>
    <td>
      @Html.DisplayFor(modelItem => Item.Name)
    </td>
  </tr>
}
</table>
<br />

<!-- 局部视图容器 -->
<table id="partialContainer">
    <!-- 提前加表头，和局部视图的tr匹配 -->
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Value</th>
    </tr>
</table>

<script type="text/javascript">
  // 存储已经加载过的ID，用于去重
  const loadedIds = new Set();

  $(document).ready(function () {
    // 绑定class的点击事件
    $('.btnLoad').click(function () {
      // 获取当前按钮绑定的行ID
      const rowId = $(this).data('id');
      
      // 去重判断，已经加载过的直接返回
      if (loadedIds.has(rowId)) {
          alert('该数据已加载，请勿重复添加');
          return;
      }

      $.ajax({
        url: '@Url.Action("LoadRest", "Home")', // 用Url.Action生成地址更可靠
        type: 'post',
        data: {id: rowId},
        success: function (result) {
            $('#partialContainer').append(result);
            // 把ID加入已加载集合
            loadedIds.add(rowId);
        },
        error: function (e) {
            console.error('加载失败', e);
        }
      });
    });
});
</script>

3. _testPartial局部视图无需修改，原有结构可以正常渲染 #

如果后续需要展示关联子数据，只需要把返回的模型改成包含子数据集合的结构，局部视图里循环渲染子数据即可。

扩展优化建议 #

• 子数据量较大的话，可以在局部视图里做分页、懒加载，避免单次加载数据过多
• 测试通过后把后端的静态测试数据源替换成实际的Sharepoint查询逻辑+业务库关联子数据查询逻辑即可
• 可以给加载过程加loading状态，提升用户体验

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