从 GridView 事件获取模态显示的问题

Question

在任何人说之前，我已经尝试了所有我能找到的示例，但到目前为止似乎没有任何效果，所以我发布了一个新问题。

我正在处理一个 ASP.NET Web 表单项目，并且我有一个包含 GridView 控件的页面，该控件为每个记录提供多个命令按钮，代表不同的选项。其中之一是“订阅”，我想用它在引导模式对话框中显示订阅记录的详细信息。我将模态对话框代码精简到最低限度：

        <asp:Panel ID="pnlSubscriptionPopUp" runat="server" Visible="false">
            <div id="SubscriptionPopUp" class="modal fade" role="dialog">
                <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Subscription Details</h4>
                        </div>
                        <div class="modal-body">
                            
                        </div>
                        <div class="modal-footer">
                            <button id="Button1" runat="server" onclick="btnCancel_Click" cssclass="btn btn-primary">Cancel</button>
                            <button id="btnClose" class="btn btn-success">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </asp:Panel>

这是我正在使用的 JavaScript 代码：

    <script type="text/javascript">
        $(document).ready(function () {
            $("#SubscriptionPopUp").modal("show");

            $("#btnClose").click(function () {
                $("#SubscriptionPopUp").modal("hide");
            });
        });
        function ShowStatus() {
            console.log("got here!");
            $("#SubscriptionPopUp").modal("show");
        }

    </script>

现在，当我单击 GridView 中的按钮时，它会触发 RowCommand 事件，这是我包含的用于注册和调用客户端脚本的代码：

ScriptManager.RegisterStartupScript ( this.Page, this.GetType ( ), "ShowSubscriptionStatus", "ShowStatus();", true );

所以，所有代码都会触发，如果您注意到的话，我会检测 JavaScript 函数来记录一条消息，这确实有效。问题是，模态形式永远不会出现。控制台中没有任何类型的错误或消息，没有调试错误……什么都没有。

我很困惑为什么它没有正确触发，或者为什么我至少没有收到任何类型的错误消息。

Answer 1

好的，已经这样做了很多次了？

我真的很喜欢 bootstrap 做很多事情。但是，对于对话框，我跳到了 jQuery.UI。

我发现添加此类和该类以使此类对话框正常工作的标记过多。

你在下面有一个非常好的答案——（我投票赞成这个答案）。

我也尽量避免记录“就绪”的代码（除非我必须——它总是很难调试）。

然而，我发现 jQuery.UI 只是你放在页面上的简单“div”（显示：无隐藏）。就是这样！

所以，假设我们有一个网格，单击一行，我们想在该 div 中显示该行数据。

所以，我们的网格是这样的：

  <div style="width:40%">

      <asp:GridView ID="MyGrid" runat="server" CssClass="table table-hover" 
          DataKeyNames="ID" AutoGenerateColumns="false"
          OnSelectedIndexChanged="MyGrid_SelectedIndexChanged" >

        <Columns>
           <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
           <asp:BoundField DataField="LastName" HeaderText="Last Name" />
           <asp:BoundField DataField="HotelName" HeaderText="Hotel Name" />
           <asp:BoundField DataField="City" HeaderText="City" />
           <asp:BoundField DataField="Province" HeaderText="Porvince" />


            <asp:Templatefield HeaderText ="View">
                <ItemTemplate>
                    <asp:Button ID="cmdView" runat="server" Text="View"
                        CommandName = "Select"/>
                </ItemTemplate>
            </asp:Templatefield>
        </Columns>
    
      </asp:GridView>

没什么特别的。 注意：我没有使用模板化字段。如果你这样做了，那么你必须使用查找控件来代替“本示例简单”的 .cells 集合。

所以，以上是标记。

这是我们要在上面加载的代码：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack == false)
        {
            LoadGrid();
        }
    }

    public void LoadGrid()
    {
        using (SqlCommand cmdSQL = new SqlCommand("SELECT TOP 12 * from tblHotels ORDER BY HotelName",
            new SqlConnection(Properties.Settings.Default.TEST3)))
        {
            cmdSQL.Connection.Open();
            MyGrid.DataSource = cmdSQL.ExecuteReader();
            MyGrid.DataBind();

        }
    }

好的，到目前为止一切都很好。

因此我们现在有了这个：

现在让我们添加我们的 pop div。

  <div id="mypop" style="display:none">
          <br />
          <div style="text-align:right">

            <p>Hotel Name:<asp:TextBox ID="txtHotel" runat="server"></asp:TextBox></p>
            <p>First Name:<asp:TextBox ID="txtFirst" runat="server"></asp:TextBox></p>
            <p>Last Name:<asp:TextBox ID="txtLast" runat="server"></asp:TextBox></p>
            <p>City:<asp:TextBox ID="txtCity" runat="server"></asp:TextBox></p>
            <p>Province:<asp:TextBox ID="txtProvince" runat="server"></asp:TextBox></p>

           </div>

        </div>

再次，很好 - 只是简单和漂亮的飞机 jane div，这将是我们的弹出窗口。 （请注意我们没有 gazzllion 类和设置 - 真是太好了又简单）。

现在，该按钮具有“神奇”CommandName =“Select”，因此将触发 Selected 索引更改事件。

所以，我们弹出对话框的代码是这样的：

    protected void MyGrid_SelectedIndexChanged(object sender, EventArgs e)
    {
        // fill out dialog boxes
        GridViewRow dG = MyGrid.SelectedRow;

        txtFirst.Text = dG.Cells[0].Text;
        txtLast.Text = dG.Cells[1].Text; ;
        txtHotel.Text = dG.Cells[2].Text; ;
        txtCity.Text = dG.Cells[3].Text; ;
        txtProvince.Text = dG.Cells[4].Text; ;

        // call our js routine to pop
        ScriptManager.RegisterStartupScript(this.Page, this.GetType(),"my test","poptest()", true);

    }

最后但同样重要的是，上面调用的 jQuery.UI pop 例程。

     <script>

            function poptest() {
                var mydiv = $('#mypop')
                mydiv.dialog({
                    autoOpen: false, modal: true, title: 'Hotel Information', width: '400px',
                    position: { my: 'top', at: 'top+150' },
                    closeText: '',
                    buttons: {
                        'ok': function () {
                            // $('#cmdAdd').click() - click standard asp button
                            mydiv.dialog('close')
                        },
                        'cancel': function () {
                            mydiv.dialog('close')
                        }
                    }
                });
                // Open the dialog
                // mydiv.parent().appendTo($("form:first")) - only add if editing in div
                mydiv.dialog('open')
            }
        </script>

现在上面的好处是我们有两个按钮 - 我展示了如何关闭对话框 - 但我们也可以调用/单击表单上的一个按钮来根据任一选择运行代码（我建议设置为那些按钮 ClientIDMode="Static"，因此上面非常简单的 ok 或 cancel 代码可以因此只是“click()”那个按钮。这样你就不必做花哨的脚力来根据选择调用代码.

当对话框弹出时，它会自动将页面的其余部分“阴影”掉，并启用除对话框之外的所有其他控件。

现在，结果如下所示：

如您所见，我们在这方面的努力取得了很大成效。一个简单的 div 变成了那个相当不错的对话框。我们有一组简单的按钮，它们是对话框的一部分，然后可以根据您单击对话框支持的按钮执行操作。

对于提出不同的道路，我有点抱歉。我发现 jQuery.UI 对话框可以正常工作，非常简单。如果有人只是建立一个可爱的小库来使用带有引导对话框的简单 div - 注册我！ - 但我在尝试让引导对话框工作时发现了太多“问题”。这很可能是我的缺点 - 但通常只有一个简单的 div + jQuery.UI 对话框的简单方法效果很好。

Answer 2

这是我写的一个小例子，希望能给你一些关于如何修复你的问题的见解，因为我真的不知道你的 GridView 设置。虽然可能只是将document.ready() 添加到您的ShowStatus() 可能会解决此问题。

前端

<asp:Content ContentPlaceHolderID="headcontent" runat="server">
    <script type="text/javascript">
        function ShowStatus() {
            $(document).ready(function () {
                $("#SubscriptionPopUp").modal("show");
            })
        }

        function closeModal(e) {
            e.preventDefault();
            $("#SubscriptionPopUp").modal("hide");
            return false;  // don't want a post back
        }
    </script>
</asp:Content>

<asp:Content ContentPlaceHolderID="MainContentHolder" runat="server">
    <asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false" OnRowDataBound="gvTest_RowDataBound" OnRowCommand="gvTest_RowCommand">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <div class="row">
                        <asp:Button ID="btnShowSubscription" runat="server" CommandName="Subscription" Text="Show Subscription Data" />
                    </div>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>


    <div id="SubscriptionPopUp" class="modal fade" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Subscription Details</h4>
                </div>
                <div class="modal-body">
                    <asp:Label ID="lblTestOutput" runat="server" />
                </div>
                <div class="modal-footer">
                    <button id="btnClose" onclick="closeModal(event)" class="btn btn-success">Close</button>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

代码隐藏

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        List<String> names = new List<string>() { "Kobe", "Jordan", "Wilt" };
        gvTest.DataSource = names;
        gvTest.DataBind();
    }
}

protected void gvTest_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        Button btnShowSubscription = (Button)e.Row.FindControl("btnShowSubscription");
        if (btnShowSubscription != null)
        {
            // usually if my DataItem is an object, I'll cast it first and make sure it's not null
            btnShowSubscription.CommandArgument = (string)e.Row.DataItem;
        }
    }
}

protected void gvTest_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (string.Equals(e.CommandName, "Subscription"))
    {
        // again, probably cast this and do a !string.IsNullOrWhiteSpace() check
        switch ((string)e.CommandArgument)
        {
            case "Kobe":
                this.lblTestOutput.Text = "Kobe is the best";
                break;
            case "Wilt":
                this.lblTestOutput.Text = "Wilt is the best";
                break;
            case "Jordan":
                this.lblTestOutput.Text = "Jordan is the best";
                break;
        }

        ClientScript.RegisterClientScriptBlock(typeof(string), "ShowSubscriptionStatus", "ShowStatus();", true);
    }
}