ModalDialogControl

download it:

Introduction

What is it anyway? It is a user control _could be prompted to a custom control later_ that is responsible for providing cross-browser compatible Modal Dialog support.

Some definitions

Dialog: It is any UI component that displays a message and is usually not part of the main window of the application.

Modal: Having a mode, that is the mode of being the only UI component that one can interact with while it is displayed. A modal dialog cannot be deactivated it can only be closed. One cannot interact with anything other than this dialog as long as the dialog exists. An example would be the javascript alert box that is displayed as a result of the following javascript statement:

window.alert(‘this is an alert’);

Cross-Browser: By this we mean that it could display, and behave properly and correctly on the most common web browsers today. Of these we can mention Microsoft’s Internet Explorer and Mozilla’s Firefox, 2 of the most used Web browsers today. Other browsers include: Opera, Netscape Navigator, Safari, Konqueror, etc…

How it all Started

The need is the mother of invention, it is said so. Anyway, I needed to have a cross-browser Modal Dialog, and I already knew that window.ShowModalDialog is IE specific, so the search began, well it did not take that long until I was reading about this javascript control that a guy made. In the core all credit goes to that guy for the javascript he wrote and the idea he implemented. What I did is add some tweaks and configs to his javascript, _important tweaks in my opinion_ and wrapped the whole thing to be directly usable by ASP.NET.

What is it based on

The control is a build upon the work of the guy I mentioned previously, he calls it SubModal, his work can be found at http://www.subimage.com/sublog/subModal _case sensitive. The main idea in brief is based on the use of <div> elements to show layers with a high z-index. The visibility, content and style of the <div> are controlled using javascripts. The main <div> has an <iframe> element in whih the page is loaded and unloaded. For more detailed information on the inner workings of this javascript visit the above link.

What do you need to know

Every thing that you need to know is mentioned in this page, no need to go into the details of the javascript to get it working. A moderate knowledge of what javascript is is required never the less.

Let’s get it working

First things first:

The files that are needed to run the sample are provided as a zip file. If you have VS.NET a project file is also provided. All you need to see the sample at work is to build the project. If you don’t have VS.NET then use csc.exe to compile the C# files into an assembly to get things working, if you still feel that you don’t know what to do consult either a brain doctor or a .NET course.

Important files include:

Common.js some common utility functions
subModal.js the main engine for the Modal Dialog
subModal.css the stylesheet for the dialog and it is necessary to control manythings like visibility and colors and most importantly opacity
ModalDialogControl.ascx, ModalDialogControl.ascx.cs and these are the main files that relate the control to ASP.NET. It is evident that this is a user control and not a custom control _for details on the difference consult MSDN.
SubModalTest.aspx, SubModalTest.aspx.cs [optional] these are required to run the sample
PopupForm.aspx, PopupForm.aspx.cs [optional] these are the files that represent the page that appears as the Dialog itself, required for sample
Alert.aspx [optional] this represents the dialog that simulates a custom alert, required only for sample

Please also note that although many of these files are optional, they are required in real applications, so they should be imitated and followed as templates.

At this point I should mention that I shall not go into the details of the js files since this is not the point of this article. Any information needed on these files can be found at the link I provided earlier.

The Code

Let us first look at the following:

protected string PostBackEvent = "";

private void Page_Load(object sender, System.EventArgs e)

{

PostBackEvent = this.Page.GetPostBackClientEvent(this.refreshButton, "");

}

PostBackEvent is the event used to postback to the server, it is set in the Page_Load event handler. Here we can also notice the refreshButton instance, which is a button that has the Visible propert set to false. It is only used for getting the javascript required to postback as if the button was really clicked.

the following are the 3 main properties of the control, width, height and the page to display:

private string _DialogPage;

private string _DialogWidth;

private string _DialogHeight;

following is the only event needed if we wish to do some post-dialog actions:

public delegate void DialogCommandEventHandler(object sender,EventArgs e);

public event DialogCommandEventHandler DialogFinished;

protected virtual void OnDialogFinished(EventArgs e)

{

if(DialogFinished != null) DialogFinished(this, e);

}

Now the part that writes the necessary javascript that links to the engine:

protected string PostBackEvent = "";

private void Page_Load(object sender, System.EventArgs e)

{

PostBackEvent = this.Page.GetPostBackClientEvent(this.refreshButton, "");

}

public void show()

{

Page.RegisterStartupScript("dialogScript", @"<script>

function popupLoader()

{

showPopWin('" + DialogPage + "', " + DialogWidth + ", " + DialogHeight + @", PostBackMethod);

}

var prev_onload = window.onload;//careful not to have other vars with same name

window.onload = function() {

initPopUp();

popupLoader();

if(prev_onload)

return prev_onload();

else

return true;

};

</script>");

}

There is also a showAlert method to show an alert, the only difference is that the page in showAlert is fixed.

To use the user control the following code needs to be added in the main page where the dialog will appear from:

private void btnDialog_Click(object sender, System.EventArgs e)

{

this.ModalDialogControl1.DialogHeight = "100";

this.ModalDialogControl1.DialogWidth = "500";

this.ModalDialogControl1.DialogPage = "PopupForm.aspx";

this.ModalDialogControl1.show();

}

the above code is located in SubModalTest.aspx.cs and it is the handler for the btnDialog button, where we are showing the dialog.

Here is the code to show an alert using showAlert

private void btnAlert_Click(object sender, System.EventArgs e)

{

this.ModalDialogControl1.ShowAlert("This is a Modal Alert. Thank you...");

}

In the OnInit method we wired the DialogFinished event to an event handler:

override protected void OnInit(EventArgs e)

{

// CODEGEN: This call is required by the ASP.NET Web Form Designer.

InitializeComponent();

base.OnInit(e);

this.ModalDialogControl1.DialogFinished +=

new IceShock.ModalDialog.ModalDialogControl.DialogCommandEventHandler(ModalDialogControl1_DialogFinished);

}

In the event for the dialog all what we did was cause an alert to display:

private void ModalDialogControl1_DialogFinished(object sender, EventArgs e)

{

RegisterStartupScript

("DialogFinished", "<script>alert('this indicates that the event of the dialog has fired');</script>");

}

Now how does the event get fired??

In SubModalTest.aspx we have the following HTML:

when hidePopWin is called with true as parameter, the event will be fired, false the event will not be fired, there will be no postback in the firstplace. When to use true and when to use false? true is used when we need to take action after the dialog has been closed for example by a button for saving the data, if the dialog was for creating a new user for example, so if we need to refresh the main form we need to postback and the event handler in the code takes care of any action we want to give it. false is used when we press a button like a cancel button, there we need not refresh anything.

That is the howto for using the control, 3 properties, an event handler, and proper call of hidePopWin in the onclick of the appropriate button.

I am also providing a file called DialogPage.cs containing a class called DialogPage. This page can be used as a base for any Dialog. The functionality it provides is summerized by:

2 properties: OKButton and CancelButton that can be assigned a button.
the 2 buttons when set are assigned an event handler and proper javascript for setting focus to the CancelButton is generated
the cancel button does not cause the event registered in the main form to be fired, false is the parameter to hidePopWin the opposite happens for the OKButton

Promoting to Custom Control...

Conclusion

We now have a cross-browser compatible Modialog User Control that can be added to any page. Better yet we can build a hirarchy of page classes where we can inherit from our own class rather than the System.Web.UI.Page class, and in our class we can add the user control to the page, so the user control will be available by default in every new page we create, no toil...

For feedback and questions you can post to my Blogs.