Question

所以我有一个表格会在我的模型中显示每个项目的行数，没什么大不了的。

     @foreach (var item in Model)
            {
              <tr>
                <td>@(String.Format("{0} {1}", item.FirstName, item.LastName))</td>
                <td>@item.Gender </td>
                <td>@item.Age </td>

...

但是，我的模型中也有收藏品，其中一个是教育。所以从本质上讲，个人资料可以显示他们所有的教育，高中，大学等。我选择在它的自己的模态中显示这个，并在行中添加一个按钮来扩展教育列表。

 <td> @if (item.Education != null){
                        <button class="btn btn-default btn-xs" data-toggle="modal" data-target="#eduModal">
                            <span class="glyphicon glyphicon-resize-full"></span>
                        </button>
                    }
                    else
                    {
                        <span>No Education Listed</span>
                    }
                </td>

所以我的问题是，我怎样才能将当前的item.education集合传递给模态？如果该计数为2，则只显示2条记录。我知道那里有一些我不知道的东西我只是无法弄清楚是什么。

正如您期望我现有的解决方案所以所有用户的所有教育都不是所选用的

 <!-- Education Modal -->
    <div class="modal fade" id="eduModal" tabindex="-1" role="dialog" aria-labelledby="eduModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="eduModalLabel">Education</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-hover">
                        <tr>
                            <th>School</th>
                            <th>School Type</th>
                            <th>Start Year</th>
                        </tr>
                        @foreach (var item in Model)
                        {
                            if (item.Education != null)
                            {
                                foreach (var e in item.Education)
                                {
                                    <tr>
                                        <td>@e.School</td>
                                        <td>@e.schoolType </td>
                                        <td>@e.startYear </td>
                                    </tr>
                                }
                            }
                        }
                    </table>
                </div>

            </div>
        </div>
    </div>

Answer 1

使用Jquery调用您的操作方法。让action方法返回绑定到更新模型的视图（使用更新的集合。然后在AJAX调用的成功函数上替换模态的内容。

您还可以将模态的内容设为分部类，让控制器返回部分类并让jquery更新内容。

Answer 2

Bootstrap docs向您展示了如何执行此操作：

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

你确实把它放在你的for循环中，所以它为每个项目重复那个代码，用你想要显示的当前项目的教育信息来填充模态体。

你需要摆弄的唯一东西是按钮的data-target和模态的id。您需要为每次迭代分配一些唯一的东西。例如，您可以使用data-target="#EducationModal@(item.Id)"和id="EducationModal@(item.Id)"等内容。

Answer 3

如果我是你，我在点击按钮的情况下进行ajax调用，调用一个收到所选id的ActionResult并返回一个带有教育信息的部分。然后用jquery将结果放入Modal中。

如何使用bootstrap将集合传递给MVC中的Modal

3 个答案: