Prevent page refresh on button click

Question

Got a problem that I can't seem to wrap my head around (I'm quite new to the ASP.NET environment) but I'm sure you got some input on this.

What I am trying to accomplish is a numerical keypad made from buttons that, when clicked, populates a TextBox with values according to the pressed button. Everything so far is working great, the TextBox get its values and the result is being posted when the "submit" button is clicked.

The issue i'm having is that the server postback takes 3-5 seconds to complete every time i click a button due to old client hardware and poor network, so this leads to my question: Is it possible at all to populate the textbox without postbacks and only post when the "submit" is clicked when using server-side buttons and textbox? Could it maybe be done with AJAX/JQuery (not att all familiar with these techniques) and if so, any tips on how?

What I would like is to have the buttons of the NumPad to populate the TextBox without the page load and just post the result to the server when the submit button is clicked.

I've tried searching here on SO and google, and have found a lot of interesting ideas and learned a lot. But nothing I have tried have worked so far...

If someone have any pointers on how I might think (or rethink) this problem I'd gladly accept them!

The code I have right now:

ASPX Code:

<div id="NumpadDiv" runat="server">
    <div id="box" runat="server"></div>
    <div id="order" runat="server"></div>
    <div id="row1" class="row" runat="server"></div>
    <div id="row2" class="row" runat="server"></div>
    <div id="row3" class="row" runat="server"></div>
    <div id="row4" class="row" runat="server"></div>
</div>

Code behind:

private void RenderNumpad()
{
    box.Controls.Add(_quantity);
    _quantity.Text = "";

    Button numOrderButton = new Button { Text = "Order", ID = "numOrderBtn", CssClass = "orderButton" };
    numOrderButton.Click += NumOrder_Click;
    order.Controls.Add(numOrderButton);

    Button numBackButton = new Button {Text = "<", ID = "numBackBtn", CssClass = "numButton"};
    numBackButton.Click += NumBack_Click;
    Button numClearButton = new Button {Text = "C", ID = "numClearBtn", CssClass = "numButton"};
    numClearButton.Click += NumClear_Click;

    for (int i = 0; i < 10; i++)
    {
        Button numpadButton = new Button {Text = i.ToString(), ID = i.ToString(), CssClass = "numButton"};
        numpadButton.Click += Numpad_Click;
        switch ((i + 2)/3)
        {
            case 0:
                row4.Controls.Add(numpadButton);
                break;
            case 1:
                row3.Controls.Add(numpadButton);
                break;
            case 2:
                row2.Controls.Add(numpadButton);
                break;
            case 3:
                row1.Controls.Add(numpadButton);
                break;
       }
    }
    row4.Controls.AddAt(0, numBackButton);
    row4.Controls.Add(numClearButton);
}

private void Numpad_Click(object sender, EventArgs e)
{
    var btn = sender as Button;
    if (btn != null)
        _quantity.Text += btn.Text;
}

private void NumClear_Click(object sender, EventArgs e)
{
    _quantity.Text = "";
}

private void NumBack_Click(object sender, EventArgs e)
{
    if (_quantity.Text.Length > 0)
        _quantity.Text = _quantity.Text.Remove(_quantity.Text.Length - 1, 1);
}

private void NumOrder_Click(object sender, EventArgs e)
{
    // Use value from TextBox
}

Answer 1

You can execute the edit commands in client code (Javascript). Since these operations are very simple (insert/delete a character, clear the content of the text box), the server doesn't need to be involved for any of them.

You can define these Javascript functions:

<script type="text/javascript">
    function numPad(btn, txtID) {
        var txt = document.getElementById(txtID);
        txt.value += btn.value;
    };

    function numClear(txtID) {
        var txt = document.getElementById(txtID);
        txt.value = '';
    };

    function numBack(txtID) {
        var txt = document.getElementById(txtID);
        if (txt.value.length > 0) {
            txt.value = txt.value.substring(0, txt.value.length - 1);
        }
    };
</script>

And set the OnClientClick property of the buttons, which specifies the code to be called on the client side when each button is clicked. To avoid the postback to the server, the client code should return false (as shown below). In that scenario, the Click event handler of the buttons is not needed; it would not be called anyway.

numBackButton.OnClientClick = string.Format("numBack('{0}'); return false;", _quantity.ClientID);
...
numClearButton.OnClientClick = string.Format("numClear('{0}'); return false;", _quantity.ClientID);

for (int i = 0; i < 10; i++)
{
    ...
    numpadButton.OnClientClick = string.Format("numPad(this, '{0}'); return false;", _quantity.ClientID);
    ...
}

Answer 2

Consider using Ajax calls instead