在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#。

有人能就问题出在哪里或如何解决给出一两个提示吗?

在C#后面的代码中打开Bootstrap模态形式

经过一番深入研究,我意识到在教程中使用了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>