javascript - ASP.Net MVC Ajax - 确定在同一表单上单击了哪个按钮？

Question

这是我的问题:使用 ajax 调用 form.serialize() 时，单击的按钮的值不会作为数据的一部分返回。解决此问题的一种方法是使用隐藏字段而不是按钮值。

但是，我想区分同一表单上的多个按钮，因此我不能只使用隐藏字段，因为无论单击哪个按钮，它都会返回。解决这个问题的最佳方法是什么？

提前致谢!

Answer 1

为您的按钮命名:

<button type="submit" name="Button1">Submit 1</button>
<button type="submit" name="Button2">Submit 2</button>

如果键 Button1 位于 Request 中，那么您就知道该按钮已被单击。

编辑

抱歉。完全错过了 AJAX 位。只需在发送之前将“&Button1=”之类的内容附加到 form.serialize() 的结果中即可。该方法所做的只是创建一个包含表单字段名称和值的查询字符串样式的字符串，因此您可以像添加查询字符串一样向其中添加内容。

编辑#2

嗯，这首先取决于您如何处理提交。您当前是否正在附加表单的 onsubmit 事件？如果是这样，那么就没有好办法知道它是如何提交的。您需要将处理程序附加到每个按钮的 onclick 上，这样您就可以获取事件中涉及的实际按钮元素。

那么，你有两个选择。首先，每个按钮可以有一个单独的处理程序。您仍然可以通过将 AJAX 代码分解为两个处理程序都会调用的单独函数来保持 DRY。或者，其次，您可以为两个按钮设置一个处理程序，然后检查该元素以获取所需的信息。例如，如果您将 name 属性添加到每个属性，那么您可以执行以下操作:

var buttonName = $(this).prop('name');

或者，您可以按照@irfanmcsd 在评论中建议的方式使用data-* 属性。例如，如果您向两个按钮添加了一个属性，例如:

<button type="submit" data-name="Button1">Submit 1</button>

然后您可以通过以下方式检索该值:

var buttonName = $(this).data('name');

对于 data-* 属性，您可以通过 jQuery 的 data() 方法访问它们，并且仅引用 data- 之后的部分.