65.9K
CodeProject 正在变化。 阅读更多。
Home

用于 .NET 控件的简易确认消息

Jason Scolaro
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.39/5 (6投票s)

2006年2月7日

2分钟阅读

viewsIcon

95316

一个用于常见例程的 JavaScript 解决方案，尤其适用于那些 DataGrid/GridView 删除按钮。

Sample Image - confirmation.gif

引言

本文介绍如何仅用一行代码（如果需要的话！）向服务器控件（甚至包括您的 DataGrid 中的那些）添加确认消息！

背景

我经常在 Experts-Exchange (ASP.NET) 上参与讨论，并且总是会遇到如何在删除按钮上附加确认消息的问题，例如“确定要删除此项目吗？”。虽然这不是一项困难的任务，但它有点单调乏味，并且必须向 DataGrid 中的每个 Button 添加 OnClick 事件有点过头了。相反，我决定让 JavaScript 为我工作，所以就这样做了...

使用代码

第一步是创建将处理所有这些的 JavaScript 方法。

function confirmDelete(e) {    
    var targ;

    if (!e) var e = window.event;
    targ = (e.target) ? e.target : e.srcElement;
    if (targ.nodeType == 3) targ = targ.parentNode;

    if (targ.id.toLowerCase().indexOf("delete") >= 0) {        
        return confirm("Do you want to delete this item?");
    }
    routeEvent(e);
}

document.onclick = confirmDelete;

每次页面上发生点击事件时，都会执行 confirmDelete 函数。 然后，我们使用一些有趣的逻辑来绕过浏览器中的差异，以找到被点击的元素。 如果该元素包含单词“delete”，那么我们将启动我们的确认框，并显示上面看到的消息。

下一步是创建一个受上述逻辑影响的服务器控件。

<asp:Button RunAt="server" ID="MyDeleteButton1" Text="Delete Record" />

此删除按钮将弹出确认框，仅仅因为我们在 ID 中包含了“Delete”这个词。 不需要任何代码，太棒了！ 我们完成了。

现在，想象一下在您的 DataGrid/GridView 控件中使用此方法；无需在您的 ItemDataBound 事件中附加该 OnClick 属性，或者对于 ASP.NET 2.0，无需 OnClientClick。 我们只需将“Delete”一词放入 ID 中。

<!-- ASP.NET 1.x -->

<asp:DataGrid RunAt="server" ID="GridView1">
    <Columns>
        ... your other columns ...
        <asp:TemplateColumn>
            <ItemTemplate>
                <asp:LinkButton RunAt="server" 
                       ID="DeleteMe" Text="Remove Row" />
            </ItemTemplate>s
        </asp:TemplateColumn>
    </Columns>
</asp:DataGrid>

<!-- ASP.NET 2.0 -->

<asp:GridView RunAt="server" ID="GridView1">
    <Columns>
        ... your other fields ...
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton RunAt="server" 
                       ID="DeleteMe" Text="Remove Row" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

您可以将 confirmDelete 函数放在您希望拥有此功能的每个页面的顶部。

<script type="text/javascript">
    ... confirmDelete function ...
</script>

或者，更好的是，将其放在您的 JavaScript 外部脚本文件中。 然后，您可以将其放入您的母版页设置中，并在每个页面上拥有此功能。

另一种值得考虑的方法

如果我们不想将所有内容都基于服务器控件的 ID，我们可以对其进行自定义，以便将其分配给 CSS class 属性。 使用下面的代码，我们可以检索所有具有指定 className 的元素。

function getElementsByClassName(ClassName,tagName,parentElement){
    var elements=new Array();
    var d=parentElement ? parentElement : document;
    var allElements;

    if(tagName)
        allElements=d.all && d.all.tags(tagName)
        || d.getElementsByTagName && d.getElementsByTagName(tagName);
    else allElements=d.all || d.getElementsByTagName("*");

    for(var i=0,len=allElements.length; i<len; i++)
        if(allElements[i].className.indexOf(ClassName)>=0)
            elements[elements.length]=allElements[i];

    return elements;
}
function assignConfirm(className) {    
    var elements = getElementsByClassName(className);
    
    if (elements && elements.length > 0) {
        for (i=0; i<elements.length; i++) 
            elements[i].onclick = confirmDelete;
    }
}
function confirmDelete() {
    return confirm("Are you sure you want to delete this item?");
}

然后，将在页面加载时执行 assignConfirm 函数，并将一个新的 confirmDelete 函数（一个更加简化的函数）分配给每个匹配元素（包括 DataGrid 中的服务器控件）的 onClick 事件。 剩下的唯一事情就是调用它。

<body onload="assignConfirm('delete');">

最后，一个利用此替代方法的示例服务器控件...

<asp:LinkButton RunAt="server" ID="lbRemove" CssClass="delete" Text="Remove Item" />

就是这样。 现在我们能够分配与之前相同的功能，但使用 CSS 类来控制哪些控件获得此功能。 通过简单地更改 CssClass 名称并分配一个单独的 confirmDelete 函数，可以非常容易地调整此方法以切换多个消息。

© . All rights reserved.