Getting Javascript values from client on page load

Question

I'm trying to determine the client window size on pageload, to use in creating a bitmap using c#. From reading on SO and elsewhere, I know that one method would be to:

Write a Javascript function to get the relevant values;
Store these in hidden fields;
Read the value using the code behind (c#) and then do stuff with it.

However, I'm getting tripped up by the execution sequence that runs code behind BEFORE any Javascript, even though I've set <body onload... to get and set the relevant values. (see below)

I know the rest of my code works, because, when I execute, the page shows the word "by" and the button. Then, after I have clicked the button and the page reloads, it can now suddenly read the two hidden values.

My question is, how can I get my c# Page_Load code to get those two hidden values from the client side, before it executes the rest of my code, and without the need for user action like clicking a button?

My page:

<body onload="getScreenSize()">
    <form id="form1" runat="server">

        <input type="hidden" name="hiddenW" ID="hiddenW" runat="server" />
        <input type="hidden" name="hiddenH" ID="hiddenH" runat="server" />
   <script>
       function getScreenSize() {
           var myW = document.getElementById("hiddenW");
           myW.value = window.innerWidth;
           var myH = document.getElementById("hiddenH");
           myH.value = window.innerHeight;
       }
   </script>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>
</body>

Code behind:

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write(hiddenW.Value+" by " +hiddenH.Value);
    }

}

On first run (when I need those values), it shows

enter image description here

and after I click the button, it proves the Javascript works:

enter image description here

The question then, is how do I get those values before the rest of my Page_Load code runs, so that I can go straight into generating and displaying my image?

Use domready event, it fires before window load and all of the data you need is available (window height etc) .. more on this here : javascriptkit.com/dhtmltutors/domready.shtml — Goran.it
– Goran.it, Commented Feb 24, 2014 at 12:24
Please see i have updated my answer to show how to implement this using JQuery — Ganesh Jadhav
– Ganesh Jadhav, Commented Feb 24, 2014 at 12:40

Ganesh Jadhav · Accepted Answer · 2014-02-24 12:37:33Z

2

You cannot get the client window size before the C# Page_Load() executes because the page is rendered to the client after the C# code execution is complete.
The window size may change during page load, hence you have to get the window size only after page load is complete.

Solution:
You can use ajax to send the values to the back-end, after the page has loaded completely.
OR
You can cause a post-back using java-script after you get the correct value, this way:
JQuery:

$(function() {
    var width = window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth;
    var height = window.innerHeight ||
             document.documentElement.clientHeight ||
             document.body.clientHeight;
    $('#hdn_width').val(width);
    $('#hdn_height').val(height);
    $('#your_form').submit();
});

C#:

protected void Page_Load(object sender, EventArgs e)
{
    try
    {
        if (IsPostBack)
        {
            // Use hdn_width and hdn_height here
        }
    }
    catch (Exception ex)
    {
    }
}

edited Feb 24, 2014 at 12:37

answered Feb 24, 2014 at 12:23

Ganesh Jadhav

2,8481 gold badge22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2007841 Over a year ago

OK, that makes sense. Given that fact, is there a way for me to wait until the page is rendered, get the relevant values, and then (with no user action) continue to execute a block of c# code?

Furquan Khan · Accepted Answer · 2014-02-24 12:27:20Z

1

Use the IsPostBack property

This would solve your problem

For Example

if(!Page.IsPostBack)
{
   //Control Initialization
   //Your code goes here
}

answered Feb 24, 2014 at 12:27

Furquan Khan

1,5941 gold badge15 silver badges30 bronze badges

2 Comments

user2007841 Over a year ago

Thanks, but this needs user action to cause a postback, which I don't want. What's the best way to cause it to happen using code?

Furquan Khan Over a year ago

ajax would be a choice with async false

Alswin · Accepted Answer · 2018-12-31 17:06:40Z

0

I used a timer to postback once and two none-displayed textboxes to store the window-values width and height. the textboxes are filled with a javascript:

document.getElementById('<%=TxWd.ClientID %>').value = window.innerWidth;
document.getElementById('<%=TxHt.ClientID %>').value = window.innerHeight;

In code behind (VB.NET):

Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
    Session("seswidth") = Val(TxWd.Text)
    Session("sesheigth") = Val(TxHt.Text)
    Timer1.Enabled = False
End Sub

answered Dec 31, 2018 at 17:06

Alswin

1

Collectives™ on Stack Overflow

Getting Javascript values from client on page load

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related