单击复选框选择行并打开按钮上的行单击现有数据

Question

我非常喜欢这里,而且情况有些严重.

我有一个Gridview,我用它来显示后端的数据.我做的是为了插入数据,我在Gridview上面做了一个按钮,在gridview中添加数据.

像这样:-

<asp:Button ID="btnAdd" runat="server" CssClass="btn btn-prm" Text="Add" Width="75" CausesValidation="true" ValidationGroup="AddNew" OnClick="btnAdd_Click" />

同样是被用于做Edit部分也.

我添加了一个复选框来选择gridview的行.查看我的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"
                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="Action" 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>

现在我的要求是什么.每当我选中任何行的复选框,然后单击"更新"按钮时,Row应该在弹出窗口中打开repsective,其中包含添加新行的现有数据.我试过但不能成功.请帮我解决一下这个.需要帮助请叫我.

谢谢.!

Answer 1

这是一个使用的解决方案ajax.当你click on update buttonjQuery代码将寻找checked checkbox在gridview.当它发现这将赋值textboxes放在里面popup div从row哪里复选框checked.

您必须根据其运行存储id,或者您可以使用任何将要发生的字段.hidden fieldupdate queryupdate

现在,当您click在弹出的更新按钮的ajax通话将被发送,这将需要从更新后的值textboxes,并发送至webmethod.

在webmethod您将运行update时query.And ajax成功执行,你会reload在页面看到changes在gridview.

弹出的Html

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


        });
    }

此功能将发送ajax带有更新值的呼叫到webmethod成功reload页面,以查看更改.

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";

}

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