Question

我有这个标签，我想点击按钮事件后fadeOut。我正在使用MasterPage。脚本管理器在MasterPage上声明。在Defaulst.aspx中我有：

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="Server">
    <script type="text/javascript" src="scripts/jquery-1.4.1.min.js">
        $(function () {
            $("input[id$='btnShowDate']").click(function () {
                $("span[id$='lblStatus']").fadeOut("slow");
            });
        });
    </script>
    <asp:UpdatePanel runat="server" ID="uP">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnShowDate" />
        </Triggers>
        <ContentTemplate>
            <asp:Label runat="server" ID="lblStatus" />
            <div>
                <asp:Button runat="server" ID="btnShowDate" Text="Show Today`s Date" OnClick="btnShowDate_Click" /></div>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

在CodeBehind上我有：

protected void btnShowDate_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
lblStatus.Text = DateTime.Now.Date;
}

问题是点击按钮后标签没有淡出。有人对如何处理这个问题有任何想法吗？谢谢。

Answer 1

ID不是您认为在渲染页面中的ID，ASP.Net会稍微破坏它，如下所示：

<span id="container_container2_lblStatus">Stuff</span>

所以你需要attribute-ends-with selector，就像这样：

$(document).ready(function() {
  $("span[id$='lblStatus']").fadeOut("slow");
});

要在点击时实现，请将其添加为.click()处理程序，如下所示：

$(function() {
  $("input[id$='btnShowDate']").live('click', function() {
    $("span[id$='lblStatus']").fadeOut("slow");
  });
});

更清晰的替代方法是为每个控件添加一个类，例如：

<asp:Label runat="server" id="lblStatus" CssClass="status" />
//and...
<asp:Button runat="server" id="btnShowDate" CssClass="showDate" ... />

使用这些类作为选择器，例如：

$(function() {
  $(".showDate").live('click', function() {
    $(".status").fadeOut("slow");
  });
});

由于按钮在更新面板中被替换，因此您需要.live()，因此它也可以在回发后工作。

Answer 2

好的，我想出了如何在更新面板中处理jQuery。这是代码：

<script type="text/javascript" src="scripts/jquery-1.4.1.min.js">
    </script>
    <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
            $(document).ready(function () {
                $("span[id$='lblStatus']").delay(3000).fadeOut(4000, function () {
                    $(this).innerHTML("");
                });
            });
        });

</script>

也许有问题的其他人可以使用它并处理它。谢谢

Answer 3

真的是男人这解决了我的问题！我用过这个：

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
    $(document).ready(function () {
        $("div[id$='MainMessagesPanel']").delay(2000).fadeOut(1500);
    });
});

如何使用Asp.Net中的jQuery淡化更新面板内的标签？

3 个答案: