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

我有一系列使用asp：repeater生成的行：

<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发出server-hit来实际删除他们想要的项目
>从客户端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：LinkButton有一个OnClientClick事件,你可以在其中连接一个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：repeater生成.

javascript函数如何知道触发click事件的内容？ 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?

解决方法

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

该代码说“找到ID以’linkDelete’结尾的所有DOM元素,并连接以下click事件处理程序”.

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!