Dall'archivio script > UserScript

Modificare un Web Control in funzione della risoluzione dello schermo

di Riccardo GoliaRiccardo Golia, in UserScript, ASP.NET, Web Controls,

Spesso ci si trova di fronte al problema di dover gestire la visualizzazione dei dati in funzione di una specifica risoluzione dello schermo (800x600, 1024x768), sacrificando la resa delle pagine nel caso di risoluzioni superiori o inferiori. Come fare allora a modificare il comportamento di un Web Control al fine di ottenere una corretta visualizzazione dei contenuti per le diverse risoluzioni dello schermo?
Ad esempio, potrebbe essere utile modificare il numero di record presentati in ogni pagina di una DataGrid, in modo tale che l'utente non sia costretto ad utilizzare la barra di scroll per vedere tutto il contenuto. Vediamo come fare.

L'informazione relativa alla risoluzione è un dato ricavabile unicamente tramite codice client (JavaScript), utilizzando le due proprietà dell'oggetto screen: window.screen.width indica la larghezza in pixel dello schermo, window.screen.height indica l'altezza. Il trucco consiste nel passare queste informazioni dal client al server nell'ambito della richiesta della pagina, in maniera che possano essere acquisite e trattate nel codice eseguito sul server. Per fare questo un sistema possibile consiste nell'utilizzare un campo hidden nell'ambito del form HTML.

Nell'esempio di seguito, in page1.aspx viene inserita nel campo hidden l'altezza dello schermo durante il caricamento. Una volta cliccato il pulsante, il dato che prima era disponibile solo in ambito client viene trasferito sul server. In page2.aspx la DataGrid viene pertanto visualizzata con 2, 3 oppure 4 righe per pagina in base alla risoluzione dello schermo.

Pagina page1.aspx

<script language="VB" runat="server">
  Sub myButton_Click(sender As Object, e As EventArgs)
    Response.Redirect("page2.aspx?height=" & Request.Form("screenHeight"))
  End Sub
</script>
<body onLoad="document.myForm.screenHeight.value = window.screen.height;">
<form id="myForm" name="myForm" runat="server">
  <input type="hidden" name="screenHeight" />
  <asp:button id="myButton" runat="server" onClick="myButton_Click" text="Clicca qui!" />
</form>
</body>


Pagina page2.aspx

<script language="VB" runat="server">
  
  Sub Page_Load(sender As Object, e As EventArgs)
    
    If Not Me.IsPostBack Then
      myDataGrid.PageSize = 3
      If IsNumeric(Request.QueryString("height")) Then
        If CInt(Request.QueryString("height")) < 768 Then
          myDataGrid.PageSize = 2
        End If
        If CInt(Request.QueryString("height")) > 864 Then
          myDataGrid.PageSize = 4
        End If
      End If
    End If
 
  End Sub
  
</script>
<body>
<form id="myForm" runat="server">
  <asp:datagrid id="myDataGrid" runat="server" allowPaging="true" onPageIndexChanged="..." />
</form>
</body>

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi