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

前端之家收集整理的这篇文章主要介绍了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:@H_301_5@

<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:@H_301_5@

>提示警告“你确定……”
>让javascript发出server-hit来实际删除他们想要的项目
>从客户端DOM树中删除该项@H_301_5@

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

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

这是我的问题.@H_301_5@

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

我的尝试@H_301_5@

连接Javascript@H_301_5@

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

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

更多javascripty:@H_301_5@

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

添加脚本:@H_301_5@

<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函数:@H_301_5@

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

问题是呈现的HTML实际上包含:@H_301_5@

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

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

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

它的工作原理 – 以及“todo – 想出这个”都可以.@H_301_5@

防止回发@H_301_5@

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

javascript:__doPostBack('ctl0....

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

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

但是编译器认为英镑是一个pragma,并且抱怨:@H_301_5@

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

表行标识@H_301_5@

表行没有ID,它们由asp:repeater生成.@H_301_5@

javascript函数如何知道触发click事件的内容? javascript需要能够找到该元素,并将其从树中删除.@H_301_5@

注意:我当然更喜欢淡入淡出动画.@H_301_5@

通常你会使用一个元素@H_301_5@

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

但表行没有容易知道的ID.由于存在多行,因此服务器在构建表时会生成ID.我意识到一些解决方案将不得不涉及改变:@H_301_5@

<TR>

成@H_301_5@

<TR runat="server">

这样每个表行都会有服务器生成的标识,但是如何从javsscript引用生成名称?@H_301_5@

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

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函数?@H_301_5@

这样一个简单的问题:将点击从回发转换为客户端.@H_301_5@

所涉问题的数量越来越愚蠢.这似乎也表明了这一点@H_301_5@

>理念解决方案完全不同
>没有解决方案@H_301_5@

参考@H_301_5@

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

Stackoverflow: Javascript before asp:ButtonField click@H_301_5@

asp.net: Accessing repeater elements from javascript.@H_301_5@

Stackoverflow: How to access repeater generated elements?@H_301_5@

解决方法

jQuery可以为您挖出标签
$("[id$=linkDelete]").click(function() {
    DeleteItem(this.href);
});

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

原文链接:https://www.f2er.com/aspnet/247528.html

猜你在找的asp.Net相关文章