在 C# ASP.Net 应用程序中使用 JavaScript 淡入和淡出（闪烁）文本答案

【问题标题】：Fade in and out (flashing) text using JavaScript in C# ASP.Net application在 C# ASP.Net 应用程序中使用 JavaScript 淡入和淡出（闪烁）文本
【发布时间】：2018-12-03 10:11:06
【问题描述】：

在我的应用程序 (WebForm ASP.Net) 的一部分中，我更改了网页上的文本。为了让用户注意更改，我想淡出文本直到完全消失，然后更改文本，然后淡入以显示新文本。

我已经在 JavaScript 中部分实现了这一点。我可以使用以下代码淡出和淡入文本：

JavaScript

<script type="text/javascript">
    function toHex(d) {
        return ("0" + (Number(d).toString(16))).slice(-2).toUpperCase()
    }

    var direction = 1;
    var timer_is_on = 0;
    var rgb = 0;

    function timedCount() {
        var lab = document.getElementById('lblMessage');
        if (direction == 1) {
            rgb = rgb + 15;
        }
        if (direction == -1) {
            rgb = rgb - 15;
        }
        lab.style.color = "#" + toHex(rgb) + toHex(rgb) + toHex(rgb);;
        if (rgb >= 255 || rgb <= 0) {
            if (direction == 1) {
                direction = -1;
            }
            else {
                timer_is_on = 0;
                return;
            }
        }
        setTimeout(timedCount, 50);
    }

    function startEffect() {
        if (!timer_is_on) {
            timer_is_on = 1;
            direction = 1;
            rgb = 0;
            timedCount();
        }
    }
</script>

ASPX

<form id="frm" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="pnlMain" runat="server">
        <ContentTemplate>
            <div style="width: 400px; margin: 0 auto; text-align: center; font-size: x-large">
                <span id="lblMessage">No Record is Selected</span>
            </div>
            <button onclick="startEffect()">Start!</button>
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

问题

我不知道两件事：

淡出完成后如何更改文本
如何在 C# 中通过代码隐藏执行所有这些操作。

注意：我想在没有 jQuery 或任何其他 JavaScript 库的情况下这样做。

【问题讨论】：

只是一个建议，如果你用css动画代替淡入淡出会更好。至于您的问题，不清楚您要更改文本的内容。对于您的第二个问题，您不能真正将 js/css 代码放入 c# 中，因为每个代码都有不同的用途。制作你的东西有点问题，因为你使用的是网络表单，它们基于回发工作，回发会用新数据重新加载你的页面，这破坏了用户与带有 js/css 动画的页面的“交互”点。
你是对的。我尝试了很多事情，但由于所有 asp.net 回发和更新面板的技巧都无法使其工作。我认为我最大的问题是将 JavaScript 与 Code-Behind 混合在一起。如果都是 JS，那会容易得多，但我涉及到服务器端代码。
如果可以的话，你应该尝试 MVC 而不是 webforms，如果你需要继续使用 webforms，那么根据数据量，你可以通过 ajax 调用获取它们并通过自己的处理程序和适当地应用 js/css，或者您可以使用数据创建页面并更改可见性，或者更改回发数据并只是淡入动画，转储淡出，这样您就不会延迟用户获取页面使用新数据。无论如何使用css动画会更好。

标签： javascript c# css asp.net webforms

【解决方案1】：

我认为可能有一些 CSS 技术可以让这段代码更简单、更短，但为了让你的代码与所有浏览器兼容，我遵循你的做法。

您需要将新消息传递给您的 JS 函数。我还更改了 JS 以传递控件的 Id，以便您可以将代码用于页面中的多个元素。

<script type="text/javascript">
    function toHex(d) {
        return ("0" + (Number(d).toString(16))).slice(-2).toUpperCase()
    }

    var direction = 1;
    var timer_is_on = 0;
    var rgb = 0;

    function timedCount(controlId, newMsg) {
        var lab = document.getElementById(controlId);
        if (direction == 1) {
            rgb = rgb + 15;
        }
        if (direction == -1) {
            rgb = rgb - 15;
        }
        lab.style.color = "#" + toHex(rgb) + toHex(rgb) + toHex(rgb);
        if (rgb >= 255 || rgb <= 0) {
            if (direction == 1) {
                direction = -1;
                lab.innerText = newMsg;
            }
            else {
                timer_is_on = 0;
                return;
            }
        }
        setTimeout(timedCount.bind(null, controlId, newMsg), 50);
    }

    function startEffect(controlId, newMsg) {
        if (!timer_is_on) {
            timer_is_on = 1;
            direction = 1;
            rgb = 0;
            timedCount(controlId, newMsg);
        }
    }
</script>

还要解决回发问题，您需要使用隐藏字段来解决问题。这很重要，否则您的文本将在回发时恢复。

<form id="frm" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="pnlMain" runat="server">
        <ContentTemplate>
            <asp:HiddenField ID="hfMessage" runat="server" />
            <div style="width: 400px; margin: 0 auto; text-align: center; font-size: x-large">
                <asp:Label ID="lblMessage" runat="server" Text="No Record is Selected"></asp:Label>
            </div>
            <asp:Button ID="btnFlash" runat="server" Text="Change Text" OnClick="btnFlash_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

这是代码隐藏

protected void Page_Load(object sender, EventArgs e)
{
    // on first load, store the text message in hidden field
    if (!Page.IsPostBack)
    {
        hfMessage.Value = lblMessage.Text;
    }

    if (Page.IsPostBack)
    {
        // on postback, set the text message from hidden field which is populated in button click
        lblMessage.Text = hfMessage.Value;
    }
}

protected void btnFlash_Click(object sender, EventArgs e)
{
    // This would be your message, I just used a date-time to create dynamic message.
    string newMessage = DateTime.Now.Second.ToString() + " Records Selected";

    // store the new message in hidden field to change the text on post-back, otherwise your message will be restored on post-back
    hfMessage.Value = newMessage;

    // call JS from code-behind, pass the control ID and the new message
    ScriptManager.RegisterStartupScript(this, GetType(), "flash", "startEffect('lblMessage', '" + newMessage + "');", true);
}

这是一个具有挑战性的问题:)

【讨论】：