1

I'm using a twitter bootstrap model to load my differents views in asp.net mvc, but the modal is only loading once, so if I click in a link the bootstrap modal is showing the right view, but if I then click in another link the modal still showing the previous view and I have to reload the page to click again for showing something different.

These are the links in the caller page:

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

This is the modal in the caller page:

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

This is one of the views called by the links:

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

Hoping someone can help me. Thanks! :)

Ignacio Berra
  • 63
  • 7

1 Answers1

0

I use to fetch data for each link and load it in a model with the help of 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 });

    }

Main View. Model Place Holder

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

Partial View for loading into 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>
Murali Murugesan
  • 22,423
  • 17
  • 73
  • 120
  • Thanks Murali, it worked but I resolved it using this: http://stackoverflow.com/questions/18220462/how-to-show-a-url-in-bootstrap-modal-dialog-on-button-click – Ignacio Berra Mar 17 '14 at 23:08