Question

我有一个ASP.NET项目（非MVC），我也在使用Bootstrap 3.0。这是我第一次使用这种组合，需要一些指导。

我有一个带有buttonfield列的gridview。现在一切都显示我的网格和Bootstrap表格式以及它与我的数据表的绑定 - 没有问题。

接下来，我想点击Buttonfield列中的按钮来启动模态窗口，并根据打开它的行按钮显示一个唯一ID。

我真的不知道如何将这一切与ASP.NET和Bootstrap结合在一起。 HTML文字？动态ASP.NET面板？对我来说无论是否有回发都没关系，我真的只是喜欢一些指导，甚至伪代码如何将它们捆绑在一起。

Answer 1

由于OP特别要求 bootstrap 帮助...

您应该查看模态http://getbootstrap.com/javascript/#modals

的引导文档

如果你使用MVC没有任何区别，你不需要做任何回发来显示模态。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" />

将显示带有id myModal的元素。

在此jsfiddle中使用bootstrap自己的演示代码演示了打开和关闭模态。

对于问题的第二部分，此updated jsfiddle显示了如何使用按钮单击事件在模态中设置值。您可以在该事件处理程序中执行其他操作，例如获取或将数据发送到后端或更改模式中的其他元素。

对于您的情况，您可能希望处理单个事件处理程序中的所有按钮单击，但您可以将id存储在button元素的自定义属性中。我喜欢使用自定义属性，而不是从name，id或class属性中解析。这是引导程序约定。

$(function() {
  $('button.btn').on('click', function() {
    var value = $(this).attr('data-value')
    $('div.modal').find('#target').text(value);
  });
});

这里我详细介绍了如何从点击的按钮实例中获取自定义属性值。

发布你到目前为止的内容以及你仍然无法正常工作的内容。

这也不应该用C＃或asp.net标记，因为这是无关紧要的。

Answer 2

你可能需要一个简单的js函数来处理它（因为mike提到这与使用或不使用bootstrap无关，因为它只是一些css的东西）：

var RunDialog;
$(document).ready(function () {
    RunDialog = $("#Id").dialog();
});

Answer 3

您可以将ASP.Net Ajax ModalPopup用于ASP.Net Web表单。您可以使用ModelPopup google很多关于GridView的示例。

ModalPopupExtender inside a GridView ItemTemplate

我想点击Buttonfield列中的按钮启动模态窗口并根据来自的唯一ID显示模态打开它的行按钮。

ModalPopup应该与Bootstrap一起使用。

将它们捆绑在一起 - ASP.NET与Bootstrap 3.0

3 个答案: