<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
<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(<%# 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
@L_502_2@
