【发布时间】:2015-12-11 12:50:03
【问题描述】:
我密切关注this guide 上的教程,为 GridView 创建模式视图/编辑表单。一切似乎都在正常工作,但是,模态表单根本不显示,屏幕变灰但表单本身不显示。此外,如果我检查页面的源代码,我可以看到模态表单包含我传递给它的数据。
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# 知识。
任何人都可以就问题所在或如何解决问题给出一两个提示吗?
【问题讨论】:
-
您的屏幕变灰这一事实向我表明,您在 RegisterClientScriptBlock 中的脚本工作......有点。您是否尝试过 RegisterStartupScript?我认为您将推车放在马前,并且在更新面板更新 DOM 之前调用了 .modal('show')。
-
刚试过这个方法-> ScriptManager.RegisterStartupScript(Page, Page.GetType(), "editModal", "$('#editModal').modal();", true);屏幕仍然变灰,没有模态表单。
-
将更新面板上的 UpdateMode 设置为“始终”。另外,请确保您的 Script 标签将 AllowPartialRendering 设置为 True。
-
不走运。尝试了两个更新面板的所有变体,将一个/两个设置为 Always/True 并且仍然是灰屏。
-
将模式设置为在文档就绪时显示。执行脚本时,模态似乎不存在
标签: c# jquery asp.net twitter-bootstrap