Wednesday, January 28, 2009

Open New Window in ASP.NET web page using JavaScript

I have found much tricks in different tutorials and forums on opening new window in asp.net web page, using JavaScript, jquery etc. Here I have put most useful of ways to open new window (and pop-up window) in asp.net web page. I hope these tricks will be helpful.
After learning different ways of opening new window in asp.net, you may learn How to refresh parent page from child window in asp.net using javascript, in a later post that follows. At the same time, if you are using iframe and have a need of Refreshing parent page partially by calling javascript function in parent page, you can see it with code snippets in another post. For now here I have put ways to opening new asp.net page. And before continuing, I would like to inform that there is a post regarding Frequent question on parent and child page refresh, reload, function call in asp-net using javascript that discusses, in aggregate, about some more approaches of parent and child page operations.
1. Open New Window from HyperLink control
<asp:hyperlink id="hyperlink1" runat="server" navigateurl="~/Default.aspx" target="_blank"></asp:HyperLink>
Clicking this hyperlink will open the Default.aspx page in new window. In most of the cases this simple coding can save need of lots of JavaScript code!
2. Open New Window on Button Click
<asp:button id="btnClck" runat="server" onclick="btnClick_Click">
protected void Page_Load(object sender, EventArgs e){
if (!IsPostBack)
{
string url = "MyNewPage.aspx?ID=1&cat=test";
string fullURL = "window.open('" + url + "', '_blank', 'height=500,width=800,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no,titlebar=no' );";
btnClck.Attributes.Add("OnClick", fullURL);
}
}
Here, on page load, script has been added to the attribute of the button ‘btnClick’. According to the script, height and width of the pop-up window has been fixed. Toolbar will not be shown (toolbar=no). Similarly, the window will be non-resizable. Please note that the properties can be set as required. New window of the designated properties will open on click of the button. I have shown the use of custom destination URL in the script by using ‘url’ and ‘fullURL’ string variables.
I have noted that the window will be resizable (hence uncontrollable) in Mozilla Firefox.
3. Open New Window using ScriptManager
Just on button click, we can register the script to open new window. Let me show this on button click event hander.
protected void btnClick_Click(object sender, EventArgs e)
{
string url = "MyNewPage.aspx?ID=1&cat=test";
string fullURL = "window.open('" + url + "', '_blank', 'height=500,width=800,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no,titlebar=no' );";
ScriptManager.RegisterStartupScript(this, typeof(string), "OPEN_WINDOW", fullURL, true);
}
Here we don’t need to add attribute to the button. This just will open new window with the URL specified. And please also note the properties of the new pop-up window.
4. Open New Window using ClientScriptManager
This method is much alike the previous one. Only difference is we user ClientScript class in place of ScriptManager class.
protected void btnClick_Click(object sender, EventArgs e)
{
string url = "MyNewPage.aspx?ID=1&cat=test";
string script = "window.open('"+url+"','')";
if (!ClientScript.IsClientScriptBlockRegistered("NewWindow"))
{
ClientScript.RegisterClientScriptBlock(this.GetType(), "NewWindow", script, true);
}
}
Here new window will open keeping the parent one intact.
All these four methods are try-worthy. I have been across all these methods of opening new window in asp.net web page and found easy and code-friendly to use.
Happy Programming!
Shout it

Popular Posts

Recent Articles