如何在頁面加載時淡出由HtmlHelper呈現的用戶通知？

我使用的是HtmlHelper顯示的更新給用戶，如下所示：如何在頁面加載時淡出由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與class屬性feedback-complete）

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

不幸的是，這並不爲我而努力我無法弄清楚爲什麼。我嘗試了一些變化，包括$(window).load等，但無濟於事。

我是否缺少關於HtmlHelper的更基礎知識以及如何在頁面加載後訪問它？

洞察總是讚賞。

來源

2010-08-16 Alex P

經過一番研究，我認爲這個問題是從我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

最初我在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（帽尖到3秒延遲後找Charlino）

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

最後，我覺得很有意思的是，由於缺乏周圍的類名撇號不正確地顯示HTML停止CSS。我（天真地）從一開始就假定，html片段正確呈現沒有撇號的事實意味着這不可能是爲什麼jQuery淡出效果不適合我的問題...

來源

2010-08-18 17:14:09

很高興聽到您解決您的問題。剛剛閱讀你的答案，'下面的jQuery'看起來不太合適... – Charlino 2010-08-18 18:31:08

@Charlino - 根據你的評論編輯jQuery代碼... – 2010-08-18 19:57:26

嘗試取出額外的$(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);

等等等等

來源

2010-08-16 20:58:51 Charlino

感謝您的迴應 - 我嘗試了你的建議，但它並沒有達到我想達到的效果。我會繼續研究，如果我得到一個解決方案，我會發布它... – 2010-08-17 08:03:18

爲什麼這不起作用，所以它做什麼？ – Stefanvds 2010-08-18 09:07:32

剛剛看到您的編輯。我會給他們一個嘗試（包括您的.delay（）建議下面）... – 2010-08-18 16:45:45

作爲另外，如果你使用jQue 1.4你可以使用新的.delay()方法。

我還沒有嘗試過自己，但我認爲也許可以做這樣的事情。

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

HTHS，
查爾斯

來源

2010-08-18 16:41:00 Charlino

如何在頁面加載時淡出由HtmlHelper呈現的用戶通知？

回答

相關問題