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

15 comments:

Anonymous said...

good tip...


---

Krishna Dhungana

Anonymous said...

thanks for ur reply ,my criteria is iam entering the login details and i need to get the popwindow in the next page Pageload event, as you have specified it works after clicking the button the event fires and popup opens before next page_load event ,i want the popup to be opened simulteanously with page_load event

Anonymous said...

it's Nice and very Helpful...

jeetendra said...
This comment has been removed by a blog administrator.
Anonymous said...

Great Job!!

Anonymous said...

Amber. Hi,Really good topic. Purely C# oriented.

Good Job

Hasmukh Jain said...

protected void Page_Load(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' );";
btnClck.Attributes.Add("OnClick", fullURL);

}
protected void btnClck_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' );";
btnClck.Attributes.Add("OnClick", fullURL);

}


the above code works fine but what i want is i wnat to pass the parameter in querystring like id = 5 which is coming on the click of button but when the page opens the value comes is one defined in page load event

i want to avoid it.
pls help

and yes pls one thing make sure that if you will give me the code like below

protected void Page_Load(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' );";
//btnClck.Attributes.Add("OnClick", fullURL);

}
protected void btnClck_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' );";
btnClck.Attributes.Add("OnClick", fullURL);

}


then it has a problem that i have to click the button 2 times that i want to avoid

pls help

thanks
hasmukh jain

Sangam Uprety said...

@Hasmukh,
This should work for you:

protected void Page_Load(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' );";
btnClck.Attributes.Add("OnClick", fullURL);
}

protected void btnClck_Click(object sender, EventArgs e)
{
btnClick.Attributes.Remove("OnClick");
string url = "MyNewPage.aspx?ID=5&cat=test2";
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);
}

In fact the code you posted is working fine with me if you set id=2 or any other value. In case that doesn't work, I recommend you add btnClick.Attributes.Remove("OnClick"); at the first line.

Best of luck!

Luca said...

What if I would pass parameters not in querystring?

Any help will be appreciated...thanks

Anonymous said...

i want to open a new browser window from a textbox value, on a buttn event. The URL will be provided by the user in the textbox. plz tell me how to do it??????
i m using VS 2008, and C#.

Vinod said...

it works good for me ,But window is Not fix .it is resize when clik on maximize,i want window is fixed..please give me solution if any.. Thanks in Advance..

Anonymous said...

grt man

JorgeM said...

Thanks for the tips!!! works for me.

Anonymous said...

Thanks its working fine.......

Anonymous said...

You really save my day...

Post a Comment

Hope you liked this post. You can leave your message or you can put your valuable suggestions on this post here. Thanks for the sharing and cooperation!

Popular Posts

Recent Articles