我正在开发asp.net网络表单。我试图通过bootstrap的模态窗口使用detailsview控件显示gridview中所选行的详细信息。以下是我的代码。单击“详细信息”按钮时,页面将灰显,但不显示任何模态弹出窗口或数据。
<form id="form1" runat="server">
<div style="width: 90%; margin-right: 5%; margin-left: 5%; text-align: center">
<asp:ScriptManager runat="server" ID="ScriptManager1"/>
<h1>Grid View System</h1>
<asp:UpdatePanel ID="upCrudGrid" runat="server">
<ContentTemplate>
<asp:GridView ID="grdvCrudOperation" runat="server" Width="940px" HorizontalAlign="Center"
OnRowCommand="GridView1_RowCommand" AutoGenerateColumns="false" AllowPaging="true"
DataKeyNames="EmployeeID" CssClass="table table-hover table-striped">
<Columns>
<asp:ButtonField CommandName="detail" ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Detail" HeaderText="Detailed View">
<ControlStyle CssClass="btn btn-info"></ControlStyle>
</asp:ButtonField>
<asp:ButtonField CommandName="editRecord" ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Edit" HeaderText="Edit Record">
<ControlStyle CssClass="btn btn-info"></ControlStyle>
</asp:ButtonField>
<asp:ButtonField CommandName="deleteRecord" ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Delete" HeaderText="Delete Record">
<ControlStyle CssClass="btn btn-info"></ControlStyle>
</asp:ButtonField>
<asp:BoundField DataField="EmployeeID" HeaderText="ID"/>
<asp:BoundField DataField="FirstName" HeaderText="First Name"/>
<asp:BoundField DataField="LastName" HeaderText="Last Name"/>
<asp:BoundField DataField="Title" HeaderText="Title"/>
<asp:BoundField DataField="Address" HeaderText="Address"/>
</Columns>
</asp:GridView>
<asp:Button ID="btnAdd" runat="server" Text="Add New Record" CssClass="btn btn-info" OnClick="btnAdd_Click"/>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
<div id="detailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Details</h3>
</div>
<div class="modal-body">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server" CssClass="table table-bordered table-hover" BackColor="White"
ForeColor="Black" FieldHeaderStyle-Wrap="false" FieldHeaderStyle-Font-Bold="true" FieldHeaderStyle-BackColor="LavenderBlush"
FieldHeaderStyle-ForeColor="Black" BorderStyle="Groove" AutoGenerateRows="False">
<Fields>
<asp:BoundField DataField="EmployeeID" HeaderText="ID"/>
<asp:BoundField DataField="FirstName" HeaderText="First Name"/>
<asp:BoundField DataField="LastName" HeaderText="Last Name"/>
<asp:BoundField DataField="Title" HeaderText="Title"/>
<asp:BoundField DataField="Address" HeaderText="Address"/>
</Fields>
</asp:DetailsView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="grdvCrudOperation" EventName="RowCommand"/>
<asp:AsyncPostBackTrigger ControlID="btnAdd" EventName="Click"/>
</Triggers>
</asp:UpdatePanel>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</form>
代码背后:
protected DataTable dt;
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
int index = Convert.ToInt32(e.CommandArgument);
if (e.CommandName.Equals("detail"))
{
int ID = Convert.ToInt32(grdvCrudOperation.DataKeys[index].Value.ToString());
IEnumerable<DataRow> query = from i in dt.AsEnumerable()
where i.Field<int>("EmployeeID").Equals(ID)
select i;
DataTable detailTable = query.CopyToDataTable<DataRow>();
DetailsView1.DataSource = detailTable;
DetailsView1.DataBind();
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@"<script type='text/javascript'>");
sb.Append("$('#detailModal').modal('show');");
sb.Append(@"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "DetailModalScript", sb.ToString(), false);
}
}
答案 0 :(得分:0)
我的代码的aspx方面是错误的。以下是更新的代码。现在它工作正常:
<div id="detailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Details</h3>
</div>
<div class="modal-body" >
<asp:DetailsView ID="DetailsView1" runat="server" CssClass="table table-bordered table-hover" BackColor="White"
ForeColor="Black" FieldHeaderStyle-Wrap="false" FieldHeaderStyle-Font-Bold="true" FieldHeaderStyle-BackColor="LavenderBlush"
FieldHeaderStyle-ForeColor="Black" BorderStyle="Groove" AutoGenerateRows="False">
<Fields>
<asp:BoundField DataField="EmployeeID" HeaderText="ID"/>
<asp:BoundField DataField="FirstName" HeaderText="First Name"/>
<asp:BoundField DataField="LastName" HeaderText="Last Name"/>
<asp:BoundField DataField="Title" HeaderText="Title"/>
<asp:BoundField DataField="Address" HeaderText="Address"/>
</Fields>
</asp:DetailsView>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="grdvCrudOperation" EventName="RowCommand"/>
<asp:AsyncPostBackTrigger ControlID="btnAdd" EventName="Click"/>
</Triggers>
</asp:UpdatePanel>
</div>
</div>