This post briefly shows how to implement a popup in the Btomic framework.
A Btomic popup can be used to obtain data using a seperate child page without moving away from the current page, thus keeping the layout simple and manageable. The parent page will be greyed out and focus will fall on the popup; always returning to the parent when closing. Using Btomic.Classes.PopupClasses makes this process really easy, managing all the appropriate javascript for you.
Step 1:
Create a new aspx page. This will be your popup page, so make sure to get your naming right. In the head tag of this created page add the following:
<base target="_self" />
This will ensure that popup page does not disappear on postback.
Step 2:
Go to the code behind file and add the following using statement:
using Btomic.Classes;
Step 3:
For the popup to work we have to inherit from a Lookup form, so add the following inheritance to your popup class:
public partial class [MyPopupClassName] : Btomic.Forms.LookupForm
{
Step 4:
This step is very much dependent on what this popup must do. In most cases we want a popup to obtain a value or two from user input and return that value or values. These are simply variables that we must load into the Lookup form before we can use them. In the next step it will hopefully become clearer. It is not necessary to load these variables, only do this if there are values to return to the parent page.
To define our variables we have to override the LoadVariables method inside the popup class:
public override void LoadVariables(PopupWindowItems items)
{
items.Add("MyVariable1");
items.Add("MyVariable2");
...
}
Step 5:
Again this step is dependent on the use of the popup, but the routine stays basically the same. On some event you would want to close the popup and return the variables defined in step 4, with some values set. It is not necessary to send back any values, even if they are loaded, but that seems a bit pointless then:
protected void [MyClosingEventMethodName](object sender, EventArgs e)
{
this.PopupVariables["MyVariable1"].Value = [SomeControlName].Text;
this.PopupVariables["MyVariable1"].Value = SomeControlName].SelectedText;
...
CloseLookup();
}
The content of this step basically updates the variable values in the parent page and then calls a function to close the popup. We will talk more about this a bit later in the post. Make sure to set the popup variables on the same postback of that when CloseLookup() is called. To keep it simple; it is best to set it in the same method as when you submit the values. If this is not done, the values will get lost and empty values will get sent back.
Step 6:
Finish the page up to do all the work that needs to be done, make it look pretty and make sure to take in mind that this page will be displayed in a much smaller area as the parent page.
That is all we have to do for the popup page… Now for the parent page
Step 7:
Moving to the page where we want to call the popup from, we have to do some work in the code behind file. Make sure that the following using statement is defined:
using Btomic.Classes;
Step 8:
We don’t need to inherit anything from the page class file, but we need to define the following global variable:
protected Btomic.Classes.PopupCallingClass Popup;
Step 9:
This is an important step, so take care to get this right. Go to your html code for this page and add the input controls that will get updated when the popup closes. This can be of any type control as long as it is an html input control, for example:
...
...
Take Note that we need the same number of controls here than the number of variables we loaded in the popup page; each variable can be associated with a control as defined above.
Step 10:
For the popup to know which controls gets updated we need to override the OnInit method and add the following code:
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
Popup = new PopupCallingClass(this.Page, this.UniqueID, “[PopupUrl]”, 640, 400);
Popup.Items.Add("MyVariable1", "", [inpIDName].ClientID);
Popup.Items.Add("MyVariable2", "", [inpIDName].ClientID);
...
Popup.RegisterScript();
[MyControl].Attributes.Add("onclick", Popup.CallMethodName);
}
Here the Popup gets initialized, always passing this.Page and this.UniqueID , with the popup page’s url as a string and the size it will have. Next we need to associate the variables with the controls, taking care that the first argument of Popup.Items.Add is exactly equal to the variable names loaded in the popup page from step 4:
public override void LoadVariables(PopupWindowItems items)
{
items.Add("MyVariable1");
items.Add("MyVariable2");
...
}
Popup.Register generates and injects the appropriate javascript to the parent/calling page. To call the popup from a control you need to call the generated method name, but you don’t need to worry too much about that, just make sure the variable names corresponds correctly to the popup page’s loaded variables.
Step 11:
This step is only needed if you want to take some action when the popup closes from the parent page. Just add a line of code to the OnInit method to add a event handler for the PopupClosing event before RegisterScript() is called:
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
Popup = new PopupCallingClass(this.Page, this.UniqueID, “[PopupUrl]”, 640, 400);
Popup.Items.Add("MyVariable1", "", [inpIDName].ClientID);
Popup.Items.Add("MyVariable2", "", [inpIDName].ClientID);
...
<strong>AddUserPopup.ClosePopup += new EventHandler(Popup_ClosePopup);strong>
Popup.RegisterScript();
[MyControl].Attributes.Add("onclick", Popup.CallMethodName);
}
And create a new method to handle the event:
protected void Popup_ClosePopup(object sender, EventArgs e)
{
//Some Code
}
And you are done!
Update:
When an asp button is used to call the popup, the popup will appear and quickly disappear again. This is because the parent page does a postback. To prevent this make sure the button is a html button that does not invoke a postback.
