将其结合在一起-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面板？是否有回发对我来说并不重要，我真的只是想要一些关于如何将这些联系在一起的指导，甚至伪代码。

将其结合在一起-ASP.NET与Bootstrap 3.0

由于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一起使用。

相关文章：