Question

我正密切关注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＃知识。

任何人都可以提出一两个关于问题所在或者如何解决问题的提示吗？

Answer 1

经过一番激烈的挖掘，我意识到在教程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>

在C＃后面的代码中打开Bootstrap模式表单

1 个答案: