如何在 asp.net 中使用 jquery 表单插件？

Posted 2023-05-09

【中文标题】如何在 asp.net 中使用 jquery 表单插件？

【英文标题】：How to use jquery form plugin with asp.net?

【发布时间】：2010-09-27 14:42:07

【问题描述】：

在 asp.net 2.0（不是 mvc）中，表单的动作是针对自身的。如何使用表单插件将信息发送到服务器？ 我需要从表单发送数据（比如说姓名、电子邮件、评论）并在客户端显示结果。 有什么想法吗？

谢谢， 戴夫

【参考方案1】：

ms ajax？如果我使用更新面板，我不需要 jquery。我只想使用 jquery 和表单插件（加上验证插件）。我没有microsoft ajax，谢谢！ 只需查看他们在 firebug 中产生的流量即可了解原因。

【参考方案2】：

这取决于您在表单提交期间要使用多少 asp.net。我以同样的方式使用表单插件，但您需要考虑更经典的网络模型。

表单插件执行不包含任何视图状态信息的“提交”。也就是说，如果你尝试得到这样的值

sName = txtName.text

txtName 的文本将为空白。但是，如果您使用您的请求对象，您应该能够在您知道控件的 UniqueID 的情况下撤回该值

sName = Request.Form(txtName.UniqueID)

然后我要做的是使用表单插件的成功：回调来运行一个 ajax 调用，这将拉回你的结果。您可以为此使用 ms ajax WebMethods，并且您可以直接从 jquery 调用 webmethods，而无需 ms 脚本管理器。在这种情况下，WebMethod 正在返回我希望在页面上显示的 html。

$(form).ajaxSubmit(function()
   success:function(ret)
     $.ajax(
       type: "POST",
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       data: "",
       url: "SomePage.aspx/SomeWebMethod",
       success: function(msg)
         $('#somediv').html(msg); 
       
   
);

有关使用 jquery here 调用 ms ajax 的更多信息

【参考方案3】：

由于视图状态与 ASP.NET 中的表单紧密耦合的方式，除非您设置服务来接受请求，否则我不确定这是否可行。如果您不想使用视图状态，那么您可以在 aspx 页面上使用普通的 HTML 表单并将其提交给返回您预期结果的服务。

当您向回发提交一个asp.net 表单时，它会通过页面生命周期将所有内容发回，我不认为jQuery ajax 请求真的有什么可以与之交谈的。你可以在页面上设置一个WebMethod，它本质上公开了一个服务，你可以让jQuery请求与之对话，但我不相信它会起作用。

但是，您可以在不使用 UpdatePanels 的情况下使用 MS 库执行 ASP.NET AJAX，see this article 可以很好地了解您可以使用 WebMethods 和 ajax javascript 库执行哪些操作

【参考方案4】：

我目前混合使用 asp.net 和 jquery，我解决页面生命周期问题的方法就是不使用 autopostbacks 和 asp.net 按钮来提交表单。

我使用附加到简单 html 按钮的 ajax 调用，或者，当我真的想提交整个页面时，我使用 __doPostBack(eventTarget, eventArgument) javascript 函数。

这些文章对我很有用：

Understanding the JavaScript __doPostBack Function Calling __doPostBack in javascript

【参考方案5】：

我今天遇到了这个问题，并最终使用以下 hack 组合解决了它：

假设您有一个搜索页面和一个结果页面，并且您在搜索页面上有一个表单，您希望将其发布到结果页面并使用 jquery 表单插件通过 ajax 加载。您需要执行以下操作：

创建一个 Search.aspx 页面和一个 Results.aspx 页面

ASP.NET webform 页面在一个页面上有一个表单，其 id 为 aspnetForm，但该操作将始终设置为发布到自身，因此当您加载 Search.aspx 页面时，您需要做的第一件事是将 aspnetForm 的操作更改为 Results.aspx，如下所示：

$('#aspnetForm').attr('action', 'Results.aspx');

然后您需要处理视图状态，以便当您从 Search.aspx 发布到 Results.aspx 时，您不会收到无效的视图状态错误。为此，只需从页面中删除 viewstate 变量，如下所示：

$('#__VIEWSTATE').remove();

那么您应该能够像这样设置#aspnetForm 以使用jquery 表单插件：

$('#aspnetForm').ajaxForm();

这允许您发布到 Results.aspx 网络表单。这只是让您朝着正确方向前进的开始，但基本上归结为需要更改 aspnet 表单发布到的操作，然后删除视图状态。

【参考方案6】：

VS08 似乎不适合您，但其他人可能会感兴趣： 前几天我去了一个 MSDN 路演，这似乎很容易。 Scott Gu 的博客有这个： http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx

【参考方案7】：

它不起作用，因为只要您使用服务器控件，ASP.NET 就会强制您将所有内容都放在服务器表单中（这是它处理回发的方式）。您遇到的主要问题是 HTML 无论如何都不允许嵌套表单，因此您甚至无法使用 jQuery 来查找表单元素（这就是我对 FF3 的经验）

好的答案（但很难实现）- 抛弃 WebForm 并使用 MVC。

折衷的解决方法——我自己做了一个小插件，将一个 div 转换为一个 ajax 提交，其中 div 被滥用 method="post" 和 action="url" 装扮，然后使用 jQuery Form Plugin 序列化，提交插件模式。虽然它不执行文件上传（因为这需要 IFrame，我认为它仍然可行，但需要更多技巧）。该代码在我客户的项目中，因此我仍然无权将其作为插件发布。但是，我认为一旦您了解了理论，这并不难做到:)

真的，下次争取好的答案（摆脱 WebForm）。它不仅仅是 jQuery Form 会伤害你，如果你决定做 jQuery + Web Form，你必须承受更多的痛苦，如果这不是我客户的要求，我永远不会走这条路。