Display messages in C# Web application without message box

Hi Experts,

I'm trying to display messages (error, event, output) in a web application, but without using a message box. I'd like the application to just flush the messages without having the user click on the message box.

I saw something like this in the attached screen shot. The messages seem to just hover in the browser. They disappear after some time.

What is the best control to use for this purpose using Visual Studio?

Thank you in advance.


error-sample.bmp
browser_bgdAsked:
Who is Participating?
 
ScarvaciConnect With a Mentor Commented:
1. You can make string message global like this string static message = "";

  and to add message simple use message += "error occur'";

 then call DisplayMessage(message, page) at the end of all error checking
0
 
ScarvaciCommented:
There many different way to implement this, this what I will do.

  // any error event occur
  Literal msg = new Literal();
  msg.Text = "<div id='message'>msg</div>";
   Controls.Add(msg);

Then use JQuery to hide it have 5 seconds
  setTimeout(function() {
    $('#message').hide();
  }, 5000);

And use CSS to make message float
#message {
  position:absolute;
  top:0px;
  left:100px;
  z-index:99;
}
0
 
browser_bgdAuthor Commented:
Thanks for your prompt response Scarvaci.

I am using a web user control which generates these messages/events.
I could use some help on connecting the script code you provided with the web user control. Should the code be inserted in the WebUserControl1.ascx.cs or in the Default.aspx file which uses the WebUserControl1?

0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
ScarvaciCommented:
Hi browser_bqd,

You can add script code in three differnt ways:
1. create script file as script.js and use in <head> tag to link this script file
<head>
...
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
...
</head>
eg.
create file script.js and include this:
  $(document).ready(function() {
    setTimeout(function() {
    $('#message').hide();
    }, 5000);
  });

2. use <script> in default.aspx
eg.
<script language="javascript" type="text/javascript">
  $(document).ready(function() {
    setTimeout(function() {
    $('#message').hide();
    }, 5000);
  });
</script>
3. use RegisterClientScriptBlockto add script on the run
eg.
// in load page
if (!Page.ClientScript.IsClientScriptBlockRegistered("message"))
            Page.ClientScript.RegisterClientScriptBlock( typeof(Page), "message", stringScriptBody);

you need to download latest JQuery script http://jquery.com/
0
 
browser_bgdAuthor Commented:
OK, after adding the script how can I execute it? I should pass the string "stringScriptBody ", right?

Thanks again
0
 
ScarvaciCommented:
Hi Browser_bgd

So i guess you prefer using 3rd option.

stringScriptBody is an object of string.

Also get jquery-1.4.2.min.js file from jquery.com and put where the website is and add script in <head> body as <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>


if (!Page.ClientScript.IsClientScriptBlockRegistered("message")) 
{
string stringScriptBody = @"<script language='javascript' type='text/javascript'>$(document).ready(function() {   setTimeout(function() {   $('#message').hide();  }, 5000);  }); </script>";
Page.ClientScript.RegisterClientScriptBlock( typeof(Page), "message", stringScriptBody);
}

Open in new window

0
 
ScarvaciCommented:
also you can include js through code like this if you don't like adding jquery in <head> tag.

string url="http://code.jquery.com/jquery-1.4.2.min.js";

if (!Page.ClientScript.IsClientScriptIncludeRegistered("jquery"))
  Page.ClientScript.RegisterClientScriptInclude("jquery",url);

Open in new window

0
 
browser_bgdAuthor Commented:
Sorry,  I did not formulate the question well.

After the script is included, how do I pass on a message text to be displayed, i.e. how do I invoke the script?
0
 
ScarvaciCommented:

public void WriteMessage(Page page, string message)
{
  Literal msg = new Literal();
  msg.Text = "<div id='message'>" + message + "</div>";
  page.Controls.Add(msg);
} 

// or

//
.. in error event
//
  string message = "Error Found: Blah blah";
  Literal msg = new Literal();
  msg.Text = "<div id='message'>" + message + "</div>";
  Controls.Add(msg);

Open in new window

0
 
browser_bgdAuthor Commented:
Ok, I understand the syntax, I'm just getting a little confused here.

Let's say I'd like to place all of jscript code in script.js and add the file to Default.aspx.

1. What would be the content of script.js file?
2. The file would be added by:
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
right?
3. How would I call a jscript method/function from WebUserControl1 to display the text message?

Thanks
0
 
ScarvaciCommented:
Ok...let start from stratch.

1. content of script.js:
  $(document).ready(function() {
    setTimeout(function() {
    $('#message').hide();
    }, 5000);
  });

2. That correct
3. That jscript will execute as soon the page is load, what this script will do is to look for div with id="message" and put timer for 5 second, then this div will hide.
So to display the message coming from WebuserControl1 such as this.
  string message = "Error Found: Blah blah";
  Literal msg = new Literal();
  msg.Text = "<div id='message'>" + message + "</div>";
  Controls.Add(msg);
this code is basically putting <div> tag in the page and display it and it will hide after 5 second cause by script.js.

If you would like to test if script.js working? just add one line after $(document).ready(function() {
 alert("hello");
and it will popup the message to see if script.js and jquery script working.
0
 
browser_bgdAuthor Commented:
OK, almost there.

The alert message "hello" is displayed on page load. So, steps 1 and 2 are completed.
But when the Controls.Add(msg) is inserted in WebuserControl1the message "...does not exist in current context" is displayed. Which class does Controls belong to? Should I add a reference?

Thanks for being considerate.
0
 
ScarvaciCommented:
Ok, almost there :)

Is there any way to get Controls such as TextBox or anything? even Page? What do you use WebuserControl for?

can you add <asp:Literal ID="msg" runat="server" /> in WebuserContro1 and just add message in it? like
msg.Text = "<div id='message'>" + message + "</div>"; ?

S.
0
 
browser_bgdAuthor Commented:
Looks like we're in business. :) You're the right person for this matter.

Just a few more clarifications:
1. If I want to use this Control from classes other than WebUserControl1, should I always use the Controls.Add(msg) method, i.e. should the control be added every time a message is displayed?
2. Can you please explain briefly, in "start from scratch" manner, the use of CSS sheet in this case?

B.
0
 
ScarvaciCommented:
1. There should be one message,  such as Controls.Add(msg) which is add <div> tag to anywhere on the page.  And use CSS to move this <div> tag to specific location of the page as you prefer.

2. Do you have simple css file? such as style.css or something?
add this
#message {
  position:absolute;
  top:0px;
  left:100px;
  z-index:99;
}

which is move this <div id='message'> tag to top of page with 100px from the left side.

To include this style.css by using
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
in <head> tag
0
 
browser_bgdAuthor Commented:
Hello Scarvaci,

1. Like you suggested, a method for message display is created. And when a single message is displayed it works perfectly fine. But, when several messages are to be displayed, like series of events, only one of them is displayed. Is there a way to perform something like System.Windows.Forms.TextBoxBase.AppendText, i.e. display multiple lines in this control?

2. I'll try with styleSheet.css and I let you know how it went.

Thanks... again...
public void DisplayMessage(string message, WebUserControl1 wuc1)
        {
            Literal msg = new Literal();
            msg.Text = "<div id='message'>" + message + "</div>";
            wuc1.Controls.Add(msg);
        }
///...
for (int i = 0; i < Mgrs.Count; ++i)
            {
                Mgr sdkMgr = (Mgr)Mgrs[i];
                message = "registering listeners for obj=" + sdkMgr;
                DisplayMessage(message, m_wuc1); 
                //m_wuc1 is a WebUserControl1 object
            }

Open in new window

0
 
ScarvaciCommented:
if you have multiple div tag with id="message" and have css style #message with position:absolute, that will make message overlap and hard to read.

you can display multiple lines in one div tag like

            string message = "";
            for (int i = 0; i < Mgrs.Count; ++i)
            {
                Mgr sdkMgr = (Mgr)Mgrs[i];
                message += "registering listeners for obj=" + sdkMgr + "<br>"; // need line break?
                //m_wuc1 is a WebUserControl1 object
            }
            DisplayMessage(message, m_wuc1);
0
 
browser_bgdAuthor Commented:
1. The messages are overlapping even with line break <br> . They are displayed through message boxes though. It seems they are coming in really fast.

2. The stylesheet is added

<head runat="server">
    <title></title>    
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="message_script.js"></script>
    <link rel="stylesheet" href="/css/Stylesheet1.css" type="text/css" media="screen">
</head>

Is there a way to test it?

but, it doens't seem to affect the display. :(

0
 
ScarvaciCommented:
1.  Need to call DisplayMessage method once but you can stack up in message string before call on DisplayMessage

2. stylesheet seem fine to me.  To test it..change color font in #message (where #message in Stylesheet1.css) like
#message { color:Red; }

S.
0
 
browser_bgdAuthor Commented:
1. I see what my problem is. There are several listeners in place, and they are invoking the DisplayMessage method simultaneously.
What would be the best way to display all of them?
Or maybe write them to a log file?

2. Works great! Again, my mistake, I didn't place Stylesheet1.css file in css folder.

Thanks
0
 
browser_bgdAuthor Commented:
It helped a lot. Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.