【发布时间】：2011-04-18 21:01:19
【问题描述】：
我有 Resorts.aspx，它通过 Ajax 将来自 ResortProducts.ascx 的内容加载到一个 div 中。
Resorts.aspx
<script type="text/JavaScript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(function () {
// View Resort Rates >>
$('.ViewResortRatesLink').click(function () {
var sID = getQueryStringParameterByName("sID", this.href);
sID = sID.replace("~", "");
renderCart("div" + sID, "Loading Resort Product Information...");
$.ajax({
url: this.href,
success: function (result) {
renderCart("div" + sID, result)
}
});
return false;
});
});
function renderCart(container, data) {
$("#" + container).html(data);
}
这是在 jQuery 之上触发的 ActionLink 的代码：
<%= Html.ActionLink(
"View Resort Rates >>",
"ResortProducts",
"Resorts",
new { sID = _supplier.SupplierID },
new { @class = "ViewResortRatesLink" })%>
这是分区：
<div id="div<% =ResortSupplierID %>"></div>
ResortProducts.ascx 加载度假村产品列表，每个产品都包含自己的表单，使用该表单可以将产品添加到购物车。
ResortProducts.ascx
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TrlSite.Services.ViewModels.ResortsView>" %>
<script type="text/JavaScript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(function () {
//+ Add to cart
$(".addProductToCartForm").submit(function (e) {
e.preventDefault();
var HiddenCartForm = {
SupplierID: $(this.hSupplierID).val(),
Code: $(this.hProductCode).val(),
};
$.post($(this).attr("action"), HiddenCartForm, function (data) {
renderCart("rightColumn", data)
});
return false; // form already submitted using ajax, don't submit it again the regular way
});
});
function renderCart(container, data) {
$("#" + container).html(data);
}
</script>
<% foreach (var _supplier in Model.resorts) { %>
<table width="100%" cellpadding="2" cellspacing="0" id="tb_PAL">
<tr>
<td colspan="2" width="15%"> </td>
<td colspan="2">
<table width="100%" cellpadding="2" cellspacing="0" border="0" style="table-layout:fixed;">
<tr>
<td colspan="6"><hr /></td>
</tr>
<tr style="font-weight:bold;">
<td>ROOM TYPE</td>
<td> </td>
<td> </td>
<td align="center">PRICE</td>
</tr>
<tr>
<td colspan="6"><hr /></td>
</tr>
<%
foreach (var _product in products)
{ %>
<tr>
<td colspan="2" align="left" valign="top"><% = _product.Description %></td>
<td align="left">
<% using (Html.BeginForm("AddToCart", "ShoppingCart", FormMethod.Post, new { @class = "addProductToCartForm" }))
{ %>
<input type="hidden" name="hSupplierID" id="hSupplierID" value="<% = _supplier.SupplierID %>" />
<input type="hidden" name="hProductCode" id="hProductCode" value="<% = _product.Code %>" />
<input type="submit" value="+ Add to cart" />
<% } %>
</td>
<td valign="top" align="center">
<span id="roomprice_" onclick="return false;" style="text-decoration:none;cursor:default;color:#000000">
$<% = _product.TotalPrice %>
</span>
</td>
</tr>
<% } %>
<tr >
<td colspan="4">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="5"><hr /></td>
</tr>
</table>
<% } %>
Resorts.aspx 中可能有多个“查看度假村价格>>”链接，单击每个链接将加载包含相应产品列表的 ResortProducts.ascx。如果我在 Resorts.aspx 中仅加载一次 ResortProducts.ascx 并单击提交按钮，一切正常。它发布一次表格。但是，如果我多次加载 .ascx ，那么表单会被提交多次 .ascx 被加载。我该如何解决这个问题？当我提交表单时，它应该只发布一次，同时我应该能够发布多个表单。
【问题讨论】：
-
我看错了，我不相信我的答案是正确的，所以我删除了它。对于那个很抱歉。我会继续关注它，如果我有其他想法，我会发布它。
-
Dusty，您将 javascript 从 .ascx 文件中移出的解决方案是正确的。现在我已经完成了所有工作。我将 javascript 移动到单独的 .js 文件中并将其引用到父 .aspx 文件中，还使用“jquery.live('click', function (e))”函数将 .ascx 文件生成的所有表单绑定到包含的 div 中父 .aspx 文件。我们缺少的最后一块是使用 .live() 函数绑定所有动态生成的表单。它现在可以按需要工作。感谢您的耐心和指引我正确的方向。
-
好的，如果其他人有类似的问题，我会取消删除我的答案。我很高兴你能成功。
标签： jquery asp.net-mvc-2