Popup at the end of a button event

Ciupaz · February 14th, 2012, 10:10 AM

Hello all,
in my aspx page I have a button that save several values in the database.
I need to insert a popuup at the end of the operation.
At the moment the code is:

protected void btnSendRequest_Click(object sender, EventArgs e)
{
var myDbAccess = new DBAccess();
Event newEvent = (Event)Session["NewEvent"];

myDbAccess.SaveEvent(newEvent);

// Insert here a PopUp like "Successfully saved!"

}

How can I accomplish this?
Luigi

irProject · February 14th, 2012, 01:57 PM

Hi Luigi
at first: PierLuigi Collina!
There are several ways to do this:

1- show result using a label:

Code:

protected void btnSendRequest_Click(object sender, EventArgs e)
{
var myDbAccess = new DBAccess();
Event newEvent = (Event)Session["NewEvent"];

myDbAccess.SaveEvent(newEvent);


// Show Result
ResultLabel.Text = "Successfully Done!";


}

Note to set EnableViewState property of ResultLabel to false

<asp:Label ID="ResultLabel" runat="server" EnableViewState="false"></Label>

this setting means that 'State' (in a simple word: property values) is not saved in ViewState so Text or Other property value is not available in PostBack. so the displayed message disappears.

================
2- Alert using JavaScript

there are several ways to implement this solution.

2-1:
place a label named 'AlertLabel' at the bottom of your aspx page, and use this command:

Code:

protected void btnSendRequest_Click(object sender, EventArgs e)
{
var myDbAccess = new DBAccess();
Event newEvent = (Event)Session["NewEvent"];

myDbAccess.SaveEvent(newEvent);


// Alert Result
AlertLabel.Text = @"<script type='text/javascript'>
          alert(' Successfully Done! ');
</script>";
}

2-2:
declare a protected or public property named 'ShowSuccess' and use it in aspx page:

Code:

protected bool ShowSuccess;

protected void btnSendRequest_Click(object sender, EventArgs e)
{
var myDbAccess = new DBAccess();
Event newEvent = (Event)Session["NewEvent"];

myDbAccess.SaveEvent(newEvent);


// Show the Success result
ShowSuccess = true;
}

and in your aspx page use:

HTML Code:

<% if(ShowSuccess){ %>
    <div class='Success'>
        Successfully Done!
    </div>
<% } %>

irProject · February 14th, 2012, 02:11 PM

for better view you can use jQuery methods:

http://www.jQuery.com

http://www.jQueryUI.com

I advice you (!!!) to learn javascript and javascript framworks like jQuery, YUI, etc. because it's really powerful. I've read in microsoft's documents that next generation of Office Word is based on JavaScript and HTML5!
in the next version of JavaScript (2.0) you can define classes, datatypes, inherit classes, make packages, etc. in a simple word (browser based C# or dynamic C#)

Ciupaz · February 14th, 2012, 03:16 PM

So is worth to learn jQuery?
What's the difference between jQuery and jQueryUI?

Luigi

irProject · February 14th, 2012, 03:59 PM

Hi Luigi
jQuery says: write less, do more

for example if you want to load a page (Test.aspx) in a div (with id="page1") you can write:

$("#page1").load("Test.aspx");

it loads test.aspx in page1 div! even you can partially load it:
$("#page1").load("Test.aspx #div1");
the above statement loads div1's value into page1

Google has wrote it's auto-complete with jQuery!

jQuery is one of javascript libraries that I think it's the most powerful js Library. others are: YUI (Yahoo Utility Interface) widely used by yahoo (fully used in Yahoo! Mail), Dojo, MooTools, Prototype, etc
YUI is supported by Yahoo!
jQuery is supported by every one that uses it!

see domes and take a tour
http://jqueryui.com/demos/

in asp.net you can use Microsoft's js library (Microsoft Ajax Library) with useful tools, but jQuery is very light and easy to load.

javascript libraries has grew after AJAX release. I'll write more about jQuery (getting started!) in next posts.

Cheers!

irProject · February 14th, 2012, 04:08 PM

Hi Luigi

jQueryUI provides UserInterface tools for jQuery library.

jQuery can be extended. you can write plugin for jQuery :

HTML Code:

<script type="text/javascript">
jQuery.fn.SomeExtension = function(){
  // do something here
}

// now you can use:
jQuery("#div1").SomeExtension();
</script>

Ciupaz · February 14th, 2012, 04:24 PM

Very interesting, I think I'll buy a book about jQuery.

Luigi