MVC Core中如何将锚点属性传递给Partial View调用？

看起来你正在ASP.NET Core MVC项目里实现点击锚点弹出带Partial View的模态框，需要把锚点对应的IdeaId传递给这个Partial View对吧？这里有几种实用的实现方案，我给你详细拆解：

方案1：AJAX动态加载带参数的Partial View（推荐） #

这种方式最灵活，不会因为数据量大生成冗余DOM，步骤如下：

1. 调整锚点代码，添加数据属性和点击事件 #

@foreach (var idea in Model.Ideas)
{
    <a href="javascript:void(0)" class="interested-btn" data-idea-id="@idea.IdeaId">Interested</a>
}

这里给锚点加了data-idea-id来存储对应的ID，同时用类名统一绑定点击事件。

2. 修改模态框结构，预留Partial View容器 #

<div class="modal fade" id="FormInterested" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
  <div class="modal-dialog">
    <!-- 空容器用来加载Partial View -->
    <div id="partial-view-wrapper"></div>
  </div>
</div>

3. 编写JavaScript处理点击和AJAX请求 #

$(document).ready(function() {
    $('.interested-btn').click(function() {
        // 获取当前锚点的IdeaId
        const ideaId = $(this).data('idea-id');
        
        // 发起AJAX请求，加载带参数的Partial View
        $.get('/Ideation/IdeaInterestedForm', { ideaId: ideaId }, function(html) {
            // 把返回的Partial View内容插入容器
            $('#partial-view-wrapper').html(html);
            // 显示模态框
            $('#FormInterested').modal('show');
        });
    });
});

4. 后端Action接收参数并返回Partial View #

public IActionResult IdeaInterestedForm(int ideaId)
{
    // 根据IdeaId构建对应的ViewModel（示例）
    var viewModel = new IdeaInterestedViewModel 
    { 
        IdeaId = ideaId,
        // 其他需要的属性
    };
    
    return PartialView("~/Views/Ideation/IdeaInterestedForm.cshtml", viewModel);
}

这样Partial View就能直接使用带IdeaId的ViewModel了。

方案2：模态框显示前更新参数（无需AJAX） #

如果不想用AJAX，可以在模态框显示前把IdeaId传递给Partial View的表单或隐藏域：

1. 锚点和模态框基础代码 #

@foreach (var idea in Model.Ideas)
{
    <a href="javascript:void(0)" class="interested-btn" data-idea-id="@idea.IdeaId">Interested</a>
}

<div class="modal fade" id="FormInterested" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
  <div class="modal-dialog">
    <!-- 先渲染空ViewModel的Partial View -->
    @Html.Partial("~/Views/Ideation/IdeaInterestedForm.cshtml", new IdeaInterestedViewModel())
  </div>
</div>

2. JavaScript更新参数 #

$(document).ready(function() {
    $('.interested-btn').click(function() {
        const ideaId = $(this).data('idea-id');
        
        // 更新Partial View里的隐藏域或表单字段（假设Partial View里有name="IdeaId"的输入框）
        $('#FormInterested input[name="IdeaId"]').val(ideaId);
        
        // 显示模态框
        $('#FormInterested').modal('show');
    });
});

这种方式适合Partial View是表单，只需要提交时带上IdeaId的场景。

方案3：为每个Idea生成独立模态框（仅适合少量数据） #

如果你的Idea数量很少，可以直接为每个Idea生成专属模态框，直接传递IdeaId：

@foreach (var idea in Model.Ideas)
{
    <a href="#FormInterested-@idea.IdeaId" data-toggle="modal">Interested</a>

    <!-- 每个Idea对应独立的模态框 -->
    <div class="modal fade" id="FormInterested-@idea.IdeaId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
      <div class="modal-dialog">
        @Html.Partial("~/Views/Ideation/IdeaInterestedForm.cshtml", new IdeaInterestedViewModel { IdeaId = idea.IdeaId })
      </div>
    </div>
}

缺点是数据量大时会生成大量DOM元素，影响页面性能，所以仅推荐小数据量场景。

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