3

Aloha, I'm using Bootstrap v3.3.6 within ASP.NET MVC4 Application to display pop-ups using modal-views.

Example for my modal:

<div class="modal-contents modal-view content-wrapper">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
    <div class="modal-body content-wrapper">
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#approve-btn').click(function () {
            $('#modal-container').modal('hide');
        });
    });
</script>

To load the modal I use Html.ActionLink like

@Html.ActionLink("SomeText", "SomeAction", "SomeController", null , new { @class="modal-link"})

which triggers my script in my _Layout page:

<script type="text/javascript">
     $(function () {
         // Initialize modal dialog
         // attach modal-container bootstrap attributes to links with .modal-link class.
         // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
         $('body').on('click', '.modal-link', function (e) {
             e.preventDefault();
             $(this).attr('data-target', '#modal-container');
             $(this).attr('data-toggle', 'modal');
             console.log(this);
         });
         // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
         $('body').on('click', '.modal-close-btn', function () {
             $('#modal-container').modal('hide');
         });
         //clear modal cache, so that new content can be loaded

         $('.modal').on('hidden.bs.modal', function () {
             $(this).removeData('bs.modal');
         });

         $('#CancelModal').on('click', function () {
             return false;
         });
     });
</script>

and finally the placeholder in my _Layout 

<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-content modal-view">
    </div>
</div>

This all is designed relying on this: http://www.codeproject.com/Tips/826002/Bootstrap-Modal-Dialog-Loading-Content-from-MVC-Pa and worked just fine. Until I tried to open a modal after I already have opened one in the same view. Then I would find the modal to contain the same data as before.
After trying all suggestions from:
Reload content in modal (twitter bootstrap)
I got the feeling the problem is the refill of the #modal-container. The links are completed by the script in the right way, as I can say by debugging in chrome.
If I reload the whole page the modal-view accepts new content. But since I use tabs (also relying on Bootstrap) reloading isn't an option because I would loose the current tab selection.

I'm very new to web-developing so it would be great if you've got some ideas.

M. Guettler
  • 31
  • 2
  • What is the scenario where you are trying to open the modal with the same modal with different content already open? That is a somewhat unusual scenario. – stephen.vakil Apr 13 '16 at 14:22
  • Possible duplicate of: http://stackoverflow.com/questions/12286332/twitter-bootstrap-remote-modal-shows-same-content-everytime – stephen.vakil Apr 14 '16 at 16:27
  • It was badly described by me. I meant to close the modal and reopen it with another link (and data) from my parent view. I'm displaying a Webgrid and try to display different details. I already tried the most solutions of the question mentioned by you. But I will have a look for some of the spare ones. – M. Guettler Apr 19 '16 at 12:27

1 Answers1

-1

you can use

ModelState.Clear();

for clear the model state in your controller.

hope it will helps you.

Sunil Kumar
  • 3,142
  • 1
  • 19
  • 33