C# 防止在单击按钮时刷新页面

遇到了一个我似乎无法理解的问题（我对ASP.NET环境非常陌生），但我相信您对此有一些看法

我试图实现的是一个由按钮组成的数字键盘，当点击时，会根据按下的按钮用值填充文本框。 到目前为止，一切都很好，文本框得到了它的值，结果会在点击“提交”按钮时发布

我遇到的问题是，由于旧的客户端硬件和糟糕的网络，每次单击按钮，服务器回发都需要3-5秒才能完成，因此这就引出了我的问题： 在使用服务器端按钮和文本框时，是否可以在不回发的情况下填充文本框，并且仅在单击“提交”时发布？ 是否可以使用AJAX/JQuery（并非所有人都熟悉这些技术）来实现这一点？如果是的话，有没有关于如何实现的技巧

我想要的是让NumPad的按钮在不加载页面的情况下填充文本框，并在单击submit按钮时将结果发布到服务器

我尝试在SO和google上搜索，发现了很多有趣的想法，学到了很多东西。但到目前为止，我试过的都没用

如果有人对我如何思考（或重新思考）这个问题有任何建议，我会欣然接受

我现在拥有的代码：

ASPX代码：

<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>

代码隐藏：

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
}

private void RenderNumpad（）
{
框。控件。添加（_数量）；
_数量。Text=“”；
Button numOrderButton=新按钮{Text=“Order”，ID=“numOrderBtn”，CssClass=“orderButton”}；
NumOrder按钮。单击+=NumOrder\u单击；
order.Controls.Add（numOrderButton）；
Button numBackButton=new Button{Text=“考虑改用Ajax调用
您可以在客户端代码（Javascript）中执行编辑命令。由于这些操作非常简单（插入/删除字符，清除文本框的内容），因此服务器无需参与任何操作

您可以定义以下Javascript函数：

<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>

将所有代码放在外部更新面板中，然后按钮代码应放在外部更新面板中，其单击事件应放在更新面板触发器中tag@NazirUllah谢谢你的输入。发布的代码不是正确的，我现在已经编辑并删除了UpdatePanel，因为它们不需要。是的，这是问题的一部分。但是正如我所说的，我不知道从何处/如何开始…你可以检查onChange事件，如果是真的，请打一个ajax电话。如果你需要更多信息，请告诉我。现在我正在考虑将numpad功能放在客户端。但是，欢迎提供有关通用ajax的好信息的任何提示（也许是为了将来的增强）。你有Ajax方面的经验吗？我不知道是否允许我这样做，但我从这里学到了Ajax:[链接]谢谢你的输入。我考虑了这样一个解决方案，因为这是执行这些函数的最简单的方法。如果不在代码中混合使用javasscript会很好，但也许我不应该让它变得更复杂……再次感谢。如果你不想在C#代码中混合Javascript，你可以在标记中声明按钮。
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);
    ...
}