【问题标题】:Opening Bootstrap Modal Form In Code Behind C#在 C# 后面的代码中打开引导模式表单
【发布时间】: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


【解决方案1】:

经过一番深入研究,我意识到在教程中使用了 Bootstrap 2.2.2,因此为了使其与最新的引导程序一起使用,我必须稍微修改 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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-07-03
    • 1970-01-01
    • 2013-03-02
    • 2012-04-12
    • 1970-01-01
    • 1970-01-01
    • 2015-08-25
    相关资源
    最近更新 更多