Question

遇到了一个问题，我似乎无法解决这个问题（我对ASP.NET环境很陌生），但我确信你对此有了一些意见。

我想要完成的是一个由按钮组成的数字小键盘，单击这些小键盘时，会根据按下的按钮填充TextBox。到目前为止，一切都工作得很好，TextBox得到它的值，结果是在＆＃34;提交＆＃34;单击按钮。

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

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

我已尝试在搜索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
}

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（如下所示）。在那种情况下，不需要按钮的Click事件处理程序;无论如何都不会被称为。

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

单击按钮时阻止页面刷新

2 个答案: