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

时间:2014-10-21 17:28:39

标签: javascript jquery asp.net ajax asp.net-mvc

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

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

提前致谢!

3 个答案:

答案 0 :(得分:1)

命名您的按钮:

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

如果密钥Button1位于Request,那么您就知道该按钮已被点击。

修改

对不起。完全错过了AJAX位。只需添加类似&#34;&amp; Button1 =&#34;在发送之前form.serialize()的结果。所有方法都是创建一个查询字符串样式的表单字段名称和值的字符串,因此您可以像查询字符串一样添加它。

编辑#2

嗯,这取决于您首先处理提交的方式。您目前是否正在加入表格onsubmit活动?如果是这样,那么就没有什么好方法可以知道 的提交方式。您需要将处理程序附加到每个按钮的onclick,这样您就可以获得事件中涉及的实际按钮元素。

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

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

或者,您可以使用data-*属性作为评论中建议的@irfanmcsd。例如,如果您向两个按钮添加了属性,例如:

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

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

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

对于data-*属性,您可以通过jQuery的data()方法访问它们,并且只在data-之后引用该部分。

答案 1 :(得分:1)

例如,您的表单有三个按钮,您可以通过data- {attribute}为每个按钮附加按钮特定信息,如示例所示。

<button id="btn01" class="btn" data-id="43" data-name="button one attribute">One</button>
<button id="btn02" class="btn" data-id="45" data-name="button two attribute">Two</button>
<button id="btn03" class="btn" data-id="54" data-name="button three attribute">Three</button>

然后,您可以在每个按钮单击

时访问特定数据
$(function () {
    $('#form1').on({
        click: function (e) {
               var id = $(this).data("id");
               var name = $(this).data("name");
               alert(id + "___" + name);
               return false;
        }
    }, '#btn01');
    $('#form1').on({
        click: function (e) {
               var id = $(this).data("id");
               var name = $(this).data("name");
               alert(id + "___" + name);
               return false;
        }
       }, '#btn02');
    });

以及更多按钮。

然后可以通过

访问共享和常规表单元素数据
form.serialize()

答案 2 :(得分:0)

&#13;
&#13;
var buttonName = this.submit.innerText;
&#13;
&#13;
&#13;

&#13;
&#13;
$('form').submit(function () {
            var buttonName = this.submit.innerText;
        });
&#13;
&#13;
&#13;