ASP.NET Opening New Window with HTML Created During Run-Time

[frankiefrank]

I have an aspx with a gridview (paged and sorted) and I want to display it in a new page - typical Print Preview situation.

Initially the GridView was "simple" (no paging) and I wrote a JavaScript that transfered data from other controls (containing parameters used to populate the gridview) by using <span> tags with a specific 'title' attribute. I used the .innerHTML property to find the values I was interested in, and also used .innerHTML to copy the GridView (as HTML Table) into the newly created page.

Now I decided to switch to a more server oriented solution - I want to go through the controls in c# code running on the server and build a new HTML in runtime (similar to the js but easier to implement).

My problem is - what do I do with the new generated HTML code? I can only use Response.Redirect to go to an existing page and when I use Response.Write I write to the same window. I want to create the behavior like I had with JS (open a new window) but have the actual HTML code come from the server.

Any suggestions on the right way to achieve that?

Thanks,
Frankie

[kenobewan]

Have you tried using page load event to fire an onload event in JS? Registerstartupscript may work for you. HTH.

[frankiefrank]

Have you tried using page load event to fire an onload event in JS? Registerstartupscript may work for you. HTH.

Hey kenobewan,

Thanks for the reply but I don't understand your suggestion.

Let's say I have my page Report.aspx. And I want to navigate to a page that doesn't have a url since there's no aspx/html file, just a string I created in run-time, like in the Button_Click code, fired once the user clicked on the Print button.

Where do the form_load or onload events come into this?

[Frinavale]

I have an aspx with a gridview (paged and sorted) and I want to display it in a new page - typical Print Preview situation.

Initially the GridView was "simple" (no paging) and I wrote a JavaScript that transfered data from other controls (containing parameters used to populate the gridview) by using <span> tags with a specific 'title' attribute. I used the .innerHTML property to find the values I was interested in, and also used .innerHTML to copy the GridView (as HTML Table) into the newly created page.

Now I decided to switch to a more server oriented solution - I want to go through the controls in c# code running on the server and build a new HTML in runtime (similar to the js but easier to implement).

My problem is - what do I do with the new generated HTML code? I can only use Response.Redirect to go to an existing page and when I use Response.Write I write to the same window. I want to create the behavior like I had with JS (open a new window) but have the actual HTML code come from the server.

Any suggestions on the right way to achieve that?

Thanks,
Frankie

Hi Frankie,

You're making this more complicated than it needs to be.
You don't need to create HTML code specifically for printing purposes.
The way your going is really complicated (you'd have to create a temporary web page so that the web browser could load it...then you have to manage these temporary resources so that your web server's not filled up with reports...it's a real pain and a lot of work...you don't need to do this)

You could have a button "Print Preview", which when clicked would take away the paging on your GridView (format GridView and the web page for printing purposes). When you do this, you could simply hide anything that you don't want printed and show only what should be.

Also, look into using CSS to help with your print formatting.

-Frinny

[frankiefrank]

Hi Frankie,

Hello,

You're making this more complicated than it needs to be.
You don't need to create HTML code specifically for printing purposes.
The way your going is really complicated (you'd have to create a temporary web page so that the web browser could load it...then you have to manage these temporary resources so that your web server's not filled up with reports...it's a real pain and a lot of work...you don't need to do this)

Yes I understand that I don't want to create a temporary HTML file. What I wanted to do is just create a new window in js, then use window.document to access the HTML DOM and write into the innerHTML the string that I build on the server.

The reason for building the string on the server is that I already have methods that collect parameters from the aspx page controls on the server side, so it's easier for me to iterate through these parameters on the server-side. I just need to somehow pass the constructed string into the js so that I can use it in the innerHTML of the new window's document.

You could have a button "Print Preview", which when clicked would take away the paging on your GridView (format GridView and the web page for printing purposes). When you do this, you could simply hide anything that you don't want printed and show only what should be.

Also, look into using CSS to help with your print formatting.

I'm looking into the CSS direction too, already started checking but can you please expand on how i would "apply the css" to the page and where does turning off the paging come in?

[Frinavale]

Yes I understand that I don't want to create a temporary HTML file. What I wanted to do is just create a new window in js, then use window.document to access the HTML DOM and write into the innerHTML the string that I build on the server.

The reason for building the string on the server is that I already have methods that collect parameters from the aspx page controls on the server side, so it's easier for me to iterate through these parameters on the server-side. I just need to somehow pass the constructed string into the js so that I can use it in the innerHTML of the new window's document.

I'm not the greatest with JavaScript so maybe what you're trying to do is possible...I'm not sure how you plan on displaying HTML in a new browser window without hosting that HTML on the web server.....

But anyways, I'll answer your question now:

To pass the string between the JavaScript and .NET code you can use a hidden field. You need to register the hidden field using your Page's ClientScript property:

Page.ClientScript.RegisterHiddenField("hiddenVariableName","hiddenVariableValue")
 

Now that you know the name of the hidden variable, you can access your server generated string in your JavaScript.

I'm looking into the CSS direction too, already started checking but can you please expand on how i would "apply the css" to the page

You would apply the CSS as you would normally apply CSS to a web page....
CSS2 has some printing styles that help you to format your web page so that it is printer friendly. I suggest looking up CSS2 (or even just CSS in general) to understand how to use these tools for your benifit.

I have an aspx with a gridview (paged and sorted) and I want to display it in a new page - typical Print Preview situation. ...

....and where does turning off the paging come in?

I was under the impression that your report GridView's paging capabilities are the cause of your printing problems...

Earlier I recommended that you add a "Print Preview" button to your aspx Report page.

When the user clicked this button, you would format your page so that it was printer friendly.

While you were formatting the page (in the button click event), you would have disabled the GridView's paging so that the whole report would be shown.

Also during that formatting stage you'd make invisible the things you didn't want the user to see in their printed copy.


Using this method might still be a good idea for you.
In your ASPX page you could check if the user is in "Print Preview" mode or not.

This way, when the user clicked "Print Preview" you could open a new browser window that called your ASPX page again passing it a parameter that indicated that it was in "Print Preview Mode"....the ASPX would be displayed in a printer friendly version in a new window....

Then you don't need to do anything with temporary html...you'd just be using 1 ASPX page...and since the ASPX page already knows how to generate the report, away you go....

-Frinny

[frankiefrank]

...

Thank you for the in-depth reply, I'll see what i manage to do.

[Frinavale]

Thank you for the in-depth reply, I'll see what i manage to do.

Not a problem :)
If you still have issues feel free to keep asking!

-Frinny

[saran23]

Not a problem :)
If you still have issues feel free to keep asking!

-Frinny

Hi, I need a help similar to this post, I need to open a new page which is already hosted in the server, I could use java script for this, But what i want is to open a new window with RESPONSE.REDIRECT(which opens the page in the same window), is that possible? if so please let me know how to do it...

Thanks
Saravanan.G

[Frinavale]

Hi, I need a help similar to this post, I need to open a new page which is already hosted in the server, I could use java script for this, But what i want is to open a new window with RESPONSE.REDIRECT(which opens the page in the same window), is that possible? if so please let me know how to do it...

Thanks
Saravanan.G

I've never done that before.
I think you'd be better off using JavaScript to keep things simple.

[saran23]

I've never done that before.
I think you'd be better off using JavaScript to keep things simple.

thanks. Somehow I got the solution, I used this following Code, though its a form of javascript, I find it easy to use this in the code behind

Page.ClientScript.RegisterStartupScript(typeof(_Default), "Message", "window.open('http://www.google.com' , null, null);", true);

[netdevelopercsharp]

I tried your suggestion and it worked ! But when i closed my preview page and went back to my original page, the gridview has paging off and the textboxes were readonly !So do i need to set the properties back to original once the user close the preview page ? Please help !

[Frinavale]

You're in luck.
I know how to do this now :)

[edit]
After re-reading all of this thread I realise now that you may not be opening a child window for your Print Preview....The following, very long answer, will only work if you are opening a child window for previewing the data....

To do this you would have to create a new ASPX page used for print preview purposes with a simple GridView in it. You'd store the data source of the GridView in your regular page into session so that you could retrieve it and use it as the datasource for the GridView in the new print preview ASPX page.

Once you have this print preview ASPX page, you'd have to open it in a child window.

To open a child window you would use the solution recommended by Saran in post 11 in this thread.
[/edit]

You use the JavaScript window.opener to call a JavaScript method on the parent page that posts back to the server and indicates that the child has been closed.

For example, in the child page you would have:

 
    <script type="text/javascript">
        //You must use the setTimeout method in both of the following functions
        //in order for the main page to be updated in FireFox version 2.
 
        //Indicating that the updateParent method should be called just before the 
        //page is unloaded  
        window.onbeforeunload = updateParent;
 
        //this method is called just before the page is unloaded
        function updateParent() {
            try {
                if (window.opener && !window.opener.closed) {
                    //if the parent window is not closed then using the window.opener
                    //to call the UpdateGrid JavaScript method in the parent window
                    var win = window.opener;
                    window.opener.setTimeout(win.UpdateGrid, 100);
                }
            } catch (err) { }
        }
    </script>

In the above code the updateParent method is called before the page is unloaded (Please note that it's called Every Time the page is unloaded, which means that if you're doing full page postbacks this method will be executed since the page is unloaded. See the onbeforeunload event article for more details).

In this method I'm checking to see if the parent page is opened using the window.opener. If it's opened then I'm using it to call the UpdateGrid method. I'm calling the UpdateGrid method from within the window.opener.setTimeout() method because I experienced some problems with regards to FireFox 2 when I didn't (the postback would happen and it would try to return to the child window that was closed...mess ensued).

So, in your parent window you have to define a JavaScript method called UpdateGrid so that it can be called by the child window when it's closed.


What I did was add a LinkButton to the page with the style of display:none so it was invisible. The UpdateGrid method would call the __doPostback() JavaScript method that is added by ASP.NET in order to help it with PostBacks. I passed the __doPostBack method the ClientID of the LinkButton as the first parameter which is used to indicate to ASP.NET which control caused the postback so that you can handle the postback event in your server code.

So in your parent page you would have your GridView and stuff and at the bottom of the page you would have something like:

<asp:LinkButton id="updateGridLink" runat="server" Text="update grid" style="display:none;" />
 
<script type="text/javascript">
  function UpdateGrid() {
       __doPostBack('<%=updateGridLink.ClientID %>', '');
    }
</script>

Now on the server you'd handle the LinkButton's "onclick" event and reset your GridView to whatever you need.

[netdevelopercsharp]

Thanks for your quick response !
But my only problem is we have this print button on all our pages !
So we may have to find a generic solution based on your idea ?

@Frinavale