Reader Level:
ARTICLE

Performing Button or Link Click Server Side Functionality into a New Window

Posted by Shinuraj Articles | JQuery February 15, 2011
A common scenario here is that we have a button (or link) that when clicked we want some server code to fire but at the end of the request we actually want to display the content in a new window.
  • 0
  • 0
  • 5207

A common scenario here is that we have a button (or link) that when clicked we want some server code to fire but at the end of the request we actually want to display the content in a new window.

At first we might think that an easy way to do this is to use an ASP.NET LinkButton to do this - after all a LinkButton creates a hyperlink that CAN accept a target and it also posts back to the server, right? However, there's no Target property, although you can set the target HTML attribute easily enough. 

<asp:LinkButton runat="server" ID="btnTest" Text="New Target"
                target="_blank"  OnClick="btnTest _Click" />

But if you try this you'll find that it doesn't work. Why? Because ASP.NET creates postbacks with JavaScript code that operates on the current window/frame:
Solution: In order to send Postback link controls and buttons to another window/frame, both require that the target of the form gets changed dynamically when the button or link is clicked. You can use jQuery for changing the forms target.

Imagine you have two buttons like this that should go to another window:

<asp:LinkButton runat="server" ID="lnkTest" Text="New Target" 
                        OnClick="ClickHandler" />

<asp:Button runat="server" ID="btnTest" Text="New Target Button" 
                    OnClick="ClickHandler" />

ClickHandler in this case is any routine that generates the output you want to display in the new window. 

Here's the dummy handler that just generates some HTML by hand and displays it:

protected void ClickHandler(object sender, EventArgs e)
{
    // Perform some operation that generates HTML or Redirects somewhere else
    Response.Write("Some custom output would be generated here )");
    // Make sure this response doesn't display the page content
    // Call Response.End() or Response.Redirect()
    Response.End();
}

To route this oh so sophisticated output to an alternate window for both the LinkButton and Button Controls, you can use the following simple script code:

<script type="text/javascript">
      $(document).ready(function() {
        $("#lnkTest,#btnTest").click(function () {
            $("form").attr("target", "_blank");
        });
            });
</script>

COMMENT USING

Trending up