代码之家 › 专栏 › 技术社区 › Alex P

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

html-helper asp.net-mvc jquery c#

Alex P · 技术社区 · 16 年前

我正在使用 HtmlHelper 要向用户显示更新,请执行以下操作:

在网页中:

<%=Html.CourseUpdateNotification() %>

在我的控制器中:

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

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

此时,对用户的通知将保留在屏幕上,直到用户离开页面或刷新页面(如预期)。

我想要达到的效果是显示通知,但在3秒钟后淡出。

我尝试通过以下jquery实现这一点:

(注: HTMLHelp 使用 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,我是否遗漏了一些更基本的东西,以及如何在页面加载后访问它?

洞察总是被欣赏的。

3 回复 | 直到 16 年前

Charlino 16 年前

尝试取出附加的 $(function() { 线。

例如。

$(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);

等

Charlino 16 年前

另外,如果您使用jquery 1.4,则可以使用 .delay() 方法。

我一点也没试过,但我想我也许能做这样的事。

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

HTHs
查尔斯

Alex P 16 年前

经过一些研究,我认为问题在于 HtmlHelper 格式化了。

最初我把这个放在 HTMLHelp :

    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>

相反,我改变了 HTMLHelp 要将字符串格式化如下:

    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(hat tip to Charlino )

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

最后,我发现有趣的是类名周围缺少撇号并没有阻止CSS正确地呈现HTML。我(天真地)一开始就认为,没有撇号的HTML片段正确呈现意味着这不可能是jquery fadeout效果为什么对我不起作用的问题…