C# .NET - How to open a pop up window on asp.net Menu Control Without menu bar, status bar etc.

Asked By shekhar kumar on 01-Dec-09 01:49 AM
Hi All,

I am creating a Dynamic asp.net menu and sub menu with the value from database. 
Now I have a link called photo gallery. On this I want to open a window, I can do it by setting target property of the menuitem. But using that I am not able to set the size of the window.
Also I want to hide the Menu bar and status bar etc from the window. 

I am writing code like this

MenuItem MI = new MenuItem();
MI.Text = drMenu["field_name"].ToString();

So far what I am doing is navigating it to another page. and there I am opening a popup window on page load and then I am close the parent page. But some how the popup blocker blocking my pop up window.

Thanks.
Shekhar 

re - Web Star replied to shekhar kumar on 01-Dec-09 02:12 AM

u can open popup window of javascript with menucontrol in asp.net as follows for your desired requirement

look on the menu’s event “MenuItemDataBound”, and write the following on it:

http://coloboxp.wordpress.com/2007/09/14/adding-javascript-to-aspnet-menu-control-to-open-a-popup-window-centered/#viewSource
http://coloboxp.wordpress.com/2007/09/14/adding-javascript-to-aspnet-menu-control-to-open-a-popup-window-centered/#printSourcehttp://coloboxp.wordpress.com/2007/09/14/adding-javascript-to-aspnet-menu-control-to-open-a-popup-window-centered/#about
01 void menuObject_MenuItemDataBound(object sender, MenuEventArgs e)
02 {
03 string address = string.Empty;
04 string heigth = string.Empty;
05 string width = string.Empty;
06 string title = string.Empty;
07 string url = string.Empty;
08   
09 address = ((SiteMapNode)(e.Item.DataItem))["address"];
10 heigth = ((SiteMapNode)(e.Item.DataItem))["heigth"];
11 width = ((SiteMapNode)(e.Item.DataItem))["width"];
12 title = ((SiteMapNode)(e.Item.DataItem))["title"];
13 url = ((SiteMapNode)(e.Item.DataItem))["url"];
14   
15 //we left the url field empty on the sitemap file to know
16 //this will be a javascript link, so:
17 if (string.IsNullOrEmpty(url))
18 {
19 e.Item.NavigateUrl = "javascript:OpenWindow('" + address + "'," + heigth + "," + width + ",'" + title + "')";
20 }
21 else
22 {
23 e.Item.NavigateUrl = url;
24 }
25 }

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!

http://coloboxp.wordpress.com/2007/09/14/adding-javascript-to-aspnet-menu-control-to-open-a-popup-window-centered/#viewSource
http://coloboxp.wordpress.com/2007/09/14/adding-javascript-to-aspnet-menu-control-to-open-a-popup-window-centered/#printSourcehttp://coloboxp.wordpress.com/2007/09/14/adding-javascript-to-aspnet-menu-control-to-open-a-popup-window-centered/#about
01 <script language="javascript">;
02 function OpenWindow(address, heigth, width, title)
03 {
04 var winl = (screen.width-width)/2;
05 var wint = (screen.height-heigth)/2;
06 var options = "width=" + width;
07 options += ",height=" + heigth;
08 options += ",top=" + wint;
09 options += ",left=" + winl;
10 options += ",location=no,toolbar=no, menubar=no, scrollbars=1, resizable";
11   
12 window.open(address, title, options);
13 }
14 </script>;
http://coloboxp.wordpress.com/2007/09/14/adding-javascript-to-aspnet-menu-control-to-open-a-popup-window-centered/

Use the NavigateUrl property and set javascript function - Huggy Bear replied to shekhar kumar on 01-Dec-09 02:31 AM

You acheive that through javascripts window.open() function. Either you can define the templates for ASP.NET menu items, either static or dynamic. You should provide cutoms menu hyper links and should be setting the javascript for those links or can directly set the javascript function in NavigateUrl of the MenuItem.

Have the javascript in the aspx page
<script type="text/javascript">
       function ShowWindow() {
           window.open("Default2.aspx", 'Window1', width=800, height=500, left=150,top=200, toolbar=no, status=no,  menubar=no, scrollbars=yes'); //This will hide the toolbar, statusbar & menu bar
       }
</script>

Option 1: Set the Javascript to the Navigate Url as shown below

MenuItem MI = new MenuItem();
MI.Text = drMenu["field_name"].ToString();
MI.NavigateUrl = "javascript:ShowWindow();";

Option 2: Set the javascript through the Template
Your menu control will look like 

   <asp:Menu ID="Menu1" runat="server">
            <Items>
                <asp:MenuItem Text="NewItem" Value="NewItem"></asp:MenuItem>
            </Items>
            <StaticItemTemplate>
                <asp:HyperLink ID="HyperLink1" NavigateUrl="javascript:ShowWindow();" runat="server">HyperLink1</asp:HyperLink>
            </StaticItemTemplate>
        </asp:Menu>