防止頁面刷新按鈕點擊

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調用，而不是