using arrowkeys in a c# webapp

StackOverflow https://stackoverflow.com/questions/18694639

  •  28-06-2022
  •  | 
  •  

Question

I am trying to make a webapp with c# as code behind. A target is to be able to change from one site to another using the arrowkeys to switch back and forward. I do have a forward- & backwards button which i think would be the easiest to call, because of the fact,that those buttons already do the "page switching thing". I'm pretty new to the whole c# thingy and don't know much about it yet so i would really appreciate if the code suggestions you guys make are commented.

This is the c# code which is most likly used to get the page location and says the button what he has to do. I did not made the code i took over the project from a guy workin in my company thats why I dont know how they have done everything exactly.

public class GetPageMeta {

public DataTable lDataTable = new DataTable();
public DataSet lPageDataset;
public SqlDataAdapter lDataAdapter;

public  GetPageMeta()
{
    GetDataSet();
}

private void GetDataSet()
{
    SqlConnection lConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["crmmonitorSQLConnectionString"].ConnectionString);
    lConnection.Open();

    //lDataAdapter = new SqlDataAdapter("SELECT T_Pages.ID,T_Pages.CategoryFK,T_Categories.CategoryName,T_Pages.Name,T_Pages.URL,T_Pages.PositionID,T_Pages.DisplayDuration, T_Pages.GraphicsQuant, T_Pages.Description FROM T_Pages LEFT JOIN T_Categories ON T_Pages.CategoryFK = T_Categories.ID ORDER BY T_Pages.PositionID;", lConnection);
    lDataAdapter = new SqlDataAdapter("SELECT T_Pages.ID,T_Pages.CategoryFK,T_Pages.Name,T_Pages.URL,T_Pages.PositionID,T_Pages.DisplayDuration, T_Pages.GraphicsQuant, T_Pages.Description FROM T_Pages ORDER BY T_Pages.PositionID;", lConnection);


    lPageDataset = new DataSet("PageDataSet");
    lDataAdapter.FillSchema(lPageDataset, SchemaType.Source, "T_Pages");
    lDataAdapter.Fill(lPageDataset, "T_Pages");
    lDataTable = lPageDataset.Tables["T_Pages"];
    SqlCommandBuilder cmdbld = new SqlCommandBuilder(lDataAdapter);
    lConnection.Close();
}

private void GetGraphicDataSet()
{

}

public DataRow PMetaDataRow(string url)
{
    try
    {
        DataRow PMetaDataRow;
        DataRow[] lMetaDataRow;
        string search = "URL='" + url + "'";

        //lMetaDataRow = lDataTable.Select(search);
        lMetaDataRow = lDataTable.Select("URL='" + url + "'");
        PMetaDataRow = lMetaDataRow[0];

        return PMetaDataRow;
    }
    catch
    {
        return null;
    }
}

public DataRow PMetaDataRow(int PageID)
{
    try
    {
        DataRow PMetaDataRow;
        DataRow[] lMetaDataRow;
        string search = "ID='" + PageID + "'";

        //lMetaDataRow = lDataTable.Select(search);
        lMetaDataRow = lDataTable.Select("ID='" + PageID + "'");
        PMetaDataRow = lMetaDataRow[0];

        return PMetaDataRow;
    }
    catch
    {
        return null;
    }
}

And here is the Masterpage file:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Masterpage.master.cs" Inherits="Masterpage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">

        <link href="Style.css" rel="stylesheet" type="text/css" />
        <link href="cssreset.css" rel="Stylesheet" type="text/css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
    function hideDiv() {
        if ($(window).width() < 1580) {
            $("#crop2").fadeOut("slow");
        } else {
            $("#crop2").fadeIn("slow");
        }
    }

    //run on document load and on window resize
    $(document).ready(function () {

        //on load
        hideDiv();

        //on resize
        $(window).resize(function () {
            hideDiv();
        });

    });
</script>
<script type="text/javascript">
    function hideDiv2() {
        if ($(window).width() < 1580) {
            $("#crop").fadeOut("slow");
        } else {
            $("#crop").fadeIn("slow");
        }
    }
    $(document).ready(function () {

        //on load
        hideDiv2();

        //on resize
        $(window).resize(function () {
            hideDiv2();
        });
    });
</script>

        <title>MY APP</title>
    </head>

    <body  scroll="no">
        <form id="form1" runat="server">

            <div id="logo">
               <a href="/home.aspx">
                <asp:Image ID="Logol_loop_small" runat="server" ImageUrl="~/Pictures/logol_loop_small.gif" Border="0"/>
               </a>
            </div>
    <div id="topnav">
            <div class="menu2"> 

            <asp:Menu  ID="mnuContent" runat="server"  Font-Names="Trebuchet MS"
            CssClass="SomeMenuClass"
            Orientation="Horizontal" StaticMenuStyle-CssClass="StaticMenuStyle" DynamicMenuItemStyle-CssClass="DynamicMenuStyle"
            StaticMenuItemStyle-CssClass="StaticMenuItemStyle" DisappearAfter="1" DynamicEnableDefaultPopOutImage="False"
            ForeColor="Black" StaticEnableDefaultPopOutImage="False" 
            MaximumDynamicDisplayLevels="10" StaticSubMenuIndent="0px" 
                DynamicHorizontalOffset="1" >
            <DynamicMenuItemStyle CssClass="DynamicMenuStyle" 
                    VerticalPadding="3px" HorizontalPadding="26px" ItemSpacing="0px"></DynamicMenuItemStyle>
            <DynamicMenuStyle Width="300px" CssClass="DynamicMenuStyle" />
                <DynamicSelectedStyle Font-Bold="False" />
                <DynamicItemTemplate>
                    <%# Eval("Text") %>
                </DynamicItemTemplate>

            <StaticMenuItemStyle CssClass="StaticMenuItemStyle" Width="138px" 
                Font-Size="12px" VerticalPadding="13px">
            </StaticMenuItemStyle>
            <StaticMenuStyle CssClass="StaticMenuStyle"></StaticMenuStyle>
            <StaticSelectedStyle Font-Bold="False" VerticalPadding="13px" />
            </asp:Menu> 

            </div>

            <div id="homebutton">
                <asp:ContentPlaceHolder ID="CPH_homebutton" runat="server" />
            </div>
       </div>
        <div id="pagetitel">
        <asp:ContentPlaceHolder ID="CPH_Pagetitel" runat="server"></asp:ContentPlaceHolder>

        </div>

                 <div id="visualtitel1">
                <h2>
                    <asp:ContentPlaceHolder ID="CPH_visualtitel1" runat="server" />
                </h2>
            </div>

            <div id="visual1">
                <asp:ContentPlaceHolder ID="CPH_visual1" runat="server" />
            </div>

            <div id="visualtitel2">
                <h2>
                    <asp:ContentPlaceHolder ID="CPH_visualtitel2" runat="server" />
                </h2>
            </div>

            <div id="visualtitel3">
                <h2>
                    <asp:ContentPlaceHolder ID="CPH_visualtitel3" runat="server" />
                </h2>
            </div>

            <div id="visual2">
                <asp:ContentPlaceHolder ID="CPH_visual2" runat="server" />
            </div>

            <div id="visual3">
                <asp:ContentPlaceHolder ID="CPH_visual3" runat="server" />
            </div>

        <div id="NextPrevious">

                <div id="zuruekbutton">
                    <asp:ContentPlaceHolder ID="CPH_zuruekbutton" runat="server" />
                </div>
                <div class="explanationText">
                   <asp:ContentPlaceHolder ID="CPH_explanationText" runat="server" />
                </div>

                <div id="weiterbutton">
                    <asp:ContentPlaceHolder ID="CPH_weiterbutton" runat="server"/>    
                </div>

        </div>



            <div id="crop">
                <asp:Image ID="cropleft" runat="server" ImageUrl="~/Pictures/crop2.jpg" Width="100%" />
            </div>

            <div id="crop2">
                <asp:Image ID="cropright" runat="server" ImageUrl="~/Pictures/crop3.png" ImageAlign="Right" Width="100%"  />
            </div>

            <div id ="footerleft">
                <% lblCopyright.Text = "&#169; Copyright CompanyName" + DateTime.Today.Year + " | MY APP"; %>
                <asp:Label ID="lblCopyright" runat="server"></asp:Label>
            </div>

            <div id ="footercenter">
                <asp:Label ID="lblInfo" runat="server"></asp:Label>             
            </div>

            <div id="footerright">
                <%  tbDateTime.Text = DateTime.Today.ToLongDateString();   %>
                <asp:Label ID="tbDateTime" runat="server" ></asp:Label>
            </div>

        </form>

    </body>
</html>

the two "buttons" are here:

<asp:Content ID="Content6" ContentPlaceHolderID="CPH_weiterbutton" Runat="Server">
    <a ID="ancNext" runat="server" class="standardbutton" target="_self">Weiter</a>
</asp:Content>

<asp:Content ID="Content7" ContentPlaceHolderID="CPH_zuruekbutton" Runat="Server">
      <a id="ancPrevious" runat="server" class="standardbutton_back" target="_self">Zurück</a>
</asp:Content>
Was it helpful?

Solution

You can use javascript for that by capturing the onkeyup event on the document. If you know the keycode of the key that has been pressed you can then make javascript 'click' the corresponding button, anchor or input, that executes the needed functionality.

Here's a small example script that might get you up to speed:

document.onkeydown = function(event){

    if(!event.keyCode){
        keycode = window.event.keyCode;
    } else {
        keycode = event.keyCode;
    }


    switch(keycode){
        //left
        case 37:
        $('#zuruekbutton').find('a, input[type=submit], button').click();
        break;

        //right
        case 39:
        $('#zuruekbutton').find('a, input[type=submit], button').click();
        break;

        default:
        break;
    }
};
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top