简体   繁体   English

模态视图重新加载内容(Bootstrap MVC ASP.NET)

[英]Modal View Reload Content (Bootstrap MVC ASP.NET)

Aloha, I'm using Bootstrap v3.3.6 within ASP.NET MVC4 Application to display pop-ups using modal-views. 阿罗哈,我在ASP.NET MVC4应用程序中使用Bootstrap v3.3.6来使用模态视图显示弹出窗口。

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之类的

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

which triggers my script in my _Layout page: 这会触发我的_Layout页面中的脚本:

<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 最后是我的_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. 所有这些都是基于以下设计的: http : //www.codeproject.com/Tips/826002/Bootstrap-Modal-Dialog-Loading-Content-from-MVC-Pa并且工作得很好。 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) 重新加载模式内容(Twitter引导程序)
I got the feeling the problem is the refill of the #modal-container. 我感觉到问题是#modal-container的重新装满。 The links are completed by the script in the right way, as I can say by debugging in chrome. 链接是由脚本以正确的方式完成的,正如我可以通过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. 但是由于我使用选项卡(也依赖于Bootstrap),因此无法重新加载,因为我会放弃当前的选项卡选择。

I'm very new to web-developing so it would be great if you've got some ideas. 我是Web开发的新手,所以如果您有一些想法,那将是很棒的。

you can use 您可以使用

ModelState.Clear();

for clear the model state in your controller. 用于清除控制器中的模型状态。

hope it will helps you. 希望对您有帮助。

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

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