How To: Adding Iframes to Your Existing Project

How to: Adding IFrames to your existing project

Date created: 04/09/2008
Last modified: 04/10/2008
Created by: Scott Lusk

This document gives steps on how to add IFrames to an existing Visual Studio 2005 project. This document is built upon techniques and work already performed in the ISC 559 Graduate Course at the University of South Alabama taught by Dr. Harold Pardue, Spring Semester 2008. If you have any questions or problems feel free to email me at

All code is done using Visual Studio 2005, Visual C# as the programming language. Prior to following the steps in this document you will need to have created the following:

Page containing a GridView that displays a list of items
Page that enables you to add/edit a selected record from the GridView

Step 1 - Adding the Javascript to your project

Obtain the IFrame-Movement.js file and save it somewhere on your computer.
Add the IFrame-Movement.js file to your Project
Right click on your website name and select Add Existing Item

In the Add Existing Item Dialog, find the IFrame-Movement.js file wherever you saved it on your computer and click Add. You should now see this file added to your project

Step 2 – Setting your page up to use the IFrame-Movement.js file

IMPORTANT NOTE: Prior to continuing with this step or any other steps in this document, you will want to create new ASPX pages for your GridView List page and for your Add/Edit page so that you don’t affect your existing pages in your project. It is best just to make an exact copy of your original pages and give them a different name and then proceed with these steps.

Go to the page where your GridView resides. Here we have gvRoleList that we are using in this example. This is a GridView we previously created earlier in the semester in class.

Click the Source tab to go to the HTML Source of this ASPX page and added the following to the source of your project. You want to add this code to the <head> of your source.

scripttype="text/javascript"src="IFrame-Movement.js"</script

Now our page is ready to make use of our IFrame-Movement.js file containing all the necessary JavaScript functions we will use for our IFrame movement.

Step 3 – Placing an IFrame onto our page

Now, we want to place an IFrame onto our page. Before proceeding add a New Item to your project: Add a HTM file called blank.htm that has nothing on the page and then proceed. This is to be the default page in our IFrame when it is not expanded. To add an IFrame follow the steps below.

Still working on our GridView list page go to the Source of the page
In the source, somewhere in the <body> of the page insert the following

iframeid="ifAddEditRole"src="blank.htm"style="z-index: 105; left: 10; top: 10; height: 50; width: 50; position: absolute"</iframe

Go to the Design of the page and notice you have an IFrame that is 50px in height and 50px in width now as shown below

You can position the IFrame wherever on the page you like, I prefer somewhere in the top left corner. Now, go back to the Source of the page and you can modify the properties of this IFrame however you like.
NOTE: So that the IFrame is hidden you will want to set the height and width to both be 0px. Also it is important to set the Z-index to an appropriate value as well. In addition you can change the name of the IFrame if desired but make note of what you name it for later examples in this document.

Here is an example of the tag after making modifications, note the height, width, and z-index

iframeid="ifAddEditRole"src="blank.htm"style="z-index: 125; left: 10; top: 10; height: 0; width: 0; position: absolute"</iframe

You now have an IFrame on the page and ready to use for the next step

Step 4 – Opening and Closing an IFrame using an ASP Button

We will first look at how to open our IFrame using an existing ASP button on our page. In this example we will use the Add New Role button that is already on our page.

Shown here is an Add New Role Button, we are going to use it to open, or Maximize, an IFrame on our page to display another page inside the IFrame

Go to the Code Behind of the GridView list page as shown below and in the Page_Load add the following code.
IMPORTANT: You will need to edit the string parameters below to match your information but you should not have to modify any of the other code listed here other than making sure you are setting this for the appropriate asp button.

/*This section is used to maximize a page in an IFrame

Parameters to pass elementID, final_x, final_y, width_final, height_final, final_page, interval

Set these parameters here to whatever your parameters are */

string elementID = "ifAddEditRole"; // Name of IFrame to be maximized

string final_x = "200"; // How far IFrame is from the top when maximized

string final_y = "75"; // How far IFrame is from the left when maximized

string width_final = "560"; // Width of IFrame when fully maximized

string height_final = "208"; // Height of IFrame when fully maximized

string final_page = "pgAddEditRoleIFrame.aspx?mode=add"; // page to display when IFrame is maximized

string interval = "5"; // in miliseconds

// The full string combined with all values and single quotes so its in correct format

string parameterString = "'" + elementID + "', '" + final_x + "', '" + final_y + "', '" +

width_final + "', '" + height_final + "', '" + final_page +

"', '" + interval + "'";

// Be sure to set this for whatever asp button you want to use to open the IFrame

btnAddNewRole.OnClientClick = "javascript:maximizeElement(" + parameterString + ");return false ";

NOTE: the return false at the end of our onclientclick statement will prevent the page from causing a post back. If a post back was to occur since our IFrame is not expanded on Page load, the IFrame would not be displaying. So we want to be sure if all we are doing is opening the IFrame that return is set to false.

Run your application and press the Add button you added the code for and should see a screen similar to the one below with an expanded IFrame showing our second page.

Tip: I generally like to add a border or different color to our Add/Edit page that is different from our GridView page so we can distinguish between the two pages easily.

Now that we can open the IFrame we want to be able to close, or minimize it. Go to the Add/Edit page we are opening in the IFrame.
Repeat Setting your page up to use the IFrame-Movement.js file on your add/edit page so that we will be able to make a call to our JavaScript file.
Go to the code behind of our Add/Edit page and place the following in the Page_Load

// Set the IFrame name and interval you want to close for our parameters

string elementID="ifAddEditRole"; // name of frame to close

string interval = "10"; // interval of frame to close

string parameterString = "'" + elementID + "', '" + interval + "'";

// added so we can call our javascript function to minimize the IFrame

// be sure to set this on the asp button you want to close the IFrame with

btnCancel.OnClientClick = "javascript:minimizeElement("+parameterString+");return false";

Now run your project, open the IFrame using the Add button and then close it using the Cancel button we just added the minimize to. You should now be able to open and close an IFrame

Step 5 – Adding the drag ability to your IFrame

If you want to allow your IFrame to be drag gable on a page then follow these steps

Go to your Add/Edit page or the page that will be opening in the IFrame
Place a new label on the page and give it an ID of lblDrag, type whatever text you want for the label such as “Click Here to Drag” or whatever
Place the label somewhere on the page noticeable
Go to the Source of the page and add the following to the <Head> of the page

scripttype="text/javascript">

function init() {

addHandle(document.getElementById('lblDrag'), window);

}

window.onload = init;

</script

Run the project, open your IFrame and click and hold your mouse on your label. You should be able to position the IFrame anywhere on the page that you want as shown below.

Step 6 – Opening an IFrame from a GridView

Now we will look at how to open an IFrame from our GridView

Go to the page where our GridView list that we worked with before resides
Click on the GridView and go to the Edit Columns to see the fields for the GridView.
Add a new Template Field as a column to our GridView as shown below. You will probably want to remove the Edit column we added to this GridView earlier in the semester project.

Click OK to leave the fields screen and click on GridView again and select Edit Templates from edit templates select our template we just added and edit the following properties, change to whatever corresponds to your project. This is identical to when we created this for the Delete Template control on our data grid
ID: lbtnEditRole
CommandName: EditRole
Text: Edit

Go to the Source of the page and add the following to our Edit link button Template Control in our GridView

CommandArgument="<%# Container.DataItemIndex%>"

Go to the code behind of our page and add the following to the GridView_RowDataBound method.

// This section is used to maximize a page in an IFrame

// Parameters to pass elementID, final_x, final_y, width_final, height_final, final_page, interval

// Set these parameters here to whatever your parameters are

string elementID = "ifAddEditRole"; // Name of IFrame to be maximized

string final_x = "200"; // How far IFrame is from the top when maximized

string final_y = "75"; // How far IFrame is from the left when maximized

string width_final = "560"; // Width of IFrame when fully maximized

string height_final = "208"; // Height of IFrame when fully maximized

string final_page = "pgAddEditRoleIFrame.aspx?mode=edit"; // page to display when IFrame is maximized

string interval = "5"; // in miliseconds

// The full string combined with all values and single quotes so its in correct format

string parameterString = "'" + elementID + "', '" + final_x + "', '" + final_y + "', '" +

width_final + "', '" + height_final + "', '" + final_page +

"', '" + interval + "'";

LinkButton lbtnEditRole = (LinkButton)e.Row.FindControl("lbtnEditRole");

lbtnEditRole.Attributes.Add("onclick", "javascript:return maximizeElement(" + parameterString + ");");

Now, since we need our GridView to do a post back, if our page posts back the IFrame will never be open due to the IFrame is not expanded when the page opens. To address this we can use ASP.Net AJAX UpdatePanel to help us.

IMPORTANT: Prior to continuing you will need to have installed the ASP.Net AJAX extensions to your project and made all the necessary entries in your web.config. Then continue to next step.

Add a Script Manager to your page
Add an ASP.Net AJAX Update Panel to your page
Place our GridView inside the UpdatePanel
Add the following Trigger for our UpdatePanel but change to name of your GridView

Triggers

asp:AsyncPostBackTriggerControlID="gvRoleList"/>

</Triggers

The page should look like the following after doing all this

Now run your project and click on the Edit link in your GridView and it should now expand our IFrame from our GridView as shown below

Step 7 – Closing our IFrame after clicking the Save button

If you want to close your IFrame immediately after clickin the Save button on our Add/Edit page do the following

Go to our Add/Edit page
Drag a Script Manager onto the page
Drag a UpdatePanel onto the page
Place a label in the UpdatePanel and call it lblStatusMessage
Go to the CodeBehind of the page and add the following inside the method whereyour update or Add takes place

// Set the IFrame name and interval you want to close for our parameters

string elementID="ifEditRole"; // name of frame to close

string interval = "10"; // interval of frame to close

string operation = "added"; // what type of operation was performed

string parameterString = "'" + elementID + "', '" + interval + "', '" + operation + "'";

// Once our UpdatePanel does an asynchronous post back execute this javascript function
// using the Script Manager. You must have a ScriptManager on the page for this to work

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "CloseIFrameScript", "javascript:confirmCloseIFrame("+parameterString+");", true);

Add the following trigger for the update panel in the source

Triggers

asp:AsyncPostBackTriggerControlID="btnSaveChanges"EventName="Click"/>

</Triggers

Run the application and after clicking save your should see a prompt as shown below, clicking ok will close theIFrame after the save

Step 8 – Refreshing the parent page

The only thing we haven’t covered in this document is how to refresh the parent page whenever the IFrame closes, such as when we update a record and click close we want the GridView to refresh with the changes.

There are a couple of ways for addressing this, listed below are two options. However, I’ve not found a good way to do this using the Microsoft ASP.Net AJAX. If you find a good way to do this please email me your solution.

One option is to add a refresh button to the parent page that does a post back when you click the button. Of course after updating a record why make a user click yet another button. However this is one option to get the page refreshed.
The second option is to use what is known as Public IFrames where basically the parent page is in an IFrame itself. To use Public IFrames do the following.
Go to your main menu page where the link is that takes you to the GridView list page. On this page place two IFrames on the page. One will be an IFrame for our GridView list and one will be for our Add/Edit page. Set all the properties you need to.
Set the onclient click for our link button that normally takes us to the GridView to call our maximize element function just like we did earlier in this document in opening an IFrame from an ASP button, use the same steps.
In the code behind however one change to note is that anywhere it has maximizeElement change this to read maximizePublicElement and anywhere you see minimizeElement change it to minimizePublicElement. You still pass in the same parameters though.
Just remember to set your z-indexes accordingly on your IFrames so that the Add/Edit page has a higher z-index than the GridView list page. The way this works is that it allows you to place all IFrames on a parent page, in this case the main menu, and call Iframe from IFrames.
Finally the last step you would do is on our Add/Edit page you can add a call to an additional JavaScript function by placing the following code at the end of your insert/update method. You would replace the code that was already there with this.Following these steps will allow you to refresh the list page after closing the add/edit page.

// Set the IFrame name and interval you want to close for our parameters

string elementID="ifAddEditRole"; // name of frame to close

string interval = "10"; // interval of frame to close

string elementIDParent = “ifGridView” // name of grid view IFrame

string parentPageName = “pgRoleListIFrame.aspx” // name of parent page

string operation = "added"; // what type of operation was performed

string parameterString = "'" + elementID + "', '" + interval + "', '" + operation + "', " + elementIDParent + “’, “ + parentPageName + “’”;

// Once our UpdatePanel does an asynchronous post back execute this javascript function
// using the Script Manager. You must have a ScriptManager on the page for this to work

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "CloseIFrameScript", "javascript:confirmCloseAndRefresh("+parameterString+");", true);

Conclusion

You are now ready to go and to use IFrames in your application. Have fun and good luck. Let me know if you have any questions regarding anything in this document by emailing me at

Thanks,

Scott Lusk

Adding IFrames to an existing projectPage 1 of 13