c# - 在弹出窗口中获取选定的行以进行编辑和更新

Question

我有一个 anchor 标记用于更新 gridview 中的行。我已经在 gridview 中设置了复选框。当用户选中复选框并单击更新按钮时，现有行应在弹出窗口中打开。

现在弹出窗口正在打开，但不包含带有现有数据的选中行。请查看代码供您引用:-

<a id="popup" onclick="div_show()" class="btn btn-success"><i class="fa fa-plus-circle"></i>Add new</a>

<a href="javascript:;" class="btn btn-primary" runat="server" onclick="div_show()" ><i class="fa fa-refresh"></i>Update</a>

另请参阅 gridview 代码供您引用:-

<asp:GridView ID="grdCSRPageData" runat="server" Width="100%" border="1" Style="border: 1px solid #E5E5E5;" CellPadding="3"
            AutoGenerateColumns="False" OnDataBound="grdCSRPageData_DataBound" AllowPaging="true" CssClass="hoverTable" EmptyDataText="No Records Found"
            OnPageIndexChanging="grdCSRPageData_PageIndexChanging" DataKeyNames="Id" OnRowDeleting="grdCSRPageData_RowDeleting"
            PageSize="5" ShowFooter="true" OnRowEditing="grdCSRPageData_RowEditing" OnRowUpdating="grdCSRPageData_RowUpdating"
            OnRowCancelingEdit="grdCSRPageData_RowCancelingEdit">
            <AlternatingRowStyle CssClass="k-alt" BackColor="#f5f5f5" />
            <Columns>
                <asp:TemplateField HeaderText="Select" HeaderStyle-Width="5%" HeaderStyle-CssClass="k-grid td">
                    <ItemTemplate>
                        <asp:CheckBox ID="chkSelect" runat="server" AutoPostBack="false" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="page_title" HeaderText="Page Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                <asp:BoundField DataField="page_description" HeaderText="Page Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                <asp:BoundField DataField="meta_title" HeaderText="Meta Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                <asp:BoundField DataField="meta_keywords" HeaderText="Meta Keywords" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                <asp:BoundField DataField="meta_description" HeaderText="Meta Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                <asp:BoundField DataField="Active" HeaderText="Active" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                <asp:TemplateField HeaderText="Action" HeaderStyle-Width="15%" HeaderStyle-CssClass="k-grid td">
                    <ItemTemplate>
                        <asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="Delete" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" OnClientClick="return confirm('Are you sure you want to delete this record?')" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:CommandField ButtonType="Image" ItemStyle-Width="15" EditImageUrl="~/images/edit.png" ShowEditButton="True" ControlStyle-Width="15" ControlStyle-Height="15" CancelImageUrl="~/images/close.png" UpdateImageUrl="~/images/update.png">
                    <ControlStyle Height="20px" Width="20px"></ControlStyle>
                </asp:CommandField>
            </Columns>
        </asp:GridView>

请大家帮忙，这两天卡住了，没法破解。

绑定(bind)gridview的代码:-

private void BindGrid()
    {
        string strQuery = "select Id,page_title,page_description,meta_title,meta_keywords,meta_description,Active from tbl_Pages ORDER By Id DESC";
        SqlCommand cmd = new SqlCommand(strQuery);
        DataTable dt = GetData(cmd);
        grdCSRPageData.DataSource = dt;
        grdCSRPageData.DataBind();
    }

另见Page_load方法；-

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {  
            BindGrid();
        }
    }

Answer 1

您可以使用 AjaxControlToolKit 进行尝试。

在您的 GridView 中放置此事件处理程序:

OnRowCommand="grdCSRPageData_RowCommand"

将其放在 GridView 之后:

<asp:UpdatePanel ID="upModal" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Panel ID="pnlModal" runat="server" BorderWidth="1" Style="display:none;">
            <table>
                <tr>
                    <td>page_title</td>
                    <td><asp:TextBox ID="txtPageTitle" runat="server" /></td>
                </tr>
                <tr>
                    <td>page_description</td>
                    <td><asp:TextBox ID="txtPageDescription" runat="server" /></td>
                </tr>
            </table>
            <asp:Button ID="btnOK" runat="server" Text="OK" />
            <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnModal" runat="server" Style="display:none;"/>
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlModal" TargetControlID="btnModal" OkControlID="btnOK" CancelControlID="btnCancel" />

在后面的代码中:

protected void grdCSRPageData_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "Edit")
    {
        GridViewRow gvRow = grdCSRPageData.Rows[Convert.ToInt32(e.CommandArgument)];
        txtPageTitle.Text = gvRow.Cells[0].Text;
        txtPageDescription.Text = gvRow.Cells[1].Text;

        upModal.Update();
        mpe.Show();
    }
}

protected void grdCSRPageData_RowEditing(object sender, GridViewEditEventArgs e)
{
    grdCSRPageData.EditIndex = -1;
    BindGrid();
}

我认为您不需要检查要编辑的行，您的 GridView 中已经有一个 CommandField。您只需单击编辑图像，模式弹出窗口就会填充来自 GridView(来自您正在编辑的行)的数据。