asp.net 在Bootstrap 5模式中使用iframe和动态查询字符串显示另一个页面

bvhaajcl  于 2023-08-08  发布在  .NET
关注(0)|答案(1)|浏览(103)

我有一个我的新闻列表如下(例如这个按钮是阅读更多):

<button data-bs-toggle="modal" data-id="1" data-bs-target="#exampleModal">Readmore</button>
<button data-bs-toggle="modal" data-id="2" data-bs-target="#exampleModal">Readmore</button>
<button data-bs-toggle="modal" data-id="3" data-bs-target="#exampleModal">Readmore</button>
<button data-bs-toggle="modal" data-id="4" data-bs-target="#exampleModal">Readmore</button>
<button data-bs-toggle="modal" data-id="5" data-bs-target="#exampleModal">Readmore</button>
<button data-bs-toggle="modal" data-id="6" data-bs-target="#exampleModal">Readmore</button>

字符串
我有一个页面QuickView.aspx,我创建了我的设计展示。在页面加载中,我检查查询字符串中的id并显示所有信息。
我如何显示此页与选定的按钮阅读更多?
例如,我点击data-id=3的按钮,我如何将id=3传递给iframe标签,如下所示?
data-id是我在新闻数据库上的主键。
我的模态:

<div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">title news</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <iframe src="QuickView.aspx?id=3"></iframe>
            </div>
        </div>
    </div>
</div>

piwo6bdm

piwo6bdm1#

你可以用一点jQuery来做这件事。首先修改你的按钮并给予它们一个类。

<button type="button" class="ReadMoreButton" data-id="1">Readmore</button>

字符串
然后用类ReadMoreButton将click事件绑定到按钮,并使用它将ID设置为iframe的源代码,并以编程方式打开模态。

$('.ReadMoreButton').bind('click', function () {
    var $modal = $('#exampleModal');

    //find the iframe in the modal and set the source
    $modal.find('iframe').attr('src', 'QuickView.aspx?id=' + $(this).data('id'));

    //open the modal
    $modal.modal('show');
});

相关问题