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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

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
ScarvaciCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
browser_bgdAuthor Commented:
It helped a lot. Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.