ASP.NET:如何从 javascript 访问转发器生成的元素？

Question

我有一系列使用 生成的行asp:中继器 :

<asp:repeater ID="itemsRepeater" 
      OnItemDataBound="itemsRepeater_ItemDataBound" 
      runat="Server">
   <itemtemplate>
      <tr>
         <td>
            <asp:HyperLink ID="linkView" runat="server"
               Text="<%# GetItemText((Item)Container.DataItem) %>" 
               NavigateUrl="<%# GetViewItemUrl((Item)Container.DataItem) %>" />
         </td>
         <td>
            <asp:HyperLink ID="linkDelete" runat="server"
                Text="Delete"
                NavigateUrl="<%# GetDeleteUrl((ActionItem)Container.DataItem) %>" />
         </td>
      </tr>
   </itemtemplate>
</asp:repeater>

转发器创建一个 HTML 表，每行包含一个指向项目的链接和(本质上是)一个“删除”链接。上面简化的示例代码生成类似于以下内容的 HTML:

<TR>
<TD>
   <A href="ViewItem.aspx?ItemGuid={19a149db-5675-4eee-835d-3d78372ca6f9}">
      AllisonAngle_SoccerGirl001.jpg
   </A>
</TD>
<TD>
   <A href="DeleteItem.aspx?ItemGuid={19a149db-5675-4eee-835d-3d78372ca6f9}">Delete</A>
</TD>
</TR>

现在一切正常，但我想将“删除”转换为客户端。我希望能够单击该链接，它会在客户端 javascript 上:

提示警告“您确定...”

让 javascript 问题服务器命中来实际删除他们想要的项目

从客户端 DOM 树中删除项目

所以有四个问题需要解决:

如何将javascript连接到的客户端点击删除 关联。

如何知道用户点击了什么项目 删除

防止回传

删除用户点击的行

那是我的问题。

从这里开始，您会发现我试图解决它的漫无边际的尝试。不要将以下任何内容与任何可能的已接受解决方案相关联。仅仅因为我在下面发布了代码，并不意味着它有任何用处。这并不意味着我在最佳解决方案的唾手可得的范围内的任何地方。因为我不能做任何低于工作的事情 - 它一定走错了路。

我的尝试

连接 Javascript

第一个任务是将删除链接 HTML 从以下内容转换为:

<A href="DeleteItem.aspx?ItemGuid={19a149db-5675-4eee-835d-3d78372ca6f9}">
   Delete
</A>

进入更javascripty的东西:

<A href="#" 
      onclick="DeleteItem('DeleteItem.aspx?ItemGuid={19a149db-5675-4eee-835d-3d78372ca6f9}')">
   Delete
</A>

并添加脚本:

<script type="text/javascript">
   //<![CDATA[
       function DeleteItem(deleteUrl)   
       {   
          //Ask the user if they really want to
          if (!confirm("Are you sure you want to delete INSERT NAME HERE?"))
          {
             return false;
          }

          //Call returns false if the server returned anything other than OK
          if (!DoAjaxHit(deleteUrl)
          {
             return false;
          }

          //Remove the table row from the browser
          var tableRow = document.getElementById("TODO-WHAT ID");
          if (row != null)
          {
             //TODO: how to delete the tableRow from the DOM tree?
             //document.Delete(tableRow) ?
          }

          //return false to prevent a postback
          return false;
       }
   //]]>
</script>

可以使用什么 ASP 代码组合来创建上述内容？我听说 asp:LinkBut​​ton 有一个 OnClient点击事件，您可以在其中连接一个 javascript 函数:

<asp:LinkButton ID="linkDelete" runat="server"
   Text="Delete"
   OnClientClick="DeleteItem(<%# GetDeleteUrl((ActionItem)Container.DataItem) %>);"/>

问题是呈现的 HTML 字面上包含:

<a onclick="DeleteItem(&lt;%# GetDeleteUrl((ActionItem)Container.DataItem)) %>);" ...>
   Delete
</a>

如果我将客户端单击事件处理程序更改为:

   OnClientClick="DeleteItem('todo - figure this out');"/>

它可以工作 - 以及“todo - 解决这个问题”可以工作。

防止回传

上面的 javascript 调用实际上发生了(我可以看到我的警报)，但还有下一个问题:从 javascript 函数返回 false 不会阻止回发。事实上，我可以看到生成的html代码上的href不是“#”，而是

javascript:__doPostBack('ctl0....

我尝试更改 ASPX 代码以包含自己的 OnClick 处理程序:

   OnClick="#"
   OnClientClick="DeleteItem('todo - figure this out');"

但编译器认为英镑方是一个pragma，并提示:

Preprocessor directives must appear as the first non-whitespace character on a line

表行标识

表行没有 ID，它们由 生成asp:中继器 .

javascript 函数如何知道是什么触发了点击事件？ javascript 需要能够找到该元素，并将其从树中删除。

注:我当然更喜欢淡入淡出+折叠动画。

通常你通过使用获得一个元素

var tr = document.getElementById("the table row's id");

但是表格行没有一个容易知道的 ID。由于有多行，服务器在构建表时生成 ID。我意识到一些解决方案将不得不涉及改变:

<TR>

进入

<TR runat="server">

这样每个表行都会有服务器生成的标识，但是我如何从 javsscript 引用生成的名称？

通常我会认为脚本问题可以通过使用多个参数来解决:

function DeleteItem(tableRowElement, deleteUrl)
{
   //Do a web-hit of deleteUrl to delete the item


   //remove tableRowElement DOM object from the document tree
}

但问题只是被推到别处:你如何填充 tableRowElement 和 deleteUrl 以调用 javascript 函数？

这么简单的问题:将点击从回发转换为客户端。

所涉及的问题数量变得非常愚蠢。这似乎表明

想法解决方案完全不同

没有解决办法

引用

Stackoverflow: How do I fade a row out before postback?

Stackoverflow: Javascript before asp:ButtonField click

asp.net: Accessing repeater elements from javascript.

Stackoverflow: How to access repeater generated elements?

Answer 1

jQuery可以为你挖掘标签:

$("[id$=linkDelete]").click(function() {
    DeleteItem(this.href);
});

该代码表示​​“查找 ID 以 'linkDelete' 结尾的所有 DOM 元素并连接以下单击事件处理程序”。