在C#后面的代码中打开Bootstrap模态形式
本文关键字:Bootstrap 模态 代码 | 更新日期: 2023-09-27 18:26:29
我一直在密切关注本指南中的教程,为GridView创建模式视图/编辑表单。一切似乎都在正常工作,然而,模态形式根本没有显示,<strong]屏幕变灰,但形式本身没有显示>此外,如果我检查页面的源代码,我可以看到模态表单包含我传递给它的数据
GridView代码
//REFERENCES IN HEAD
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
//.............
<asp:ScriptManager runat="server" ID="ScriptManager1" />
<asp:UpdatePanel ID="upCrudGrid" runat="server">
<ContentTemplate>
<div class="col-md-6">
<asp:GridView ID="CompanyUserList" GridLines="None" CssClass="table table-striped" OnRowCommand="CompanyUserList_RowCommand" Style="margin-top: 2em;" runat="server">
<Columns>
<asp:ButtonField CommandName="editRecord" ControlStyle-CssClass="btn btn-info"
ButtonType="Button" Text="View & Edit" HeaderText="Edit Record">
<ControlStyle CssClass="btn btn-info"></ControlStyle>
</asp:ButtonField>
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
模态车身代码
<div id="editModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="editModalLabel">Edit Record</h3>
</div>
<asp:UpdatePanel ID="upEdit" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-body">
<table class="table">
<tr><td>Country Code : <asp:Label ID="lblCountryCode" runat="server"></asp:Label></td>
</tr>
<tr>
<td>Population : <asp:TextBox ID="txtPopulation" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Country Name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Continent:<asp:TextBox ID="txtContinent1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Label ID="lblResult" Visible="false" runat="server"></asp:Label>
<asp:Button ID="btnSave" runat="server" Text="Update" CssClass="btn btn-info" />
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CompanyUserList" EventName="RowCommand"/>
<%--<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />--%>
</Triggers>
</asp:UpdatePanel>
</div>
C#代码填充模式表单
protected void CompanyUserList_RowCommand(object sender, GridViewCommandEventArgs e)
{
int index = Convert.ToInt32(e.CommandArgument);
GridViewRow gvrow = CompanyUserList.Rows[index];
lblCountryCode.Text = HttpUtility.HtmlDecode("test");
txtPopulation.Text = HttpUtility.HtmlDecode("test");
txtName.Text = HttpUtility.HtmlDecode("test");
txtContinent1.Text = HttpUtility.HtmlDecode("test");
lblResult.Visible = false;
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@"<script type='text/javascript'>");
sb.Append("$('#editModal').modal('show');");
sb.Append(@"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
"EditModalScript", sb.ToString(), false);
}
现在,如果我不得不猜测ScriptManager.RegisterClientScriptBlock中的某个地方有问题,但我真的不能判断是否是这样,和/或应该做些什么来解决问题,因为我只了解c#。
有人能就问题出在哪里或如何解决给出一两个提示吗?
经过一番深入研究,我意识到在教程中使用了Bootstrap 2.2.2,因此为了使其与最新的Bootstrap一起使用,我不得不稍微修改HTML/CSS。
<div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<%--<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="editModalLabel">Edit Record</h3>
</div>--%>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<asp:UpdatePanel ID="upEdit" runat="server">
<ContentTemplate>
<div class="modal-body">
<table class="table">
<tr>
<td>Country Code :
<asp:Label ID="lblCountryCode" runat="server"></asp:Label></td>
</tr>
<tr>
<td>Population :
<asp:TextBox ID="txtPopulation" runat="server"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Type Integer Value!" /></td>
</tr>
<tr>
<td>Country Name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Continent:<asp:TextBox ID="txtContinent1" runat="server"></asp:TextBox></td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Label ID="lblResult" Visible="false" runat="server"></asp:Label>
<asp:Button ID="btnSave" runat="server" Text="Update" CssClass="btn btn-info" />
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CompanyUserList" EventName="RowCommand" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>