A user wants to post in his blog, he fills the field and click
submit
.用户想要在他的博客中发帖,他填写该字段并单击提交。
The site is running slow, he clicks again, and again, and again.
该网站运行缓慢,他再次点击,再次点击。
It was finally saved, but now he check his posts and sees
4
posts.它终于被保存了,但现在他检查了他的帖子并看到了4个帖子。
How can I prevent this from happening? If the user click to submit once I want to do nothing
for the next clicks or abort previous
and start a new post, whichever makes more sense or is recommended.
我怎样才能防止这种情况发生?如果用户点击提交一次我想对下次点击不做任何操作或中止之前并开始新帖子,无论哪个更有意义或推荐。
In a form with
在一个表格中
@using (Ajax.BeginForm(...))
{
}
4 个解决方案
#1
17
The easiest way to achieve this is to disable submit buttons after click.
实现此目的的最简单方法是在单击后禁用提交按钮。
Add the following javascript (jQuery) to your view:
将以下javascript(jQuery)添加到您的视图:
$(function () {
$('input[type="submit"]').click(function() {
$(this).attr('disabled', 'disabled');
});
});
Remember to enable buttons after ajax request complete if neccessary:
如果需要,请记住在ajax请求完成后启用按钮:
$('input[type="submit"]').removeAttr('disabled');
UPDATE:
It's better to disable the submit button in forms submit event handler, because an user can submit the form by pressing enter button:
最好在表单提交事件处理程序中禁用提交按钮,因为用户可以通过按Enter按钮提交表单:
$(function () {
$('form').submit(function() {
$('input[type="submit"]', this).attr('disabled', 'disabled');
});
});
#2
3
There are many solutions.
有很多解决方案。
One is to create a random
GUID
with the form as a hidden field which is inserted into database with the post. Before inserting, it checks ifGUID
already exists.一种是创建一个随机GUID,将表单作为隐藏字段插入到数据库中。在插入之前,它会检查GUID是否已存在。
Alternatively you can use a real property such as DateTime (which is sent to the client side as a hidden field) or "Post title".
或者,您可以使用诸如DateTime之类的不动产(作为隐藏字段发送到客户端)或“帖子标题”。
#3
0
How about the minute the user clicks on the action link for the post area you create a real post but set its "Status" to draft?. After you InsertOnSubmit() the post immediately redirect to an action which you retrieve the post and edit it. This happens so fast the user will not notice. So if the site is slow and he clicks on "Submit" multiple times you will not be generating new records just saving to the same record. I using the process on an task list application I working on. See the code below.
如果用户点击您创建真实帖子的帖子区域的操作链接,但将其“状态”设置为草稿?在InsertOnSubmit()之后,帖子会立即重定向到您检索帖子并对其进行编辑的操作。这种情况发生得太快,用户不会注意到。因此,如果网站速度很慢并且他多次点击“提交”,您将不会生成仅保存到同一记录的新记录。我在我工作的任务列表应用程序上使用该过程。请参阅下面的代码。
Better Task List Ticket Controller
更好的任务列表票务控制器
It may not be the fanciest solution but could lead you to a more creative solution that works for you.
它可能不是最好的解决方案,但可以引导您找到适合您的更有创意的解决方案。
#4
0
My vote is for ActionFilters. This blog post has code to just drop into your project and decorate your actions.
我的投票是针对ActionFilters。这篇博客文章包含的代码可以放入您的项目并装饰您的操作。
#1
17
The easiest way to achieve this is to disable submit buttons after click.
实现此目的的最简单方法是在单击后禁用提交按钮。
Add the following javascript (jQuery) to your view:
将以下javascript(jQuery)添加到您的视图:
$(function () {
$('input[type="submit"]').click(function() {
$(this).attr('disabled', 'disabled');
});
});
Remember to enable buttons after ajax request complete if neccessary:
如果需要,请记住在ajax请求完成后启用按钮:
$('input[type="submit"]').removeAttr('disabled');
UPDATE:
It's better to disable the submit button in forms submit event handler, because an user can submit the form by pressing enter button:
最好在表单提交事件处理程序中禁用提交按钮,因为用户可以通过按Enter按钮提交表单:
$(function () {
$('form').submit(function() {
$('input[type="submit"]', this).attr('disabled', 'disabled');
});
});
#2
3
There are many solutions.
有很多解决方案。
One is to create a random
GUID
with the form as a hidden field which is inserted into database with the post. Before inserting, it checks ifGUID
already exists.一种是创建一个随机GUID,将表单作为隐藏字段插入到数据库中。在插入之前,它会检查GUID是否已存在。
Alternatively you can use a real property such as DateTime (which is sent to the client side as a hidden field) or "Post title".
或者,您可以使用诸如DateTime之类的不动产(作为隐藏字段发送到客户端)或“帖子标题”。
#3
0
How about the minute the user clicks on the action link for the post area you create a real post but set its "Status" to draft?. After you InsertOnSubmit() the post immediately redirect to an action which you retrieve the post and edit it. This happens so fast the user will not notice. So if the site is slow and he clicks on "Submit" multiple times you will not be generating new records just saving to the same record. I using the process on an task list application I working on. See the code below.
如果用户点击您创建真实帖子的帖子区域的操作链接,但将其“状态”设置为草稿?在InsertOnSubmit()之后,帖子会立即重定向到您检索帖子并对其进行编辑的操作。这种情况发生得太快,用户不会注意到。因此,如果网站速度很慢并且他多次点击“提交”,您将不会生成仅保存到同一记录的新记录。我在我工作的任务列表应用程序上使用该过程。请参阅下面的代码。
Better Task List Ticket Controller
更好的任务列表票务控制器
It may not be the fanciest solution but could lead you to a more creative solution that works for you.
它可能不是最好的解决方案,但可以引导您找到适合您的更有创意的解决方案。
#4
0
My vote is for ActionFilters. This blog post has code to just drop into your project and decorate your actions.
我的投票是针对ActionFilters。这篇博客文章包含的代码可以放入您的项目并装饰您的操作。