2

我无法理解控制台正在记录什么样的对象,以及如何识别 HTML 对象。

这是我的场景:

、形式:

!注意:输出的 Id<form></form>被覆盖new {id="ABCDEF"}

@using (Ajax.BeginForm("Add", "Home", new AjaxOptions { HttpMethod = "POST", OnSuccess="doWork(this)"}, new {id="ABCDEF"}))
{
    <div id="popup-container">
        <-- Some Data to post -->
        <input type="submit" value="Save"/>
    </div>
}

2.脚本

<script> 
  function doWork(e){
      console.log(e);    // Log 'e' parameter, passed upper, as 'this' inside OnSuccess='doWork(this)'
  }
</script>

3.控制台输出

Object {
  url: "http://localhost:13350/Home/Add?Length=6", 
  isLocal: false, 
  global: true, 
  type: "POST", 
  contentType: "application/x-www-form-urlencoded; 
  charset=UTF-8"…
}

4.一些观察

  • e变量的类型为 [Object]对象
  • 在 的输出中console.log(e),我可以找到传递给Ajax.BeginForm()helper 的所有参数。eg:生成的URL;动作类型,甚至是 id - 如果深入挖掘 [Object] 的属性。

5.一些问题:

1.这是什么物体?如何访问生成的 HTML <form></form>

2.如何通过函数内部的参数严格获取记录对象的id(其值必须是) ?例如:ABCDEFedoWork(e)jQuery(e).attr("id")

谢谢!

更新 1 - 表单的 HTML 开头

<form action="/Home/Add" data-ajax="true" data-ajax-method="POST" data-ajax-success="doWork(this)" id="ABCDEF" method="post">

解决方案:

如果有人感兴趣,请查看 Daniel 的 JG 帖子,他给出了完整的答案。

更新 2

从 ASP.NET MVC 5.1 开始,“this”默认在不显眼的 ajax 库中可用,请参阅Microsoft 的更改日志

4

1 回答 1

1

当您使用@Ajax.BeginForm 时,您只是将data-ajax 属性添加到表单html 元素中,因此jquery.unobtrusive-ajax 中的javascript 代码实际上可以调用jquery ajax 函数

这是通过on在带有 data-ajax=true 提交事件的表单上设置一个 live(现在已弃用并替换为 ,但 MVC 3 中的 jquery.unobtrusive 代码使用旧版本的 jquery)事件处理程序来完成的:

$("form[data-ajax=true]").live("submit", function (evt) {
    var clickInfo = $(this).data(data_click) || [];
    evt.preventDefault();
    if (!validate(this)) {
        return;
    }
    asyncRequest(this, {
        url: this.action,
        type: this.method || "GET",
        data: clickInfo.concat($(this).serializeArray())
    });
});

//Where asyncRequest will build the options object for the ajax function 
//and will call the ajax function

jquery ajax 方法的参数是从 html 表单元素中的 data-ajax 属性中检索的,这些属性是在服务器端从 @Ajax.BeginForm 帮助程序的参数生成的。

OnSuccess 参数只是设置 data-ajax-success 属性,该属性又将用于success传递给 jquery ajax 函数的选项。

如果您查看 jquery 文档,contextajax 函数中有一个选项可用于this在回调函数(成功/错误/完成回调)中设置上下文(即对象)。当没有传递上下文时,上下文将被设置为一个对象,所有选项将用于 jquery ajax 调用

上下文类型:PlainObject

该对象将成为所有与 Ajax 相关的回调的上下文。默认情况下,上下文是一个对象,表示调用中使用的 ajax 设置($.ajaxSettings 与传递给 $.ajax 的设置合并)。例如,指定一个 DOM 元素作为上下文将使它成为请求的完整回调的上下文,就像这样

因为 jquery.unobtrusive-ajax 代码没有将上下文选项传递给 ajax 调用,所以您在调试器中看到的对象是所有选项都传递给 jquery ajax 函数的对象。

当然,一种选择是将参数传递给您的函数,OnSuccess="doWork(this, 'yourFormId')"但我知道您可能想要一种更通用的方法。在这种情况下,您可以将 jquery-unobtrusive-ajax 代码的源代码修改为:

  • 将上下文设置为要发布的表单元素。这种方式 this在您的成功功能中将是表单 html 元素

    $("form[data-ajax=true]").live("submit", function (evt) {
        var clickInfo = $(this).data(data_click) || [];
        evt.preventDefault();
        if (!validate(this)) {
            return;
        }
        asyncRequest(this, {
            url: this.action,
            type: this.method || "GET",
            context: this //SET CONTEXT TO THE FORM HTML ELEMENT
            data: clickInfo.concat($(this).serializeArray())
        });
    });
    
  • 将带有表单的另一个选项添加到选项对象。这样你就可以this.form在你的成功函数中获取表单 html 元素。

    $("form[data-ajax=true]").live("submit", function (evt) {
        var clickInfo = $(this).data(data_click) || [];
        evt.preventDefault();
        if (!validate(this)) {
            return;
        }
        asyncRequest(this, {
            url: this.action,
            type: this.method || "GET",
            form: this //ADD A FORM PARAMETER TO THE CONTEXT OBJECT
            data: clickInfo.concat($(this).serializeArray())
        });
    });
    

我已经创建了这个小提琴(将你的doWork函数设置为成功/错误回调),所以你可以尝试这两个选项。

希望我已经解释了自己,所有这些都是有道理的!

于 2013-10-31T18:51:05.997 回答