能否使用JavaScript为ASP.NET Core分部视图的ViewModel设置部分值？

方案1：前端直接赋值（适合数据无敏感信息、ViewModel字段较少的场景） #

需要修改原有代码两处：

1. 修改li标签的点击事件传参，把task对象序列化后传给js函数：

<li class="list-group-item list-group-item-action" onclick="openCurrentTaskModal(@Html.Raw(Json.Serialize(task)))">

2. 完善openCurrentTaskModal的赋值逻辑，按你分部视图内的字段对应赋值即可：

function openCurrentTaskModal(task) {
    // 替换下方选择器为你分部视图内对应字段的实际id/类选择器
    // 如果你用asp-for生成表单字段，默认id格式为「属性名」或「ViewModel类名_属性名」，可F12查看实际值调整
    $('#Task_Id').val(task.id);
    $('#Task_Title').val(task.title);
    $('#Task_Description').text(task.description);
    // 其余ViewModel字段按上述规则依次赋值

    $('#currentTaskModal').modal('show');
}

方案2：后端异步加载分部视图（适合数据敏感、字段较多的场景） #

这种方案不会把全量task数据暴露到前端源码，更安全，也不用手动处理前端字段匹配：

1. 新增后端接口返回渲染好的分部视图：

// TaskController中添加
public IActionResult LoadTaskModal(int taskId, Guid projectGuid)
{
    // 从数据库查询对应task组装ViewModel
    var task = _yourDbContext.Tasks.Find(taskId);
    var viewModel = new Taskly.Web.ViewModels.TaskViewModel
    {
        Id = task.Id,
        Title = task.Title,
        ProjectGuid = projectGuid,
        // 其余属性赋值
    };
    return PartialView("~/Views/Task/_CurrentTaskModalPartial.cshtml", viewModel);
}

2. 替换原有预渲染分部视图的代码为容器：

<!-- 删掉原来的<partial />标签，替换为下方容器 -->
<div id="taskModalContainer"></div>

3. 修改li点击事件仅传需要的参数：

<li class="list-group-item list-group-item-action" onclick="openCurrentTaskModal(@task.Id, '@Model.Guid')">

4. 修改js逻辑异步拉取渲染好的模态框再弹出：

function openCurrentTaskModal(taskId, projectGuid) {
    $.get('/Task/LoadTaskModal', {taskId: taskId, projectGuid: projectGuid}, function(modalHtml) {
        $('#taskModalContainer').html(modalHtml);
        $('#currentTaskModal').modal('show');
    });
}

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