Question

我有一个视图，它为数据库项列表上的每个循环执行一个操作。我希望每个人都有一个“细节”动作，打开一个模态，将每个项目的id传递给它，并在该模态的局部视图中显示该项目的详细信息。

到目前为止，我有以下

@foreach (var item in Model)
{
  <a href="#detailsModal" role="button" class="btn" data-toggle="modal">Details</a>
}

 <div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
                 <div class="modal-content">
                       <div class="modal-body">
@{Html.RenderAction("_PartialDetails", "ActivityAds", new { @id = "NEED TO PASS ID HERE" });}
                       </div>
              </div>
        </div>
   </div>

我试图避免将模态放在每个循环中，因为我担心必须为每个记录创建一个模态是非常低效的。我也可以将模态中的局部视图调用错误。我没有实践我害怕，我相信有办法做到这一点

谢谢

Answer 1

这是我的解决方案＆＃34; Nikki9696＆＃34;回答:)它完美无缺。非常感谢你！ Nikki9696

＆＃13;

function showDetails(clickedElement) {
    var dataid = $(clickedElement).attr("data-id");
    showDetailsAjax(dataid);
}

function showDetailsAjax(activityAdID) {
    var link = '@Url.Action("_PartialDetails", "ActivityAds", new { id = "-1"})'
    link = link.replace("-1", activityAdID);

    $.ajax({
        type: "GET",
        url: link,
        error: function(data)
        {},
        success: function (data) {
            $("#detailsModal .modal-body").html(data);
            $('#detailsModal').modal('show');
        },
    });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body"></div>
        </div>
    </div>
</div>

@foreach (var item in Model)
{
    <a onclick="showDetails(this);" id="activityAdDetails_@item.ad_id" data-id="@item.ad_id">Details</a>
}

＆＃13;

Answer 2

一种方法是使用ajax动态填充容器。

这是一个来自我的应用程序的示例 - 请注意，某些javascript位于外部js文件中，因此无法直接使用模型;为此目的，模型值存储在隐藏字段和/或data-id，数据值属性中

        @foreach (var assignment in Model.Assignments)
        {                
            <li role="presentation" id="assignmentsDetails_@assignment.AssignmentView.AssignmentViewId" data-id="@assignment.AssignmentView.AssignmentViewId">
                <a role="menuitem" onclick="selectCriteria(this);" title="@assignment.AssignmentView.AssignmentViewDescription">Criteria @criteriaNumber</a>
            </li>
            criteriaNumber++;
        }

的javascript

function selectCriteria(clickedElement) {
    var dataid = $(clickedElement).parent().attr("data-id");
    loadAssignmentDetails(dataid);
}

function loadAssignmentDetails(assignmentViewId) {
    $.ajax({
        type: "GET",
        url: Config.RootUrl + "Assignments/Detail/" + assignmentViewId + "/" + $("#AssignmentTypeValueId").val(),
        success: function (data) {
            $("#assignmentViewDetailsContainer").html(data);
        }
    });
}

Answer 3

我有一个替代方案，类似但不同，我觉得值得分享 - 我想通过属性标记来使用不显眼的jquery来实现同样的事情，所以我为模态定义了一个单独的局部视图，它就是＆＃39 ; s脚本，并将其包含在我的布局页面中，以便在每个其他视图中我需要做的就是添加标记以使用我在该部分脚本中构建的模态和功能。我已经为模态添加了功能，允许我指定在模态提交成功时调用的脚本等。从服务器检索对话框内容（通过调用返回局部视图的控制器方法 - 因此需要禁用ajax缓存）。下面是一个列表之外的示例，它在完成后调用javascript RefreshAll：

response.body().string()

这是一个类似的例子，但是从一个设为按钮的链接而不是一个按钮：

  <button class="btn btn-sm btn-success completeFixtureButton"
          data-submittext="Update" 
          data-modalsubmit="CompleteFixtureForm" 
          data-modaltitle="Fixture Completed"
          data-modalsuccess="RefreshAll();"
          data-modalload="@Url.Action("FixtureCompleted", new { fixtureId = fix.Id })">

列表/表格中的一个：

  <a class="btn btn-default" href="#"
     data-modalsubmit="editLeagueForm"
     data-modaltitle="Edit Season"
     data-modalsize="lg"
     data-modalload="@Url.Action("EditLeaguePartial", "League", new { leagueId = Model.Season.League.Id, seasonId = Model.Season.Id })"><span class="glyphicon glyphicon-white glyphicon-cog"></span>Season Settings</a>

这里是共享视图文件夹中的模态部分（_ModalDialogPartial.cshtml）：

<tbody id="clubList">
  @foreach (Player p in Model.Club.Players.OrderBy(p => p.LastName))
  {
    bool playerManager = Model.Club.Managers.Any(m => m.Id == p.Id);
    <tr>
      <td>
        <a href='#' data-modaltitle="@p.FullName" data-modalload="@Url.Action("ContactPlayerPartial", "Player", new { playerId = p.Id })">
          <img src="@Url.Action("ProfilePictureById", "Player", new { playerId = p.Id })" style="max-width:3em; margin-right:10px;" class="pull-left" />  @p.FullName
        </a>
      </td>
    </tr>
    ...
  }

从视图中的每个项目的链接打开引导模态 - MVC

3 个答案: