[英]How to display detailsview from asp.net gridview using bootstrap's modal popup
[英]asp.net display gridview in modal bootstrap
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);
}
}
Bootstrap Modals由jQuery函数(v3和v4 alpha)或标签属性(v4 beta)触发和显示。 您正在使用Bootstrap 3,但我将v4版本包括在内,以供将来的读者使用。
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
});
https://getbootstrap.com/docs/3.3/javascript/#modals
jQuery变体:
$('#myModal').modal(options)
data-
标签属性方式:
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
您的案例有两种情况:
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">×</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">×</button>
</div>
<div class="modal-body">
...put the gridview here...
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.