Question

我正在使用HtmlHelper向用户显示更新，如下所示：

在网页中：

<%=Html.CourseUpdateNotification() %>

在我的控制器中：

public ActionResult UpdateOnceOnlyCourseRecord(some parameters)
{
    //validation code etc...
    //Save to database etc...

    TempData["CourseUpdateNotification"] = "Success";
    return RedirectToAction("ShowCourses", "Course");
}

此时，用户的通知仍保留在屏幕上，直到用户离开页面或刷新页面为止（如预期的那样）。

我想要达到的效果是显示通知，然后在3秒后将其淡出。

我尝试使用以下jQuery实现此目的：

（注意 - HtmlHelper使用TagBuilder创建具有类属性div的{{1}}

feedback-complete

不幸的是，这对我不起作用，我无法理解为什么。我尝试了一些变体，包括$(document).ready(function() { $(function() { if ($('div.feedback-complete').length > 0) //Check if exists { setTimeout(function() { $('div.feedback-complete').fadeOut(); }, 3000); } }); });等，但无济于事。

我是否遗漏了一些关于HtmlHelper的更基本的内容以及在页面加载后如何访问它？

洞察力总是受到赞赏。

Answer 1

尝试取出额外的$(function() {行。

E.g。

$(document).ready(function() {
    if ($('div.feedback-complete').length > 0) //Check if exists
    {
        setTimeout(function() { $('div.feedback-complete').fadeOut(); }, 3000);
    }
});

HTHS，
查尔斯

编辑：好的，如果这不起作用，试试这个。

setTimeout(function() { jQuery('div.feedback-complete').fadeOut(); }, 3000);

如果这不起作用，那么你需要找出问题所在。我建议将它剥离回基础并从那里移动。

首先尝试一下：

setTimeout("alert('I am displayed after 3 seconds!')", 3000);

如果按预期工作，请尝试以下方法：

setTimeout(function () { alert('I am displayed after 3 seconds!'); }, 3000);

或者这个：

setTimeout("jQuery('div.feedback-complete').fadeOut()", 3000);

Etc等

Answer 2

作为替代方案，如果您使用的是jQuery 1.4，则可以使用新的.delay()方法。

我自己并没有尝试过，但我认为可以做这样的事情。

$(document).ready(function() {
    $('div.feedback-complete').delay(3000).fadeOut();
});

HTHS，
查尔斯

Answer 3

经过一番研究后，我认为问题是我的HtmlHelper的返回字符串是如何格式化的。

最初我在HtmlHelper：

中有这个

    public static class NotificationHelper
    {
        public static string PasswordNotification(this HtmlHelper html)
        {
        //Other code...
        return "<div class=feedback-complete><img src=/Images/SuccessTick.png class=notification-icon alt=success>Your password has been succesfully saved</div>";

在Html中这样呈现（注意类名周围缺少撇号）：

<div class=feedback-complete><img src=/Images/SuccessTick.png class=notification-icon alt=success>Your password has been succesfully saved</div>

相反，我更改了HtmlHelper以格式化字符串，如下所示：

    public static class NotificationHelper
    {
        public static string PasswordNotification(this HtmlHelper html)
        {
        //Other code...
        return String.Format("<div class='{0}'></label><img src=/Images/SuccessTick.png class='{1}'alt=success>Your password has been succesfully saved</div>", "feedback-complete", "notification-icon");

然后呈现围绕类名称'的Html

<div class='feedback-complete'><img src=/Images/SuccessTick.png class=notification-icon alt=success>Your password has been succesfully saved</div>

一旦我改变了上述内容，我使用以下jQuery（帽子提示到Charlino）获得了我在寻找3秒延迟后的淡出效果

setTimeout("jQuery('div.feedback-complete').fadeOut()", 3000);

最后，我觉得有趣的是，类名周围缺少撇号并没有阻止CSS正确呈现Html。我（天真）首先假设html片段在没有撇号的情况下正确呈现的事实意味着这不能解释为什么jQuery淡出效果对我不起作用......

如何在页面加载时淡出HtmlHelper呈现的用户通知？

3 个答案: