将其结合在一起-ASP.NET与Bootstrap 3.0
本文关键字:Bootstrap NET -ASP 结合 在一起 | 更新日期: 2024-10-24 18:07:12
我有一个ASP.NET项目(非MVC),我也在使用Bootstrap 3.0。这是我第一次使用这种组合,需要一些指导。
我有一个带按钮栏的网格视图。现在,我的网格和引导表格式以及它与数据表的绑定都显示得很好,没有问题。
接下来,我想点击Buttonfield列中的按钮来启动一个模式窗口,并根据打开它的行按钮的唯一ID显示一个模式。
我真的不知道如何将这一切与ASP.NET和Bootstrap联系在一起。HTML文字?动态ASP.NET面板?是否有回发对我来说并不重要,我真的只是想要一些关于如何将这些联系在一起的指导,甚至伪代码。
由于OP特别请求bootstrap帮助。。。
您应该浏览modals的引导程序文档http://getbootstrap.com/javascript/#modals
如果你是否使用MVC,这没有什么区别,你不需要做任何形式的post-back来显示模态。
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" />
将触发id为myModal的元素显示。
在这个jsfiddle中使用bootstrap自己的演示代码演示了打开和关闭模态。
对于问题的第二部分,这个更新的jsfiddle展示了如何使用按钮单击事件在模态中设置值。您可以在该事件处理程序中执行其他操作,如向后端获取或发送数据,或更改模态中的其他元素。
对于您的情况,您希望在单个事件处理程序中处理所有按钮单击,但可以将id存储在按钮元素的自定义属性中。我喜欢使用自定义属性,而不是从名称、id或类属性进行解析。这就是引导程序约定。
$(function() {
$('button.btn').on('click', function() {
var value = $(this).attr('data-value')
$('div.modal').find('#target').text(value);
});
});
在这里,我详细介绍了如何从单击的按钮实例中获取自定义属性值。
张贴你迄今为止所拥有的,以及你仍然无法发挥作用的内容。
这也不应该用C#或asp.net来标记,因为这是无关的。
您可能需要一个简单的js函数来处理这一问题(正如mike所提到的,这与使用或不使用bootstrap无关,因为它只是一些css的东西):
var RunDialog;
$(document).ready(function () {
RunDialog = $("#Id").dialog();
});
您可以将ASP.Net Ajax ModalPopup用于ASP.Net Web窗体。您可以使用ModelPopup搜索许多关于GridView的示例。
GridView ItemTemplate 中的ModalPopupExtender
我想点击Buttonfield列中的按钮启动模态窗口,并根据中的唯一ID显示模态打开它的行按钮。
ModalPopup应该与Bootstrap一起使用。