Verhindern der Seitenaktualisierung beim Klicken auf die Schaltfläche

Question

Ich habe ein Problem, dass ich nicht um den Kopf zu wickeln scheint (ich bin ziemlich neu in der ASP.NET-Umgebung), aber ich bin sicher, dass Sie etwas dazu bekommen haben.

Was ich versuche zu erreichen, ist ein numerisches Tastenfeld, das aus Schaltflächen besteht, die, wenn sie angeklickt werden, eine TextBox mit Werten entsprechend der gedrückten Taste füllen. Alles funktioniert soweit, die TextBox bekommt ihre Werte und das Ergebnis wird gepostet, wenn auf die Schaltfläche "Abschicken" geklickt wird.

Das Problem, das ich habe, ist, dass der Server Postback dauert 3-5 Sekunden, um jedes Mal, wenn ich einen Klick aufgrund der alten Client-Hardware und schlechtes Netzwerk abzuschließen, so führt dies zu meiner Frage: Ist es überhaupt möglich um das Textfeld ohne Postbacks zu füllen und nur zu posten, wenn auf das "Absenden" geklickt wird, wenn serverseitige Schaltflächen und Textfeld verwenden? Könnte es vielleicht mit AJAX/JQuery gemacht werden (nicht vertraut mit diesen Techniken) und wenn ja, irgendwelche Tipps wie?

Was ich möchte, ist die Tasten des NumPad zu haben, um die TextBox ohne das Laden der Seite zu befüllen und das Ergebnis nur auf den Server zu posten, wenn der Absenden-Button geklickt wird.

Ich habe versucht, hier auf SO und Google zu suchen, und viele interessante Ideen gefunden und viel gelernt. Aber nichts, was ich versucht habe, hat bis jetzt funktioniert ...

Wenn jemand irgendwelche Hinweise hat, wie ich dieses Problem denken (oder überdenken könnte), würde ich sie gerne annehmen!

Der Code Ich habe jetzt:

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

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

Anrufe können Sie die Bearbeitungsbefehle ausführen im Client-Code (Javascript). Da diese Operationen sehr einfach sind (Einfügen/Löschen eines Zeichens, löschen Sie den Inhalt des Textfelds), muss der Server für keine von ihnen beteiligt sein.

Sie können diese Javascript-Funktionen definieren:

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

Und stellen Sie die OnClientClick Eigentum der Tasten, die den Code angibt, auf der Client-Seite aufgerufen werden, wenn jede Schaltfläche geklickt wird. Um das Postback auf den Server zu vermeiden, sollte der Clientcode false (wie unten gezeigt) zurückgeben. In diesem Szenario wird der Click Ereignishandler der Schaltflächen nicht benötigt; es würde sowieso nicht angerufen werden.

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

Betrachten wir mit Ajax statt