A question about Visual Studio best practice

Question

I am still trying to get a responsive design going using ASP.NET and VB.NET.

I access the client browser from a jscript and add it to a page label on an aspx page.

Example code:

<asp:Label runat="server" ID ="myhidden" Text="not set" Visible="true"/>
<script>
 var w = window.innerWidth
 var x = document.getElementById("myhidden");
 x.innerHTML = "Browser window width: " + w;
 </script>

The page loads correctly and displays the value.

The problem that I am trying to solve is "when" I can access the label text from VB.NET code behind. It seems like the value is only available in code behind after the page has been fully rendered.

I have Page.load, page.unload, etc. I can't find the "right" even to load the label value in code behind.

Thanks in advance.

Herman

Answer 1

Thanks to Albert for this explanation. I think there needs to be some clarity between "adaptive" we design and "responsive" web design. In an adaptive approach, the CSS changes the page layout to suite the device. I accept this. In responsive we design, I would rely on CSS but would also like more control over the page layout.

Answer 2

Well, your running browser side code, and thus the page has to be sent down to the browser before that script code can run.

So, in theory, this design means that only after the user will to hit a button, or some web page action is to occur, then you could get/grab/use that value set in code behind.

You have not yet sent the page to the browser, so you don't have a event, or someplace to look for and get the page width - the browser not even seen the page just yet.

what this means? You have to get this width value from the logon page, or from the first page load. But that page most certainly has load, has to run, and has to set that value. ONLY then when the page is sent back to the server can your code behind run.

I suppose you could show a page, have some script code run and thus say use js to click a button to run some code behind and get the width value.

On the other hand? I think the term "responsive" page is VERY miss-used here. In fact the whole idea of responsive pages? They automatic re-size for you, and thus in code you not supposed to worry or care about the screen size and width anyway!

So, say you create a default web site - asp.net/webforms, vb.net? You have this:

Now a responsive site? (which by default a asp.net project is? - it uses bootstrap).

So, lets re-size the browser to half size. You get this:

Notice how the text paragraphs changed.

notice how the blocks of text are still center.

So the site is automatic responsive. lets go even smaller!!!

You get this:

Now the blocks are falling below each other.

And notice how the menu bar is NOW one of those familiar drop down menus (this is often called a hamburger).

So the above is what they mean by a "responsive" site. And even vb.net/asp.net web forms applications OUT of the box have bootstrap installed, and thus your pages are considered "responsive".

So, the responsive web site already is in place.

I wrote zero code for this to occur.

And did not need, or care or AS A GENREAL RULE need to get some page width - it simply not really done as a matter of action or requirement by you the developer.

If someone is suggesting that you need some javaScript to get the page width to write a responsive web site? Hum, some kind of medical exam is required for such a suggestion!

now, while the above clears up the issue of a "responsive" web site? (which by the way is the default for such web sites in asp.net).

Well, there are perhaps cases in which you do want to get that page width.

But, in your example, we can't find some "event" on the page to get that label, since the web page has not even travelled down to the browser yet!!! (hint: there is thus no page event you can find to do what you are looking for!!!).

And if for some reason you REALLY did need that value (page width)? Then you have to present a page to the user, and then in response to hitting a button or anything that causes a post-back and THEN your code behind runs as a result of this!.

So, I suppose on your first logon page, you could do this (get/grab/save the page width). But this can ONLY occur AFTER the user sees the page, and they hit some button or take actions that post's the page back, and THEN your code behind can run.

A MUST know concept in web development? You have to grasp the so called "round trip" or what we call page life cycle.

On first page load - the client side browser has nothing. And thus that script you have can't run.

AFTER we send the page to the client side, the we have this:

NOTE VERY careful here - the web page is ON CLIENT computer - it is NOT existing at all on the web server side.

You do not have this:

And you don't even have this:

You have this when the user clicks on a button:

The page now travels up to server, and you have this:

NOW your code behind starts running. Your code behind can modify controls, but the page is NOT interacting with the user - ONLY code behind can MODIFY the web page.

So, your code starts running;

When done and ONLY after that code runs? The page THEN makes the trip back down to the browser:

The browser then displays again, and the script code you have THEN starts to run again!!

So, for your page to work? You have to put a button on the page. let the page render, and then when the user clicks on the button? Then your code behind button code can get/grab/look at the page.width.

Say the code behind can look like this (assuming your dropped a button on your page).

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

    Dim MyPageWidth As Integer

    MyPageWidth = myhidden.Text

    ' do whatever more

End Sub