asked on

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

Scarvaci

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;
}

browser_bgd

ASKER

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?

Scarvaci

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/

browser_bgd

ASKER

OK, after adding the script how can I execute it? I should pass the string "stringScriptBody ", right?

Thanks again

Scarvaci

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

Scarvaci

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

browser_bgd

ASKER

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?

Scarvaci

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

browser_bgd

ASKER

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

Scarvaci

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.

browser_bgd

ASKER

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.

Scarvaci

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.

browser_bgd

ASKER

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.

Scarvaci

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

browser_bgd

ASKER

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

Scarvaci

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

browser_bgd

ASKER

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. :(

Scarvaci

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.

browser_bgd

ASKER

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

ASKER CERTIFIED SOLUTION

Scarvaci

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

browser_bgd

ASKER

It helped a lot. Thanks!