How to handle save situations in asp.net?

[Guest]

Hi,

I have a Website which allows users to input data. After they finished entering data they can click a button to save their input. Problem now is, that I have no possibility to visualize that the page is being saved and when it is (hopefully) done saving.
I thought about a modal window being opened using JavaScript when they click the save button telling them that the data is being saved. After saving is completed I could use “Page.RegisterClientScriptBlock†to execute a client script closing the modal window. One problem though I could imagine is how to identify the modal window when I want to close it (using “Page.RegisterClientScriptBlockâ€) and what to do if the users close this window using “Xâ€. Is there any way in JavaScript to be able to test whether the window is still available?

Does anybody know some “best practices†on how to handle this situation? Thank you!

Daniel

 

[Andy Fish]

I presume you want to put something on the screen between the user clicking
the save button and the new page displaying.

I would be inclined to use DHTML to update the existing page rather than
trying to pop up a new window.

As soon as the user clicks the button, either use document.write() to
rewrite the page to say 'saving changes' or use 'div' tags to make a message
appear. then post the form

Hi,

I have a Website which allows users to input data. After they finished

entering data they can click a button to save their input. Problem now is,
that I have no possibility to visualize that the page is being saved and
when it is (hopefully) done saving.

I thought about a modal window being opened using JavaScript when they

click the save button telling them that the data is being saved. After
saving is completed I could use "Page.RegisterClientScriptBlock" to execute
a client script closing the modal window. One problem though I could imagine
is how to identify the modal window when I want to close it (using
"Page.RegisterClientScriptBlock") and what to do if the users close this
window using "X". Is there any way in JavaScript to be able to test whether
the window is still available?

 

[Andy Fish]

you can't really do modal dialogs in a web application. AFAIK there is no
way to stop the user clicking on the window behind

if you use the div approach you can make the buttons invisible just before
posting the form which will stop the user clicking twice.

of course, the user could still use control-n or shift-click to get 2
windows open on the same page, then he could click save in both.

Andy,

Thank you for your answer. The reason for opening a modal dialog was that

I want to prevent users from clicking the save button multiple times. One
idea though might be to disable the button on the client and enabling it
again after the page was posted back. Though this might be good enough I
still would be interested to know if somebody knows how to handle a modal
window.

 

[Joe Fallon]

This is a free control which only allows 1 click:
http://www.metabuilders.com/Tools/OneClick.aspx
--
Joe Fallon

Andy,

Thank you for your answer. The reason for opening a modal dialog was that

I want to prevent users from clicking the save button multiple times. One
idea though might be to disable the button on the client and enabling it
again after the page was posted back. Though this might be good enough I
still would be interested to know if somebody knows how to handle a modal
window.

 

[Andy Fish]

Andy,

You actually can by using the window.showModalDialog method of JavaScript. Check out the following link:
http://msdn.microsoft.com/library/d...r/dhtml/reference/methods/showmodaldialog.asp

true, but this is an IE extension and AFAIK it does not work on other
browsers. I've never used it for that reason but if you can afford to
restrict your app to IE only, it could well be a solution for you.

presumaby in this case you would need to pass all the form data to the
dialog window and submit it to the server from there (since, by definition,
you can't be doing anything in the main window while the dialog is shown)

Andy

 

[Andy Fish]

I tried the demo and for me I could click twice and it still said "only
clicked once"

I needed to click 3 times or more for it to say "more than once"

 

[Steven Cheng[MSFT]]

Hi Daniel,

As for the ModalDialog means you mentioned, I've done a test on my side. I
show a ModalDialog after the user hit the submit button and before the page
be postedback. However, it seems that the Modal dialog will block all the
opener page's processing , in other word, the postback of the opener page
will be blocked until the modaldialog page is closed. I've paste my test
page's code at the bottom, you may also have a test on your side to have a
check.
In addition, I think Andy's suggestion that use a <div> is also
reasonable.

===============aspx page========================
<HTML>
<HEAD>
<title>MDTest</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
var hMD;

function showMD()
{
window.showModalDialog("Dialog.htm");
}

function closeMD()
{
if(hMD != null)
{
hMD.close();
}
}
</script>
</HEAD>
<body onunload="closeMD()">
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td></td>
</tr>
<tr>
<td>
<asp:Button id="btnPostback" runat="server"
Text="Postback"></asp:Button></td>
</tr>
</table>
</form>
</body>
</HTML>


==========code behind page class=================
public class MDTest : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button btnPostback;

private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
btnPostback.Attributes.Add("onclick","showMD();");
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.btnPostback.Click += new
System.EventHandler(this.btnPostback_Click);
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

private void btnPostback_Click(object sender, System.EventArgs e)
{
try
{
System.Threading.Thread.Sleep(1000*5);
Response.Write("<br>Page is returned at: " +
System.DateTime.Now.ToLongTimeString());
}
catch(Exception ex)
{
Response.Write("<br>" + ex.Message);
}
}
}
===========================================================


Thanks.

 

[Guest]

Steven,

Thank you for your reply. You are as usual very accurate and helpful. Unfortunately your are right in that the modal window stopps the execution of the underlying page. Would you know how to do exactly the same with a normal window. My point is that I assume a user will get less nervous about what’s going on if he got presented with a small window which tells him that his data is being saved. I could open a window in the onClick Event of the SaveButton but have no idea how to identify the window after the postback and close it or add other text to it (e.g. “Successfully Savedâ€) when the data was saved. I know that window.open returns a handler to the window but can I persist this handler during a postback? Another thing is that my code should check after the postback if the window is still available before trying to close/update it.

Thank you Steven,

Best regards
Daniel

 

[Steven Cheng[MSFT]]

Hi Daniel,

Well, its ok to open a normal window to act as this. I've changed my demo
page to popup a modalless dialog. And the window handler can't be
persistent after the page is posted back from serverside. But we don't need
to perisist it after postback. In fact , we can use the <body >'s
"onunload"" event, this event is fired when a page is unloaded, and in
other word, it'll be fired before a page is reloaded after the post back
return. So we can use this event to close the opened dialog. Here is the
modified demo page's code, please have a test on your side if you have any
thing unclear. Thanks.

==================aspx ====================
<HTML>
<HEAD>
<title>MDTest</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
var hMD;

function showMD()
{
window.showModelessDialog("Dialog.htm");
}

function closeMD()
{
if(hMD != null)
{
hMD.close();
}
}
</script>
</HEAD>
<body onunload="closeMD()">
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td><FONT face="ËÎÌå"></FONT></td>
</tr>
<tr>
<td>
<asp:Button id="btnPostback" runat="server"
Text="Postback"></asp:Button></td>
</tr>
</table>
</form>
</body>
</HTML>
==============code behind=================
public class MDTest : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button btnPostback;

private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
btnPostback.Attributes.Add("onclick","showMD();");
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.btnPostback.Click += new
System.EventHandler(this.btnPostback_Click);
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

private void btnPostback_Click(object sender, System.EventArgs e)
{
try
{
System.Threading.Thread.Sleep(1000*8);
Response.Write("<br>Page is returned at: " +
System.DateTime.Now.ToLongTimeString());
}
catch(Exception ex)
{
Response.Write("<br>" + ex.Message);
}
}
}
=============================================================

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Get Preview at ASP.NET whidbey
http://msdn.microsoft.com/asp.net/whidbey/default.aspx

 

[Guest]

Steven,

the modalless dialog did combined with the onunload event the trick. Thank you for your help.

Best regards,
Daniel

 

[Steven Cheng[MSFT]]

Hi Daniel,

As for the synchronize problem when we use validation controls to do
clientside validation on those entry field. I think we can make use of the
some of the buildin clientside script variables (provided by the asp.net
validtoin script file). For example, we can there is a script variable
called "Page_IsValid", its a boolean value, which indicates whether the
page is currently valid. The validation scripts keep this up to date at all
times. You can have a look at the following tech article for detailed
reference:

#ASP.NET Validation in Depth(client validation section)
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnaspp/html
/aspplusvalid.asp

So we need to modify our "showMD" script function, change it as below:
function showMD()
{
if(Page_IsValid == true)
{
window.showModelessDialog("Dialog.htm");
}
}

So the modeldialog won't show if there is validation error on the page.
Also, I find that the page's validation before post back take place after
the button's "onclick" event, so I need to move the "showMD" function's
call time from the submit button's "onclick" event to the <form> 's
"onsubmit" event.

Below is my whole modified page, you can refer to it if you have anything
unclear:

=================aspx ========================
<HTML>
<HEAD>
<title>MDTest</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
var hMD;

function showMD()
{
if(Page_IsValid == true)
{
window.showModelessDialog("Dialog.htm");
}
}

function closeMD()
{
if(hMD != null)
{
hMD.close();
}
}
</script>
</HEAD>
<body onunload="closeMD()">
<form id="Form1" method="post" runat="server" onsubmit="showMD()">
<table width="100%" align="center">
<tr>
<td>
<asp:TextBox id="txtData" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator id="rfvData" runat="server"
ErrorMessage="Field Missing!"
ControlToValidate="txtData"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:Button id="btnPostback" runat="server"
Text="Postback"></asp:Button></td>
</tr>
</table>
</form>
</body>
</HTML>
==============code behind=====================

No big changes, only remove the following line of code from the Page_load
event

btnPostback.Attributes.Add("onclick","showMD();");

so as not to call the "showMD" script function in button's "onclick", we
need to move it to the <form>'s
"onsubmit"
===============================

Thanks.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Get Preview at ASP.NET whidbey
http://msdn.microsoft.com/asp.net/whidbey/default.aspx

 

[Guest]

Steven,

YOU are definitely a life-saver

Thank you a great lot!

Daniel

 

[Steven Cheng[MSFT]]

Hi Daniel,

Thanks a lot for your followup and I'm also very glad that my suggestion
has helped you.
Have a good day!

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Get Preview at ASP.NET whidbey
http://msdn.microsoft.com/asp.net/whidbey/default.aspx