单击按钮时阻止页面刷新

时间:2016-06-08 12:32:08

标签: c# html asp.net

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

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

我遇到的问题是,由于旧的客户端硬件和糟糕的网络,每次单击按钮时服务器回发都需要3-5秒才能完成,因此这引出了我的问题: 是否有可能在没有回发的情况下填充文本框,并且仅在"提交"使用服务器端按钮和文本框时单击? 是否可以使用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
}

2 个答案:

答案 0 :(得分:3)

您可以在客户端代码(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);
    ...
}

答案 1 :(得分:0)

考虑使用Ajax调用