防止页面刷新按钮点击
有一个问题,我似乎无法环绕我的头(我对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
}
您可以执行编辑命令在客户端代码(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);
...
}
感谢您的输入。我考虑过这样的解决方案,因为它是执行这些功能的最简单方法。本来不错,不要在代码中混入javasscript,但也许我不会让它比它更复杂......再次感谢。 – Falchion
如果你不想在C#代码中混用JavaScript,你可以在标记中声明按钮。 – ConnorsFan
地方外更新面板内的所有代码,然后单击按钮的代码应该放在外更新面板内部,它的Click事件放置在更新面板触发变量 –
@NazirUllah感谢您的输入。发布的代码不是正确的,我现在编辑并删除了UpdatePanels,因为它们不是必需的。 – Falchion