Open A New Browser Tab With ASP.Net Response Redirect

As you may know ASP.Net webworms framework really makes it easy to create web sites quickly with less efforts. The framework already handles most of the complexity so you can focus more on the business logic. But it also makes simple things a little bit harder to achieve. For example I wanted to set a session variable on a button click and redirect the user to a particular page on my site by opening a new tab in the browser. Of course I could use JS's window.open() method but this method doesn't work well in mobile environment and there are many issues with browser security. So I needed to find a way of using response redirect from behind code and being able to open a new tab in the browser.

Luckily my search ended up with a grate post in ASP Snippets site by Mudassar Khan. You can read the post here. I decided to repost this solution on this blog for my personal reference and for anyone who will find this post.

So basically what we need is to set the Form's target property to "_blank". This will force the browser to open the page in a new tab on post-back of the form. To do that we will use a JS function and set the server control's OnClientClick to point to it. Add the JS function in the header of the page like this (I believe it should work in the body section too).

//JS function
<script type="text/javascript">
	function SetTarget() {
		document.forms[0].target = '_blank';
	}
</script>

So now when we redirect the user using Response.Redirect method let's say from page-A to page-B, the redirected page page-B will open in a new tab leaving the previous page-A still open in the browser. Here is the code behind (C#) and ASP.Net markup.

// Code Behind (C#)
protected void PreviewLinkButton_Click(object sender, EventArgs e)
{
	this.Response.Redirect("Preview", false);
}

// ASP.Net web form markup
<asp:LinkButton ID="PreviewLinkButton" runat="server" OnClientClick="SetTarget();" OnClick="PreviewLinkButton_Click" ValidationGroup="PostGroup" CssClass="glyphicon glyphicon-new-window"></asp:LinkButton>

So far so good! But wait, there is a little problem that we need to handle in the page-A. If page-A has no other controls that do post-backs than this might not be a problem after all. But if you do, than you need to set Forms target property back to "_self" to prevent opening new tab in the browser if the user clicks on a post-back control on page-A that is spouse to post-back on the same open tab. To do that we will use the same function but this time we pass a parameter to it. So we need to change the code a little bit to accept a parameter with the target flag.

Here is the final code:
//JS function
<script type="text/javascript">
	function SetTarget(target) {
		document.forms[0].target = target;
	}
</script>

// Code Behind (C#)
protected void PreviewLinkButton_Click(object sender, EventArgs e)
{
	this.Response.Redirect("Preview", false);
}

// ASP.Net WebForm markup
<asp:LinkButton ID="PreviewLinkButton" runat="server" OnClientClick="SetTarget('_blank');" OnClick="PreviewLinkButton_Click" ValidationGroup="PostGroup" CssClass="glyphicon glyphicon-new-window"></asp:LinkButton>


blog comments powered by Disqus