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 Modals由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事件，則需要執行以下步驟：

 <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>