如何在Asp.Net中使用jQuery淡出UpdatePanel中的标签？

Question

我想在按钮事件后淡出这个标签。 我使用了一个MasterPage，并且Script Manager已经在MasterPage中声明。 在Default.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;
}

问题是标签在按钮单击后没有淡出。 有人有处理这个问题的想法吗？ 谢谢。

- sacrament

Answer 1

在渲染的页面中，ID并不是您想象中的那样，ASP.Net会对其进行一些处理，像这样：

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

所以你需要一个类似于属性结尾选择器，就像这样：

$(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()，以便它在后续的回发之后也能正常工作。

- Nick Craver

---

我正在使用以下代码：$(function() { $("input[id$='btnShowDate']").click(function() { $("span[id$='lblStatus']").fadeOut("slow"); }); }); - sacrament

@sacrament - 你能发布一下你的HTML渲染后的样子吗？ - Nick Craver

对不起，我刚忘记更改那个按钮的ID，所以它应该是btnShowDate而不是btnAddComment。 - sacrament

@sacrament - 你能发一下您渲染的标记，即页面在浏览器中的样子，可能是在一个 fiddle 或其他什么东西中吗？ 你发布的所有代码都不匹配，所以我不确定您的页面看起来像什么，请将您的 HTML 放置在此处并点击更新，然后评论链接：http://jsfiddle.net/ZPBFm/ - Nick Craver

@sacrament - 尝试将整个渲染后的页面（就像你评论的输出）发布到这里：http://pastebin.com/。 - Nick Craver

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>

也许其他遇到问题的人可以使用它并解决问题。 谢谢。

- sacrament

---

大家好！能否有人帮我解决这个问题：http://stackoverflow.com/questions/18998240/how-to-get-click-event-using-jquery-when-control-is-in-updatepanel-in-asp-net/18998453?noredirect=1#comment28079793_18998453 - SHEKHAR SHETE

Answer 3

非常感谢，这解决了我的问题!!! 我使用了以下代码：

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

- Emad