Displaying messages to user from ASP.NET using jQuery

In developing various web application in ASP.NET I find myself needing to send messages back to the user after various actions have been performed. For examples if files have been uploaded successfully or a database record has been updated. Also, if there are errors I want to notify the user.

So far I have been creating server side variables that contains the messages I want t开发者_StackOverflow中文版o display to the users and then using ASP.NET Label controls that are initially hidden but then made visible on postback to display the messages. This works well, but I would really like the option to display some messages in a modal jQuery windows so that I can assure they see the message.

Can anyone suggest some frameworks or perhaps techniques they have found useful to accomplish this task? Thanks.

I use the showmessage jquery plugin combined with some extension methods on the Page like this:

    /// <summary>
    /// Shows the errors.
    /// </summary>
    /// <param name="page">The page.</param>
    /// <param name="text">The text.</param>
    public static void ShowError(this Page page, string text)
    {
        ShowNotification(page, NotificationType.Error, text, false);
    }

    /// <summary>
    /// Shows the information.
    /// </summary>
    /// <param name="page">The page.</param>
    /// <param name="text">The text.</param>
    public static void ShowInformation(this Page page, string text)
    {
        ShowNotification(page, NotificationType.Information, text, true);
    }

    /// <summary>
    /// Shows the errors.
    /// </summary>
    /// <param name="page">The page.</param>
    /// <param name="text">The text.</param>
    public static void ShowNotification(this Page page, NotificationType notificationType, string text, bool autoClose)
    {
        string className = null;
        switch (notificationType)
        {
            case NotificationType.Error:
                className = "fail";
                break;
            case NotificationType.Information:
                className = "notification";
                break;
            case NotificationType.Success:
                className = "success";
                break;
        }

        string notification = "jQuery('body').showMessage({'thisMessage':['" + text.Replace(Environment.NewLine, "','") + "'],'className':'" + className + "','autoClose':" + autoClose.ToString().ToLower() + ",'delayTime':4000,'displayNavigation':" + (!autoClose).ToString().ToLower() + ",'useEsc':" + (!autoClose).ToString().ToLower() + "});";

        if (RadAjaxManager.GetCurrent(page) != null)
        {
            RadAjaxManager.GetCurrent(page).ResponseScripts.Add(notification);
        }
        else
        {
            if (ScriptManager.GetCurrent(page) != null)
            {
                ScriptManager.RegisterStartupScript(page, page.GetType(),
                                                    "notification",
                                                    notification,
                                                    true);
            }
            else
            {
                page.ClientScript.RegisterStartupScript(page.GetType(),
                                                        "notification",
                                                        notification,
                                                        true);
            }
        }
    }

    /// <summary>
    /// Shows the notifications.
    /// </summary>
    /// <param name="page">The page.</param>
    /// <param name="text">The text.</param>
    public static void ShowSuccess(this Page page, string text)
    {
        ShowNotification(page, NotificationType.Success, text, true);
    }
}

It's not perfect but it does what I want, it's simple and everything is in one place.

One of the simplest ways is to use pagemethods and have your client side check a page method to see if there are any messages to display. This however dose use a soap type object call. If you want to use a more restfull solution I would suggest using wcf get service and performing a timed check or using the callback as the way to notify the client.

Both options will provide the data you need however I would try the page methods first as it is shorter to implement.

The best by far is using ajax in combination with the asp.net mvc3 framework and razor, which implements a concept called unobstrusive javascript. See http://www.asp.net/mvc/tutorials/creating-a-mvc-3-application-with-razor-and-unobtrusive-javascript for a walkthrough.

I prefer to have a hiddenfield that i check with my Javascript for a value. If a certian value is there then i show my modal. I still use the label for the the display. When it calls the modal popup reset the hidden field value to null.

I am sure the pros answers are the most correct and correct way of doing what you asked for. But if you are like me and do not really fully understand the answers take a look at my simple solution.

In a class that i load - and most certainly in your code you can place such a sub

Public Shared Sub messageBox(ByVal SimpleSingleLineString As String)
    System.Web.HttpContext.Current.Response.Write("alert(""" & SimpleSingleLineString & """);" & vbNewLine)
End Sub

When you need to display a popup from any aspx code relativly simply

 Catch ex As Exception
        messageBox("We apologise but we could not connect to the help servers at this moment. Please try again in 1 to 5 minutes. Error 100")
    End Try

I have jQuery loaded. I cannot remember if it has to be loaded but certainly JAVASCRIPT support needs to exist.

These are ASP pages and I do not load any other classes or attach any other .js files anywhere.

I did this because I am used to messagebox.show("...") in VB Applications..

EDIT This code does however always get rendered at server side on each call from another page. Like a service. So calling page picks up code on the fly, html,JAVASCRIPT.. etc. It might need slight modification. And the calling page attaches it as a script

<script src="localhost/help.aspx" type="text/javascript"></script>