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

Question

我有一系列使用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问题服务器命中实际删除他们想要的项目
• 从客户端DOM树中删除该项

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

1. 如何将javascript连接到客户端点击删除链接.
2. 如何知道用户点击了什么项目删除
3. 防止回发
4. 删除用户单击的行

这是我的问题.

从这里开始,你会发现我试图解决它.不要将以下任何内容与任何可能接受的解决方案相关联.仅仅因为我在下面发布了代码,并不意味着任何有用的代码.并不意味着我在最佳解决方案的吐痰距离内.而且因为我无法在工作之下做任何事情 - 它必定走错了路.

---

我的尝试

连接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有一个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,并且抱怨:

预处理程序指令必须显示为一行中的第一个非空白字符

---

表行标识

表行没有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:如何在回发之前淡出一行？

Stackoverflow:在asp之前的Javascript:ButtonField点击

asp.net:从javascript访问转发器元素.

Stackoverflow:如何访问转发器生成的元素？

Answer 1

其他回答者发现了与问题不同方面相关的各种内容。我设法拼凑出一个完整的解决方案。我已将相关片段复制/粘贴到此处。

第一个重要的更改是使用asp:LinkBut​​ton，它允许作为OnClientClick事件，这使您可以直接访问 javascript OnClick事件：

<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:LinkButton ID="linkImpregnate" runat="server"
                   Text="Impregnate"
                   OnClientClick="<%# GetImpregnateUrl((Item)Container.DataItem) %>" />
         </td>
      </tr>
   </itemtemplate>
</asp:repeater>

代码隐藏手动构建包含 javascript 调用的表示代码（是的，用于分离控制器和视图！）。

protected string GetNodeAcknowledgementClientClick(Item item)
{
   if (!(item is HotGirl))
      return ""; //this shouldn't be called for non-acknowledgements, but i won't fail

   HotGirl girl = (HotGirl)item;

   String szOnClientClick =
         "return ImpregnateGirl(this, "+
               Toolkit.QuotedStr(girl.GirlGUID.ToString()) + ", "+
               Toolkit.QuotedStr(GetItemName(item))+");";

   return szOnClientClick;
}

最后在 aspx 中，我找到了一个随机点来混入一些 javascript：

<script type="text/javascript" src="Javascript/jquery.js"></script>  
<script type="text/javascript">
   //<![CDATA[
   function DeleteItem(sender, girlGuid, girlName)   
   {
      if (!confirm("Are you sure you want to impregnate "+girlName+"?"))
      {
         return false;
      }

      $.post(
         'ImpregnateGirl.aspx?GirlGUID='+nodeGuid,
               function(data, textStatus) {
                  if (textStatus == 'success') 
                  {
                     $(sender).parents('tr:eq(0)').hide();
                  }
                  else
                  {
                     return false;
                  }
               }
      );

      //return false to suppress the postback
      return false;
   }
//]]>
</script>

我本来会让 jQuery 发布一个帖子，作为一个安全措施，就像家伙建议的那样，但是 jQuery 会给出一个错误，而不是发布。我没有选择关心，而是选择了不关心。