编辑模式下的 ASP.NET GridView答案

【问题标题】：ASP.NET GridView in edit mode编辑模式下的 ASP.NET GridView
【发布时间】：2013-04-09 09:02:27
【问题描述】：

我有一个 Gridview，它放置了两个用于选择和删除特定行的图像图标。网格绑定到一个 jquery 数据表，但是当我选择图像来选择行时，默认行为是强制回发，这会导致网格丢失数据表设置。

知道如何在单击任一按钮时保留数据表吗？

<asp:GridView ID="grdMessageDups" runat="server" DataSourceID="sourceDuplicates"
     AutoGenerateColumns="false"> 
    <Columns>
        <asp:CommandField ShowSelectButton="true" ButtonType="Image"
             SelectImageUrl="~/images/icn_alert_success.png"/>
        <asp:ButtonField ButtonType="Image" 
             ImageUrl="~/images/icn_alert_error.png" />
        <asp:BoundField DataField="MsgDateDetailDuplicatesID" Visible="false" />
        <asp:BoundField  DataField="1" HeaderText="Heading 1" />
        <asp:BoundField  DataField="2" HeaderText="Heading 2" />
        <asp:BoundField  DataField="3" HeaderText="Heading 3" />
     </Columns>
 </asp:GridView>

那么DataTable JQuery的东西就是：

                var oTable = $('#grdMessageDetail').dataTable({
                "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "ALL"]],
                'asStripClasses': null,
                "iDisplayLength": 10,
                "bJQueryUI": true,
                "bFilter": true,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": false,
                "sDom": 'RC<"H"lfr>t<"F"ip>',

                //Scrolling .......
                "sScrollY": "250px",
                "sScrollX": "100%",
                "sScrollXInner": "100%",
                "bScrollCollapse": true,
                });

后面代码中的代码是：

public static void MakeAccessible(GridView grid)
{
    if (grid.Rows.Count <= 0) return;
    grid.UseAccessibleHeader = true;
    grid.HeaderRow.TableSection = TableRowSection.TableHeader;
    if (grid.ShowFooter)
        grid.FooterRow.TableSection = TableRowSection.TableFooter;
}
protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);
    MakeAccessible(grdMessageDups);
}

【问题讨论】：

绑定到 jquery 数据表是什么意思？您是否正在初始化 gridview 以充当 jquery 数据表？
是的 - 所以我使用后面的代码构建了 Gridview，然后当 DOM 被加载并且 Pre_Init 已经处理了信息时，数据表被添加到 Grid 中。当我单击按钮时，会导致回发。但是，我似乎无法取消此调用 JQuery 函数，这会停止默认行为
你是在$(document).ready(function() { //Your Script })上调用jquery数据表初始化脚本吗；

标签： jquery asp.net gridview datatable

【解决方案1】：

每次在网格上发生事件时都需要绑定它..

【讨论】：

【解决方案2】：

在这两种情况下，选择一行是客户端事件（java-script 或 jQuery）

return false;

如果任何函数在（java-script 或 jQuery）中被调用 onclick

编辑

你可以替换

<asp:ButtonField ButtonType="Image" 
         ImageUrl="~/images/icn_alert_error.png" />

使用模板文件并在其中放置图像而不是图像按钮，如下所示

 <asp:TemplateField>
      <ItemTemplate>
          <img src="~/images/icn_alert_error.png" />    
       </ItemTemplate>
  </asp:TemplateField>

【讨论】：

使用标准 ASP.NET 网格方法填充网格，所以我有一个图像的 CommandField，我想拦截这个点击事件，然后使用 JQuery 来接管操作。
按钮域我猜。单击此按钮后，我想使用 JQuery 来 e.PreventDefaults()
你有没有写在ButtonField上的jquery函数？
Shekhar - 我完全忘记了 ItemTemplate 的东西 :-)

【解决方案3】：

在所有最终解决方案的帮助下：

                 <asp:TemplateField>
                     <ItemTemplate>
                       <a href="#" id="selectImage">
                        <img src="images/icn_alert_success.png" /></a>
                      </ItemTemplate>
                  </asp:TemplateField>

然后这个 JQuery 代码：

                  $('[id$=selectImage]').click(function (evt) {
                  evt.preventDefault();
                 alert("item selected");
                  });

所以，现在，我需要执行获取所选行的 KeyValue，我们是黄金。

【讨论】：