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 回答