在弹出的“编辑和更新”中获取选定的行

时间:2014-12-11 15:50:17

标签: c# asp.net gridview

我有一个锚标记用于更新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>

请帮忙,从那以后我被困了两天但是无法破解它。

绑定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();
        }
    }

5 个答案:

答案 0 :(得分:4)

您可以使用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();
}

我认为您不需要检查要修改的行,CommandField中已经有GridView。您只需单击编辑图像,模拟弹出窗口将填充GridView(来自您正在编辑的行)的数据。

答案 1 :(得分:2)

这是使用ajax的解决方案。当您选中一个复选框并单击更新按钮时,jquery代码将在gridview中查找所选复选框,当它发现这将为弹出文本框中的值分配值。

此外,您必须根据将要运行的更新查询将ID存储在隐藏字段中,或者您可以使用将进行更新的任何字段。

现在当您点击弹出窗口中的更新按钮时,将发送一个ajax调用,该调用将从文本框中获取更新值并发送到webmethod。

在web方法中,您将运行更新查询。当ajax成功执行时,您将在弹出窗口中清空文本框的值并重新加载页面以查看gridview中的更改。

弹出式广告

<div id="Popup">
    <table>
        <tr>
            <td>
                Category
            </td>
            <td>
                <input type="text" id="Category" />
            </td>

        </tr>
        <tr>
            <td>
                Items
            </td>
            <td>
                <input type="text" id="items" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="Update" onclick="Openselected()" />
            </td>
            <td><input type="hidden" id="hdnID" /></td>
        </tr>

    </table>
</div>

这不会显示为弹出窗口,但您可以使用任何插件在弹出窗口中显示它,如blockui,fancybox jqueryui对话框或任何可用的插件。

Jquery代码

此函数将在文本框中指定所选行的值并打开弹出窗口。

function Openselected()
    {
        $('table[id$=grdTest] tr').each(function () {

            if ($(this).find('input[type=checkbox]').is(':checked')) {
                $('#Category').val($(this).children('td').eq('02').text());
                $('#items').val($(this).children('td').eq('03').text());
                $('#hdnID').val($(this).children('td').eq('01').text());
            }


        });
    }

此函数将向webmethod发送带有更新值的ajax调用,并在弹出和重新加载页面的成功空文本框中发送更改

function UpdateGrid()
    {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Default.aspx/UpdateDB",
            data: JSON.stringify({ category:$('#Category').val() , items: $('#items').val(),id:$('#hdnID').val() }),
            dataType: "json",
            async: false,
            success: function (data) {
                $('#Category').val("");
                $('#items').val("");
                $('#hdnID').val("");
                window.location.reload(true);

            },
            error: function (err) {
                alert(err.responseText);
            }

        });
    }

这是webmethod

[WebMethod]
public static string UpdateDB(string category, string items,int id)
{
    //Your logic of updating db.Here i am updating on basis of id you can use any feild of your choice        
    return "success";

}

根据您的要求,这仅适用于一行。

答案 2 :(得分:0)

检查RowDataBound方法中从gridview中选择的行。选定的行或在您的情况下检查标记的行可以在此方法中进行评估。

这里有很多参考资料..你可以使用一个 How to check if any row is selected from GridView?

答案 3 :(得分:0)

您可以查看这可能是您可以使用modelpopupextender提供的ajaxcontroltoolkit

浏览ASP.NET How to show AjaxControlToolkit Modal Popup from CheckBox

答案 4 :(得分:0)

您可以使用telerik网格自动允许以表格形式插入和编辑。

<MasterTableView  EditMode="PopUp" CommandItemDisplay="Top"><CommandItemSettings ShowAddNewRecordButton="true" ShowRefreshButton="true"  /> 


   

参见Telerik Demo http://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx