如何从弹出的Gridview中获取选定的行数据

Question

我已经创建了带有 CheckBox 字段的 Follow GridView。CheckBoxes 用于在单击提交按钮时获取选定（选中）行数据。 它工作正常，没有错误。

<div id="dialog2" style="display:none" >
    <asp:GridView ID="GvSalesItems" runat="server" AutoGenerateColumns="False" DataKeyNames="sno" CellPadding="4" ForeColor="#333333" GridLines="None" PageSize="10" AllowPaging="True">
    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox ID="checkAll" runat="server" onclick = "checkAll(this);" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chk" runat="server" onclick = "Check_Click(this)" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="lnkSelect" runat="server" Text="Select" CommandName = "Select" OnClientClick = "return GetSelectedRow(this)" />
                </ItemTemplate>
            </asp:TemplateField>

            <asp:BoundField DataField="sno" HeaderText="Sno" />
            <asp:BoundField DataField="itemcode" HeaderText="Item Code" />
            <asp:BoundField DataField="itemname" HeaderText="Item Name" />
        </Columns>
    </GridView>

提交按钮的C#函数

protected void btnItemSave_Click(object sender, EventArgs e)
{
    foreach (GridViewRow gvrow in GvSalesItems.Rows)
    {
        CheckBox chk = (CheckBox)gvrow.Cells[0].FindControl("chk");
        if (chk.Checked)
        {
            int sno = int.Parse(gvrow.Cells[2].Text);
            int invoiceno = Convert.ToInt32(LblInvoiceAuto.Text);
            string itemcode = gvrow.Cells[3].Text;
            string itemname = gvrow.Cells[4].Text;
            dt.Rows.Add(sno,invoiceno, itemcode, itemname);
        }
    }
}

现在我想在弹出窗口中显示这个 GridView，因此我正在使用以下 JavaScript 函数。但是，复选框功能现在不起作用。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $("[id*=btn3]").click(function () {
            ShowPopup2();
            return false;
        });
    });
    function ShowPopup2() {
        $("#dialog2").dialog({
            title: "Item GridView",
            width: 550,
            buttons: {
                Ok: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
    }
</script>

Answer 1

在 jQuery UI 对话框中编辑 Gridview 的问题

jquery UI dialog() 将对话框 div 移动到表单之外。这使得无法提交更改。所以首先我们需要在它打开后将它重新定位到表单中。由于您希望隐藏对话框保持其位置，因此我添加了一个名为 dialog_container 的新 div，因此我们有以下内容：

---

修改了 .aspx 标记

    <div id="dialog_container">
      <div id="dialog2" style="display: none">
        <asp:GridView ID="GvSalesItems" runat="server" AutoGenerateColumns="false" 
           . . .
        </asp:GridView>

        <%-- 
           NOTE: The "OnClick" attribute, when defined in the markup, renders 
                 a submit button that causes a postback to a server side
                 click handler: "protected void btnItemSave_Click(...)".  

                 This is not to be confused with OnClientClick which renders
                 an "onclick" html attribute in order to run a javascript
                 function
          --%>
        <asp:Button ID="btnItemSave" runat="server" Text="Save" Width="72px"
             OnClick="btnItemSave_Click" />
      </div>
    </div>

修改后的Javascript

    <script type="text/javascript">
      $(function () {
        $("[id*=btn3]").click(function () {
            ShowPopup2();
            return false;
        });
      });

      // temp var to handle repositioning the dialog
      var $dlg = null;

      // Moved dialog options "out of line"
      // Note: no buttons defined
      var dlg_options = {
        title: "Item GridView",
        width: 550,
        modal: true
      };

      function ShowPopup2() {
        //open dialog and save dialog jquery object to $dlg
        $dlg = $("#dialog2").dialog(dlg_options);

        // reposition dialog back inside the form in its container
        $dlg.parent().appendTo($("#dialog_container"));
      }
    </script>

现在 div dialog2 中的提交按钮将按预期工作。

---

使用 UpdatePanel，于 2016 年 12 月 19 日修改

当您使用 jquery 和 jqueryui 引入 updatePanel 时，您必须考虑部分页面更新。特别是因为它与 jquery ready() 事件有关

完整回发的标准 jquery 就绪事件：

    $(function () {
      $("[id*=btn3]").click(function () {
        ShowPopup2();
        return false;
      });
    });

但上面的内容只在页面的初始调用时被调用，即当!Page.IsPostBack()。在您从 UpdatePanel 触发事件进行回发后，不会调用 ready 事件，因此永远不会“连接”$("[id*=btn3]").click() 事件

完整和部分回发的 jquery 就绪事件：

为了在 PostBack 和非 PostBack 状态下触发 ready 事件，您必须处理部分页面回发。我使用以下构造：

    // The standard jquery ready() event
    $( function() {
        MyPage_FullAndPartialPostbackHandler( false, null, null )
    } );

    // The ASP.Net partial page postback endRequest event handler
    // This is the "ready event" for an UpdatePanel partial postback.
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function( sender, args ) {
        MyPage_FullAndPartialPostbackHandler( true, sender, args ); 
    } );

    // Now both "ready" events call this one handler with appropriate
    // parameters to be used as necessary.
    function MyPage_FullAndPartialPostbackHandler( IsPartialPostBack, sender, args ) 
    {
        $("[id*=btn3]").click(function () {
            ShowPopup2();
            return false;
        });
    }

以上内容确保为“完整”和部分回发调用 ready 事件