遇到了一个问题,我似乎无法解决这个问题(我对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
}
答案 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调用