防止页面刷新按钮点击

Question

有一个问题，我似乎无法环绕我的头（我对ASP.NET环境很陌生），但我相信你对此有一些输入。

我想要完成的是一个由按钮组成的数字小键盘，当点击按钮时，它会根据按下的按钮填充一个文本框。 到目前为止，一切都很好，TextBox获取它的值，并在点击“submit”按钮时发布结果。

我遇到的问题是，服务器回发需要3-5秒才能完成每次点击按钮，由于旧的客户端硬件和网络差，所以这导致我的问题： 是否有可能在所有填充文本框没有回发，只有在使用服务器端按钮和文本框时单击“提交”时才发布？ 它可能是用AJAX/JQuery（不熟悉这些技术的att都可以）完成的，如果有的话，有关如何提示？

我想让NumPad的按钮在没有页面加载的情况下填充文本框，并在点击提交按钮时将结果发布到服务器。

我试过在这里搜索SO和谷歌，并发现了很多有趣的想法，并学到了很多东西。但我没有尝试过已经工作到目前为止......

如果有人对我如何思考（或重新考虑）这个问题有任何指示，我很乐意接受他们！

的代码，我现在所拥有的：

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 
} 

Answer 1

您可以执行编辑命令在客户端代码（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> 

，并设置按钮的OnClientClick属性，该属性指定单击各个按钮时，在客户端要调用的代码。为避免回发到服务器，客户端代码应返回false（如下所示）。在这种情况下，按钮的事件处理程序不需要;它不会被调用。

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

考虑使用Ajax调用，而不是