.NET Core MVC点击更新局部视图模型数据的实现疑问

关于点击事件传递新模型数据 #

可以，但分两种情况处理：

• 如果只是前端层面传递并展示新数据，直接用JavaScript就能实现：在点击事件里定义新数据，手动更新局部视图对应的DOM元素即可。
• 如果要让局部视图基于新模型重新渲染（即用服务器端的模型生成全新的HTML结构），那必须和服务器交互——要么用Ajax请求控制器返回新的局部视图HTML，要么提交表单刷新整个页面。

能否不通过Ajax调用控制器实现更新？ #

可以，但只能做前端DOM直接修改，没法让服务器重新渲染局部视图：
.NET Core MVC的局部视图是服务器端渲染的，页面加载完成后，局部视图已经变成静态HTML，服务器端的模型数据不会自动同步到前端。所以不想调用控制器的话，只能通过JavaScript在点击事件里直接修改页面上的HTML元素，把新数据填充进去。

示例：前端直接修改DOM #

假设你的局部视图有个容器用于展示日期：

<!-- 局部视图 Partial/_PreferenceFormOne.cshtml -->
<div id="event-dates-list">
  @foreach(var date in Model)
  {
    <p>@date.ToString("yyyy-MM-dd")</p>
  }
</div>

主页面的按钮点击事件JS代码：

// 绑定按钮点击事件
document.querySelector('#update-dates-btn').addEventListener('click', function() {
  // 模拟新的日期数据（可前端生成或从其他前端存储获取）
  const newDates = ['2024-06-10', '2024-06-11', '2024-06-12'];
  
  // 生成新的HTML内容
  let newHtml = '';
  newDates.forEach(date => {
    newHtml += `<p>${date}</p>`;
  });
  
  // 替换局部视图容器内的内容
  document.getElementById('event-dates-list').innerHTML = newHtml;
});

若要基于新模型重新渲染局部视图（必须调用控制器） #

如果局部视图逻辑复杂，没法靠前端JS简单修改DOM，那必须通过Ajax请求控制器获取新的局部视图HTML：

1. 控制器添加对应Action：

public IActionResult GetUpdatedEventDates()
{
  // 从数据库/业务逻辑层获取新的EventDates数据
  var updatedDates = new List<DateTime>
  {
    DateTime.Now.AddDays(3),
    DateTime.Now.AddDays(4),
    DateTime.Now.AddDays(5)
  };
  
  // 返回局部视图和新模型
  return PartialView("Partial/_PreferenceFormOne", updatedDates);
}

2. 前端Ajax请求代码：

document.querySelector('#update-dates-btn').addEventListener('click', function() {
  fetch('/Home/GetUpdatedEventDates') // 替换为你的控制器实际路径
    .then(response => response.text())
    .then(html => {
      // 替换表单内的局部视图内容
      document.getElementById('preference-form1').innerHTML = html;
    });
});

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