繁体   English   中英

Twitter Bootstrap Modal仅加载一次内容

[英]Twitter Bootstrap Modal is only loading content once

我正在使用Twitter引导程序模型在asp.net mvc中加载我的不同视图,但是模态仅加载一次,因此,如果我单击链接,引导程序模态将显示正确的视图,但是如果我随后单击另一个链接仍然显示先前视图的模式,我必须重新加载页面以再次单击以显示不同的内容。

这些是呼叫者页面中的链接:

 <a href="/Categorias/Details/@item.IdCategoria" data-toggle="modal" data-target="#pageModal"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;Detalle</a>
 <a href="/Categorias/Edit/@item.IdCategoria" data-toggle="modal" data-target="#pageModal"><span class="glyphicon glyphicon-pencil"></span>&nbsp;Editar</a>

这是调用者页面中的模式:

    <!-- Start - Modal -->
    <div class="modal fade" id="pageModal" tabindex="-1" role="dialog" aria-labelledby="pageModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
        </div>
      </div>
    </div>
    <!-- End - Modal -->

这是链接调用的视图之一:

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;   </button>
    <h4 class="modal-title" id="imageModalLabel">@ViewBag.Title</h4>
</div>
<div class="modal-body">
    <ul class="list-group">
        <li class="list-group-item">@Html.LabelFor(model => model.NombreCategoria)<span class="badge">@Html.DisplayFor(model => model.NombreCategoria)</span>
        </li>
    </ul>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>

希望有人可以帮助我。 谢谢! :)

我用来获取每个链接的数据,并借助iFrame将其加载到模型中

 <a href="#" onclick="javascript:GetMyPageData('+ @Model.Id+')" > Link 1</a>

JS

  function GetMyPageData(Id) {
        var url = '@Url.Action("Action", "Controller")' + '?id=' + Id
        $('#pageModal').on('show', function () {
            $('#page_model_data').attr("src", url);
        });
        $('#pageModal').modal({ show: true });

    }

主视图。 模特座

<div id="pageModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="pageModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body container-fluid" style="height: 450px; overflow: hidden;">
                <iframe id="page_model_data" src="" scrolling="no" style="zoom: 0.60; position: relative;"
                    frameborder="0" width="100%" height="100%"></iframe>
            </div>
        </div>
    </div>
</div>

加载到iFrame src的局部视图

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;   </button>
    <h4 class="modal-title" id="imageModalLabel">@ViewBag.Title</h4>
</div>
<div class="modal-body">
    <ul class="list-group">
        <li class="list-group-item">@Html.LabelFor(model => model.NombreCategoria)<span class="badge">@Html.DisplayFor(model => model.NombreCategoria)</span>
        </li>
    </ul>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM