Trying to display a phone number as it is entered with buttons using asp.net

I am working on a project in which I am trying to have an empty label populate with the numbers that are being clicked. However, I am having trouble with my code behind my web form and cannot get it to work. My code behind:

public partial class WebForm : System.Web.UI.Page
    {
        ArrayList phoneNumber = new ArrayList() { };
        int counter = 0;
        protected void Page_Load(object sender, EventArgs e)
        {
    }

    protected void btnNum1_Click(object sender, EventArgs e)
    {
        counter++;
        phoneNumber[counter - 1] = 1;
        lblNumbers.Text = phoneNumber.ToString();
    }

    protected void btnNum2_Click(object sender, EventArgs e)
    {

        counter++;
        phoneNumber[counter - 1] = 1;
        lblNumbers.Text = phoneNumber.ToString();
    }

My web form:

    <form id=“form1” runat=“server”>

<div class=“container”>

<asp:Image class=“img-fluid d-block mx-auto” ID=“imgLogo” runat=“server” ImageUrl=“~/Images/logo.png”/>

<div style=“text-align:center; font-size:x-large; font-weight:800”>

<asp:Label ID=“lblNumbers” runat=“server” Text=“”></asp:Label>

</div>

<table class=“table table-bordered” style=“margin:auto; width:250px; height:342px; background-image:url(Images/Telephone-keypad.png); background-repeat:no-repeat; background-position:center;” >

<tbody>

<tr>

<asp:ListBox ID=“ListBox1” runat=“server”></asp:ListBox>

<td><asp:Button ID=“btnNum1” runat=“server” OnClick=“btnNum1_Click”/></td>

<td><asp:Button ID=“btnNum2” runat=“server” OnClick=“btnNum2_Click”/></td>

<td><asp:Button ID=“btnNum3” runat=“server” OnClick=“btnNum3_Click”/></td>

</tr>

<tr>

<td><asp:Button ID=“btnNum4” runat=“server” OnClick=“btnNum4_Click”/></td>

<td><asp:Button ID=“btnNum5” runat=“server” OnClick=“btnNum5_Click”/></td>

<td><asp:Button ID=“btnNum6” runat=“server” OnClick=“btnNum6_Click”/></td>

</tr>

<tr>

<td><asp:Button ID=“btnNum7” runat=“server” OnClick=“btnNum7_Click”/></td>

<td><asp:Button ID=“btnNum8” runat=“server” OnClick=“btnNum8_Click”/></td>

<td><asp:Button ID=“btnNum9” runat=“server” OnClick=“btnNum9_Click”/></td>

</tr>

<tr>

<td><asp:Button ID=“btnStar” runat=“server” OnClick=“btnStar_Click”/></td>

<td><asp:Button ID=“btnNum0” runat=“server” OnClick=“btnNum0_Click”/></td>

<td><asp:Button ID=“btnPound” runat=“server” OnClick=“btnPound_Click”/></td>

</tr>

</tbody>

</table>

</div>

</form>

When each button is clicked, I want the numbers that are clicked to display in the label as they are clicked. Currently, when I click on a button, it gives me an error page that states:

Index was out of range. Must be non-negative and less than the size of the collection.

It also includes this:

Source Error:

Line 21:         {

Line 22:             counter++;

Line 23:             phoneNumber[counter - 1] = 1;

Line 24:             lblNumbers.Text = phoneNumber.ToString();

Line 25:         }

Can someone please help?

#c-sharp #asp.net