从 link 中为视图列表中的每个项目打开 bootstrap 模式 - MVC

Question

我有一个视图，它对数据库项目列表执行 for each 循环。我希望为每个打开一个模态的 "Details" 动作将每个项目的 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>

我试图避免将模式放在 for each 循环中，因为我担心必须为每条记录创建模式会非常低效。我也可能将模态中的局部视图称为错误。恐怕我没有练习，我相信有办法做到这一点

谢谢

Answer 1

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

这是我的一个应用程序的示例 - 请注意，某些 javascript 在外部 js 文件中，因此不能直接使用模型；为此，模型值存储在隐藏字段 and/or data-id、data-value 属性中

        @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 2

这是我的基于 "Nikki9696" 答案的解决方案 :) 效果很好。非常感谢你！ Nikki9696

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');
        },
    });
}

<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>
}

Answer 3

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

  <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 })">

这是一个类似的例子，但是 link 的样式是按钮而不是按钮：

  <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>

这是 list/table 中的一个：

<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>
    ...
  }

这是共享视图文件夹中的模态部分 (_ModalDialogPartial.cshtml)：

<div id="details" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h2 id="detailsHeader"></h2>
            </div>
            <div class="modal-body">
                <div id="detailsBody" ></div>
            </div>
            <div class="modal-footer">
                <a href="#" id="btnModalCancel" class="btn" data-dismiss="modal">Close</a>
                <input type="submit" id="btnModalSave" class="btn btn-primary" value="Save"/>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        $.ajaxSetup({ cache: false });

        initialiseModals();
    });

    function initialiseModals() {

      $('#details').on('shown.bs.modal', function () {
        $.validator.unobtrusive.parse($('#details'));
      });

        $(document).on('click', '*[data-modalload]', function () {
            var e = $(this);

            if (e.data('submittext') != undefined) {
              $('#btnModalSave').html(e.data('submittext'));
            } else $('#btnModalSave').html('Save');

            if (e.data('class') != undefined) {
                var cls = e.data('class');
                $('#details').removeClass(cls).addClass(cls);
            }
            if(e.data('modalsize') != undefined) {
              var size = e.data('modalsize');
              $('.modal-dialog').addClass('modal-' + size);
            }

            if (e.data('modalsubmit') == undefined) {
                $('#btnModalSave').hide();
                $('#btnModalCancel').addClass("btn-primary");
            }
            else {
                $('#btnModalSave').show();
                $('#btnModalCancel').removeClass("btn-primary");
                $('#btnModalSave').unbind('click').click(function (ctrl) {
                    $('#btnModalSave').attr('disabled', 'disabled');

                    ctrl.preventDefault();
                    var submitUrl = $('#' + e.data('modalsubmit')).attr("action");

                    var formData = $('#' + e.data('modalsubmit')).serialize();
                    $.post(submitUrl,
                        formData,
                        function (data, status, xhr) {
                            $('#btnModalSave').removeAttr('disabled');
                            $('#details').modal('hide');
                            if (e.data('modalsuccess') != undefined) {
                                eval(e.data('modalsuccess'));
                            }
                        }).error(function () {
                          $('#btnModalSave').prop('disabled', false);
                        });
                });
            }

            $('#detailsBody').load(e.data('modalload'), function () {
                $('#detailsHeader').html(e.data('modaltitle'));
                $('#details').modal('show');
                $.validator.unobtrusive.parse($('#detailsBody'));
            });
        });
    }

</script>

从 link 中为视图列表中的每个项目打开 bootstrap 模式 - MVC

Open bootstrap Modal from link for each item in a list in view - MVC

html

asp.net-mvc

partial-views

razor

bootstrap-modal