asp.net在模态引导程序中显示gridview

Question

Bootstrap模态不会显示gridview，我不明白为什么？ 它不会触发gridview我需要为此更新面板吗？我尝试了一些解决方案，但看到效果不佳。

这里是我的代码aspx：

     <div id="Group" class="modal fade" role="dialog">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"  ></button>
                            <h4 class="modal-title"></h4>
                          </div>
                           <div class="modal-body">
     <asp:GridView runat="server" ID="grdiview" AutoGenerateColumns="false">
                              <Columns>
                                  <asp:TemplateField>
                                      <ItemTemplate>
                                          <asp:CheckBox ID="gvMODALCHECK" runat="server" />
                                      </ItemTemplate>
                                  </asp:TemplateField>
                      <asp:BoundField HeaderText="text1" DataField="GROUP" />
                      <asp:BoundField HeaderText="text2" DataField="NME" />
                              </Columns>
                              </asp:GridView>
                       < /div>
                < /div>
          < /div>
    < /div>
 < /div>

通过这里检查gridview的代码后面没有问题：

protected void gridview_GETGROUP()
        {
            try
            {
                string sqlCONSTR = ConfigurationManager.ConnectionStrings["conn"].ConnectionString;
                String sqlQUERY = "SELECT GROUP,NME FROM GROUP_MEMBER";
                SqlConnection sqlCONN = new SqlConnection(sqlCONSTR);
                SqlCommand sqlCMD = new SqlCommand(sqlQUERY, sqlCONN);
                SqlDataAdapter sqlADAP = new SqlDataAdapter(sqlCMD);
                DataTable dt = new DataTable();
                sqlADAP.Fill(dt);
                sqlCONN.Open();
                sqlCONN.Close();
                gridview.DataSource = dt;
                gridview.DataBind();

            }
            catch (Exception ex)
            {
                ClientScript.RegisterStartupScript(this.GetType(), "alert", Please Contact IT STAFF!!!')", true);
            }
        }

Answer 1

Bootstrap模式由jQuery函数（v3和v4 alpha）或标记属性（v4 beta）触发和显示。您正在使用Bootstrap 3，但我将v4版本包含在未来的读者中。

Bootstrap 3（v3.3.7）和Bootstrap 4直到v4 Alpha 6

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
});

https://getbootstrap.com/docs/3.3/javascript/#modals

Bootstrap 4 Beta（v4-beta-2）

jQuery变体：

$('#myModal').modal(options)

data-代码属性方式：

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

https://getbootstrap.com/docs/4.0/components/modal/#usage

Answer 2

您的案例可以有两种情况：

1-单击

如果您想通过点击调用模态，则步骤如下：

<a href="#" class="btn btn-info" data-toggle="modal" data-target="#myModal">To Details...</a>

<!-- Modal popup -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    ... gridview here...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

2- onload

现在，如果你想调用onload事件，你需要按照以下步骤操作：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {

        if ("<%=IsPostBack%>" == "False") {
            $("#myModal").modal('show');
        }
});

    <div id="myModal" class="modal fade">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">

            <h4 class="modal-title">Title of modal</h4><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">

...put the gridview here...

        </div>
    </div>
</div>