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>

现在我的要求是什么。每当我选中任何行的复选框，然后单击“更新”按钮时，应在弹出窗口中打开repsective Row，其中包含添加新行的现有数据。我试过但不能成功。请帮我解决一下这个。如果您还有其他需要，请告诉我。

感谢！

Answer 1

以下是使用ajax的解决方案。当click on update button jquery代码在checked checkbox中查找gridview时。如果发现这会将textboxes的{{1}}分配给popup div row，其中checked复选框为id。

您必须hidden field将update query存储在update将运行的基础上，或者您可以使用click将要发生的任何字段。

现在，当您在弹出的ajax更新按钮时，会发送一个textboxes来自webmethod的更新值并发送到webmethod。

在update中，您将运行ajax查询。当reload成功执行后，您将changes该页面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> }。

弹出式广告

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


        });
    }

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

Jquery代码

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

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] 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"; }页面上发送更改值。

{{1}}

这是webmethod

{{1}}

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

Answer 2

在复选框选择中，关联一个模态弹出对话框，并在任何命令名称上填充相同的数据。

Answer 3

是的，我会给它一个裂缝。

在PHP-HTML中，或者只是普通的旧HTML，您可以将data- *属性分配给任何类型的元素。在ASP中，我假设你可以做类似的事情。在这些数据属性中存储您想要用于对话框的数据，将所有元素都赋予类（'checkboxDialog'），然后jQuery可以完成剩下的工作。

CSS

.hide {display:none;}

HTML

<div class="dialog-form hide">

    <!-- input elements with id's for easy identification -->

</div>

<table>
    <tr class="checkboxDialog" data-current="current data in elements like this" data-id=1">
        <td><button>Update</button></td>
    </tr>
    <!-- repeat as necessary -->
</table>

的jQuery

<script>
    $(function(){
        $('.checkboxDialog').on('click', function(e){ // This attached a click event listener to all matching elements
            var selectedObj = $(this);

            $('#inputCurrent').val(selectedObj.data('current'));
            $('#inputId').val('id'); // etc etc

            $('.dialog-form')
                .removeClass('hide')
                .dialog({ // From the jQuery-ui library, check it out!
                    buttons: {
                        Submit: function(){
                            // You can either submit an actual form, or alter data via AJAX
                            //  and repopulate the row with the new data when the AJAX completes
                            $(this).close();
                        },
                        Cancel: function(){
                            $(this).close();
                        }
                    }
            });
        });
    })
</script>

Answer 4

使用jQuery和amp;的组合用于满足要求的ASP.NET代码。

（1）点击更新后，通过jQuery获取所有选中（已选中）行的列表。

（2）将每行的商店ID或唯一键（可能是您的案例中的页码ID）作为同一行中的隐藏字段。

（3）现在，为每个选定的行调用javascript window.open（）或备用弹出窗口。

（4）要在弹出窗口中填充控件，您可以将其作为查询字符串参数传递，或使用隐藏字段值从后端重新获取它们。您需要创建一个ASP.NET服务来从Backend返回这些值。

Answer 5

在弹出窗口中执行以下步骤：

将数据表附加到网格视图时添加新列＆＃39; RowNo＆＃39;按代码。

通过添加js函数更新命令字段，如下所示：

<asp:CommandField ButtonType="Image" onClick="showData(<%#RowNo%>)"  ItemStyle-Width="15" EditImageUrl="~/images/edit.png" ShowEditButton="True" ControlStyle-Width="15" ControlStyle-Height="15" CancelImageUrl="~/images/close.png" UpdateImageUrl="~/images/update.png">

在包含jquery插件后，按照以下方式编写JS函数：

function showData(rowNo) {
var html = $('#grdCSRPageData>tbody').find('tr:eq(' + rowNo + ')');
//div123 is the test div and one should replace this with required one.
$('#div123').html(html);
$('#div123').show();
};

Answer 6

DO it in parts. Use jquery for accessing the checkbox inside the gridview. First give a css class to the checkbox(for helping jquery to find it by this style). Then call the checkbox event handling from the below code-

**if ($('.checkboxCss').prop('checked'))
{
//open the pop up window with the editing fields
}**

Now on the sub`enter code here`mit button click of the pop up window, you can use jquery ajax to call the c# function which do the updation of the record. Here you have to use a static [webmethod] C# function to call it with jquery AJAX.

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

6 个答案: