Using a Timer post back, which controller to use that doesn't post back to server?

Question

Being new to ASP.NET I have run into trouble building my own Whack-a-mole program. I think my problem comes from using Buttons, which by themselves send post backs to the server, making the software unusable. The looks are in place, making new buttons show up in the grid, in different places by random. However, when a button is pushed – the score doesn’t change (which I feel is strange).

Not so strange is that the Button doesn’t work since it sends post back to the server – reloading the UpdatePanel. I think I should use a different controller like the CheckBox and style it hard using CSS (which isn’t a problem). Is this the correct way to go, or should I make use of JavaScript AJAX instead?

Note to self: This technique shouldn’t be used in a public application since it put too much unwanted pressure on the web server. Use in test and learning only!

Thanx for listening!

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" 
    AutoEventWireup="true" CodeFile="Whack-a-mole.aspx.cs" 
    Inherits="Whack_a_mole" %>

<asp:Content ID="Content" ContentPlaceHolderID="cphContent" runat="server">
            <h1>Whack-a-Mole</h1>

    <asp:ScriptManager ID="smgrTime" runat="server" />
    <asp:Timer ID="Timer" OnTick="Timer_Tick" runat="server" Interval="2000" />
    <asp:UpdatePanel ID="updpButtons" runat="server" UpdateMode="Always">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer" />
        </Triggers>

        <ContentTemplate>
            <asp:Label ID="lblPoints" runat="server" Text="Score: 0p" />
            <asp:Button ID="Button1" runat="server" BorderStyle="Outset"
                BorderWidth="3px" CssClass="mole" Text="Mole" 
                onclick="Button1_Click" />
            <asp:Button ID="Button2" runat="server" BorderStyle="Outset"
                BorderWidth="3px" CssClass="mole" Text="Mole" 
                onclick="Button2_Click" />
            <asp:Button ID="Button3" runat="server" BorderStyle="Outset"
                BorderWidth="3px" CssClass="mole" Text="Mole" 
                onclick="Button3_Click" />

            <!-- continues the same way down to Button25 -->

            <asp:Button ID="Button25" runat="server" BorderStyle="Outset"
                BorderWidth="3px" CssClass="mole" Text="Mole" 
                onclick="Button25_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>

</asp:Content>

Excerpt from the Code file:

// points vairable
private int points;

// Property for points
public int Points
{
    get { return points; }
    set { points = value; }
}

protected void Timer_Tick(object sender, EventArgs e)
{
    Random random = new Random();
    int visible;

    foreach (Button button in buttonList)
    {
        visible = random.Next(1, 10);
        if (visible == 3)
            button.Visible = true;
        else
            button.Visible = false;
    }
    lblPoints.Text = "Score: " + Points + " p";
}

protected void Button1_Click(object sender, EventArgs e)
{
    Points = Points + 1;
}

Answer 1

Where is your Points variable declared?

I think it might be a member of the Whack_a_mole WebForm class and that is why it doesn't update. The instance of the WebForm is only used for 1 Postback, and then it is destroyed.

But more important, for a game like this you should use JavaScript or SilverLight.