如何在 asp.net mvc 5 视图按钮单击中使用 jquery 插件答案

【问题标题】：how to use a jquery plugin in an asp.net mvc 5 view button click如何在 asp.net mvc 5 视图按钮单击中使用 jquery 插件
【发布时间】：2017-05-30 11:38:58
【问题描述】：

我只是编程新手，所以请温柔。

我正在使用 Visual Studio Community 2015 版。我的项目使用标准的 asp.net MVC 5 解决方案模板。我有一个包含创建按钮的 Visual Studio 脚手架输入表单。

由于双击，我在尝试停止多次提交表单时遇到问题。

几年前我一直在尝试实施在 stackoverflow 上发布的解决方案，但经过两天的尝试后，我没有进一步的进展。

解决方案涉及使用以下 jquery 插件（我必须承认我对 java 还不太了解！）

我想使用的这个 jquery 插件代码在下面，来自这个原始帖子

Prevent double submission of forms in jQuery

jQuery.fn.preventDoubleSubmission = function() {
  $('input[type="submit"]').data('loading-text', 'Loading...');

  $(this).on('submit',function(e){
    var $form = $(this);

    $('input[type="submit"]', $form).button('loading');

    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
      $form.setFormTimeout();
    }
  });

  // Keep chainability
  return this;
};

jQuery.fn.setFormTimeout = function() {
  var $form = $(this);
  setTimeout(function() {
    $('input[type="submit"]', $form).button('reset');
    alert('Form failed to submit within 30 seconds');
  }, 30000);
};

我遇到的问题是如何在我的项目中部署 jquery 插件，然后当有人点击创建按钮时如何调用它。

我已经尝试将插件直接放在页面视图中，也可以作为脚本文件夹中的 javascript 文件，但似乎仍然无法调用该函数来防止重复提交。

我试图通过使用按钮的 onclick 属性来调用该函数，但无法让它运行。有没有人记得以前的解决方案以及如何在 ASP.NET MVC 5 cshtml 视图按钮单击中实现它？

（插件代码放在哪里以及如何从创建按钮调用它）

非常感谢

【问题讨论】：

标签： asp.net-mvc jquery-plugins double-submit-problem

【解决方案1】：

在jquery端使用此代码防止双击

$(document).on('submit', 'form', function () {
        var button = $(this).find('input[type="submit"]');
        setTimeout(function () {
            button.attr('disabled', 'disabled');
        }, 0);
    });

如果在之后的表单和验证时间无效

//disabled Multiple Click Event on form
    $(document).on('invalid-form.validate', 'form', function () {
        var button = $(this).find('input[type="submit"]');
        setTimeout(function () {
            button.removeAttr('disabled');
        }, 1);
    });

【讨论】：