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
}

place all code inside outer update panel then the button code should placed inside outer update panel , and its click event placed in update panel trigger tag — Nazir Ullah
– Nazir Ullah, Commented Jun 9, 2016 at 4:08
@NazirUllah Thanks for the input. The posted code were not the correct one, I have edited and removed the UpdatePanels now since they weren't needed. — Falchion
– Falchion, Commented Jun 9, 2016 at 7:12

Martin Parenteau · Accepted Answer · 2016-06-09 03:01:57Z

3

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);
    ...
}

edited Jun 9, 2016 at 3:01

answered Jun 8, 2016 at 13:27

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Falchion Over a year ago

Thanks for your input. I considered a solution like this, as it is the simplest way to perform these functions. Would have been nice not to mix in javasscript in the code, but perhaps I sholdn't make it more complicated than it has to be... Thanks again.

Martin Parenteau Over a year ago

If you don't want to mix Javascript in the C# code, you can declare the buttons in the markup.

Bogdan Mates · Accepted Answer · 2016-06-08 13:00:57Z

0

Consider using Ajax calls instead

answered Jun 8, 2016 at 13:00

Bogdan Mates

5664 silver badges8 bronze badges

5 Comments

Falchion Over a year ago

Yes, that was a part of the question. But as I said I have no idea as to where/how to start with this...

Bogdan Mates Over a year ago

you can check onChange event and when true, make an ajax call. Please let me know if you need more info

Falchion Over a year ago

For now I'm considering putting the numpad functionality on the client side instead. But any tips on good information about general ajax would be welcome (for future enhancements perhaps).

Bogdan Mates Over a year ago

Do you have any experience with Ajax?

Bogdan Mates Over a year ago

I don't know if I'm allowed to do this, but i learned Ajax from here: [link]w3schools.com/ajax

Collectives™ on Stack Overflow

Prevent page refresh on button click

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related