Adding JavaScript to ASP.NET Menu control to open a popup window + centered on screen

Finally this is my first post about coding on C#, i hope this helps somebody (it worked for me), at least for reference.

The past week ive been working on an ASP.NET app which requires to show a many forms as a PopUp but they needed to be loaded with the Menu control provided on the framework. The control is databound to a sitemap XML file.

Was a little complicated because it needs few steps to make it work but i hope this may help you to make the same and save you few hours trying to figure out how to.

Lets start…

Rigth click over your solution tree, select add new item, and from the window choose a “site map”, then click on OK.

On the file generated you need to add the corresponding entries to your page, but we will use mor XML fields to fulfill our purpuose:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
    <siteMapNode title="Root Menu"  description="This is the root menu">
        <siteMapNode  title="Child Menu"  description="This is a child menu">
            <siteMapNode url="" title="Click on me to open a popup window"
                description="This page is cool"  heigth="450" width="screen.width - 150"
                address="popupme.aspx"/>

            <siteMapNode url="form.aspx" title="Click on me to open a normal window"
                description="This page is cool"/>
        </siteMapNode>
    </siteMapNode>
</siteMap>

Once you write the entries, click on save and close it, now look on the menu’s event “MenuItemDataBound”, and write the following on it:

void menuObject_MenuItemDataBound(object sender, MenuEventArgs e)
{
string address = string.Empty;
string heigth = string.Empty;
string width = string.Empty;
string title = string.Empty;
string url = string.Empty;

address = ((SiteMapNode)(e.Item.DataItem))["address"];
heigth = ((SiteMapNode)(e.Item.DataItem))["heigth"];
width = ((SiteMapNode)(e.Item.DataItem))["width"];
title = ((SiteMapNode)(e.Item.DataItem))["title"];
url = ((SiteMapNode)(e.Item.DataItem))["url"];

//we left the url field empty on the sitemap file to know
//this will be a javascript link, so:
if (string.IsNullOrEmpty(url))
{
e.Item.NavigateUrl = "javascript:OpenWindow('" + address + "'," + heigth + "," + width + ",'" + title + "')";
}
else
{
e.Item.NavigateUrl = url;
}
}

Now we are close to the end.. did you noticed there was something missing??!!… yes!, the javascript function to open the popup window, here is the source:
(Dont forget to put it inside the page which will launch the popup windows (the page with the menu control, or the masterpage of it) inside the <HEADER>…</HEADER> tags!

<script language="javascript">;
function OpenWindow(address, heigth, width, title)
{
var winl = (screen.width-width)/2;
var wint = (screen.height-heigth)/2;
var options = "width=" + width;
options += ",height=" + heigth;
options += ",top=" + wint;
options += ",left=" + winl;
options += ",location=no,toolbar=no, menubar=no, scrollbars=1, resizable";

window.open(address, title, options);
}
</script>;

Once when you have this, we need to add a default sitemap provider for the project so the last step is modify your web.config file as its shown here inside the system.web sections:

<system.web>
    <siteMap defaultProvider="XmlSiteMapProvider" enabled="true">
        <providers>
                <add name="XmlSiteMapProvider" type="System.Web.XmlSiteMapProvider" siteMapFile="Web.sitemap"/>
        </providers>
    </siteMap>
</system.web>

Now, you can try to run your App!.

Again this is my first Code post and i hope this helps you, any comments are welcome!