How to change site properly in asp.net c# by changing screen size

Question

I have a ASP.net C# site and want to change some property of my site when the size of the screen change. For example I have a ListView and set GroupItemCount = "10" . I want to change this to GroupItemCount = "3" , if size of screen change to less than width: 1000px .

Is it possible?

what code is for this goal in C# or ASP.net?

Answer 1

To get the screen size, you have to use JavaScript. And this means that such code will have to run before the page is loaded.

So, in a logon page, or main page, that JavaScript will have to "have run" at some point in time. From that you want to save the width, probably to session.

However, before we go down the above road, perhaps you can just float left the card type of view, and then you don't care nor need some grouping size.

If you float left each data row for the card view, then the effect is a rather nice "responsive" page.

So, say this markup:

<asp:ListView ID="ListView1" runat="server" DataKeyNames="ID"  >

    <ItemTemplate>

        <div class="mybox">
            <div style="text-align: center; padding: 2px 10px 12px 10px">
                <asp:Button ID="cmdMyView" runat="server" Text="View"
                    CssClass="btn-info" Style="float: right"
                    OnClick="cmdMyView_Click1"
                    CommandArgument='<%# Eval("ID") %>' />
                <br />
                <h3><%# Eval("Fighter") %></h3>
                <asp:Image ID="Image2" runat="server" Width="180" Height="120"
                    ImageUrl='<%# Eval("ImagePath") %>' />
                <h4>Engine</h4>
                <asp:Label ID="EngineLabel2" runat="server" Text='<%# Eval("Engine") %>' />
                <h4>Description</h4>
                <asp:Label ID="DescLabel" runat="server" Text='<%# Eval("Description") %>' />
                <br />
            </div>
        </div>

    </ItemTemplate>
    <LayoutTemplate>
        <tr id="itemPlaceholder" runat="server">
        </tr>
    </LayoutTemplate>

</asp:ListView>

In above, I have removed the grouping template.

Since each "row" is a simple div floated left, then the effect is this:

So, depending on what kind of grouping, you might be able to remove the grouping altogether, and just let each row float left on the page. The end result is with little effort, the page layout becomes responsive, and works rather nice for any screen resolution.

As noted, if the above will not suffice for your needs, then you will need to add some JavaScript to obtain the screen size, and then pass those values from JavaScript to the server, and you have to have such code run before that page loads. Hence, this implies that another page such as your main startup page, or even the logon page will have to capture such information.

The base JavaScript code (I'm using jQuery) looks like this:

    <asp:HiddenField ID="bWidth" runat="server" ClientIDMode="Static" />
    <asp:HiddenField ID="bHeight" runat="server" ClientIDMode="Static" />
    <asp:HiddenField ID="bZoom" runat="server" ClientIDMode="Static" />

    <script>


        $(function () {
            SetWidthHeight();
        });

        function SetWidthHeight() {
            var height = $(window).height();
            var width = $(window).width();
            var sZoom = Math.trunc( ((window.outerWidth - 10) / window.innerWidth) * 100 );

            $('#bWidth').val(width)
            $('#bHeight').val(height)
            $('#bZoom').val(sZoom)
        }

    </script>

So, the above will have to run on some page, and then on a post-back, you have to grab the values from those hidden fields.

Hence this on say the master page - and in this case, we only run the code on a post-back = true.

    if (IsPostBack)
    {
        if (!IsNothing(Membership.GetUser))
        {
            var cBrowserInfo = new clsBrowserInfo();
            cBrowserInfo.sWidth = this.bWidth.Value;
            cBrowserInfo.sHeight = this.bHeight.Value;
            cBrowserInfo.sZoom = this.bZoom.Value;
        }

        if (IsNothing(Session("BrowserInfo")))
            Session("BrowserInfo") = cBrowserInfo;
    }

And above was a simple class I grab on one of the first page loads of the site.

The class looks like this:

class clsBrowserInfo
{
    public string sHeight;
    public string sWidth;
    public string sZoom;
}