在asp.net webform上加载表单的Jquery Ajax

Question

我在父.aspx的div上使用$ .load（）a .aspx页面加载，让我们说。加载内容时，在aspnetForm内的代码中放置一个新表单。我之前以一种非常类似的方式完成了这个，但是这次提交按钮将新表单提交到ajax加载页面，而不是aspnetForm父页面。

编辑： 更多细节

当用户从列表中选择一组项目时，它们会被ajax加载，如下所示：

$("#gvContacts").load("MailingContacts.aspx?ids="+$("#filters").val() + "&removedContacts=" + $("#removedContacts").val() + "&action=<%=Convert.ToInt16(this.Action) %>", function());

MailingContacts是一个内置GridView的aspx webForm。当.load将HTML放在div上时，它会像这样：

<form id="form1" action="MailingContacts.aspx?ids=11&amp;removedContacts=&amp;action=2" method="post" name="form1">
<!-- GridView code -->

</form>

由于某种原因，提交页面的Button正在使用这个新表单而不是原始的aspnetForm。

Answer 1

您不允许使用嵌套表单 - 如果您在主要父表单中添加一组新的<form>标记，那么您将陷入痛苦的世界。

基本上，您通过在客户端创建嵌套表单来绕过服务器端验证。我想你的提交按钮然后使用它在页面上找到的最后一个表单操作，而不是“父”操作。

你应该：

1. 将创建的JavaScript表单加载到主ASP.NET表单控件外部的<div>（页面上允许多个表单，而不是嵌套）。
2. 以能够处理MailingContacts表单内容的方式构建主表单，并从中删除表单标记。
3. 不是返回整个页面的HTML，包括通过AJAX的GridView，只返回用户详细信息的集合，并使用jQuery等将它们渲染到列表中 - 您发送的数据比发送所有数据所需的数据多得多HTML。

Answer 2

这是因为表单标记中设置的action property有一个值，告诉它在ASP.Net中提交的位置...默认情况下，这是页面的URL。

e.g。我目前的项目输出中的表格如下：

<form name="aspnetForm" method="post" action="/Admin/Report/497" id="aspnetForm" />

Answer 3

如何在asp.net表单标签中“嵌套”表单标签内添加IxQuick搜索框，并提交提交功能。

药膏！我遇到了类似的问题。我在一个包含asp.net表单标记的母版页上构建了一个aspx页面。现在，我想在该页面上使用Ixquick搜索框，但我需要将其封装在表单标签内以使其工作;但是，当然，您不能在aspx页面中嵌套表单标记。

以下是我解决问题的方法：

我在jquery中创建了整个搜索框，并使用jquery将其添加到aspx页面以替换空div。在服务器提供其代码后，Javascript在客户端中运行，从而绕过嵌套div的任何问题。这也避免了母版页的表单标记的母版页提交行为的任何问题。您可以在输出的html中获得自己的表单标记，以及您自己的提交行为。

将这两行放在您希望搜索框出现的aspx页面中。

<div id="search"></div>
<script type="text/javascript">AddSearchBox("#search");</script>

在我的.js文件中，我补充道：

function AddSearchBox(where){
var SearchingForm = "<form id='metasearch' name='metasearch' method='POST' accept-charset=' UTF-8' action='javascript:SearchBarSubmit()' ><input name='keyword' type='text' size='32' id='searchbox' /><input type='submit' value='WebSearch'  id='searchbutton' /></form> "
$(where).html(SearchingForm);
return false;
}

function SearchBarSubmit(){
var searchquery = $('#searchbox').val();
location.href="http://ixquick.com/do/metasearch.pl?query=" + searchquery + "&cat=web&language=english&cmd=process_search&frm=sb&linkback_url=http://www.mywebsite.com&linkback_sitename=mySiteName";
return false;
}

现在，每当有人输入我的搜索框时，它会自动在IxQuick中运行搜索查询并显示结果 - 就像在普通的html表单中一样。更好的是，如果他们没有打开javascript，他们就不会破坏搜索框，因为他们根本没有搜索框！我不介意，因为我为了漂亮而添加了搜索框。

如果您使用此代码，请务必将“www.mywebsite.com”更改为您自己的网站，并确保将“mySiteName”的链接更改为您网站的名称。