复选框的 OnClick 选择行并使用现有数据打开按钮单击时的行答案

【问题标题】：OnClick of Checkbox selecting row and Open the Row on Button Click with existing data复选框的 OnClick 选择行并使用现有数据打开按钮单击时的行
【发布时间】：2015-02-08 16:26:53
【问题描述】：

我被困在这里非常严重，而且情况有些严重。

我有一个 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 应该在弹出窗口中打开，其中包含现有数据，因为它正在添加新行。我尝试过但无法成功。请帮我解决一下这个。如果您还需要什么，请告诉我。

谢谢！

【问题讨论】：

你必须使用asp.net gridview吗？
是的，我用过asp.net gridview
@ScottSelby：任何帮助先生，需要它
您在使用 jQuery 时遇到过问题吗？ asp.net 对我来说很难解析；只要我能弄清楚一些关于asp的基础知识，我也许可以提供一个有用的答案。
@Malovich：是的，我对 Jquery 有疑问。我将处理asp部分。如果你能在这方面提供帮助，请告诉我。谢谢

标签： jquery asp.net gridview popup

【解决方案1】：

执行以下步骤以获取弹出窗口中的行：

在将数据表附加到网格视图时，通过代码添加新列“RowNo”。

通过添加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();
};

【讨论】：

【解决方案2】：

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

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

现在，当您在弹出窗口中的更新按钮上click 时，将发送一个ajax 调用，该调用将从textboxes 获取更新的值并发送到webmethod。

在webmethod 中，您将运行update 查询。当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]
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";

}

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

【讨论】：

【解决方案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>

【讨论】：

可能是个好主意。但是，只要 a) 我了解您实际要完成的工作，并且 b) 您能够使 HTML 标记出现如我所展示的那样，代码就可以工作。这是一个了解你真正追求的东西的问题。
你加载了jQuery-ui库吗？
@Malovuch，是的，显然我已经加载了

【解决方案4】：

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

【讨论】：

【解决方案5】：

结合使用 jQuery 和 ASP.NET 代码来满足需求。

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

(2) 将每一行的 ID 或唯一键（在您的情况下可能是页面 ID）存储为同一行本身的隐藏字段。

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

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

【讨论】：

请用代码解释，如果您需要我这边的任何东西，请告诉我

【解决方案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.

【讨论】：

感谢您的回答，我按照您的建议尝试了
你成功了吗？