2011-04-18 89 views
1

我有Resorts.aspx,它通过Ajax将ResortProducts.ascx的内容加载到div中。通过.ascx&ajax加载的ASP.NET MVC表单多次提交

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); 
     } 

这里是ActionLink的代码触发上面的jQuery:

     <%= Html.ActionLink(
            "View Resort Rates >>", 
            "ResortProducts", 
            "Resorts", 
            new { sID = _supplier.SupplierID }, 
            new { @class = "ViewResortRatesLink" })%> 

这里是div:的

<div id="div<% =ResortSupplierID %>"></div> 

ResortProducts.ascx负载列表度假村产品,每种产品都包含自己的形式,可以将产品用于购物c艺术。

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%">&nbsp;</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>&nbsp;</td> 
        <td>&nbsp;</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被加载。我该如何解决这个问题?当我提交表单时,应该只发布一次,同时我应该能够发布多个表单。

+0

我在看这个错误,我不相信我对我的回答是正确的,所以我删除了它。对于那个很抱歉。我会继续关注它,如果我有另一个想法,我会发布它。 – Dusty 2011-04-19 18:34:35

+0

尘土飞扬,你的解决方案是将javascript移出.ascx文件。现在我拥有了一切工作。我将javascript移动到一个单独的.js文件中,并将其引用到父.aspx文件中,并使用“jquery.live('click',function(e))”函数将.ascx文件生成的所有表单绑定到div所包含的父.aspx文件。我们失踪的最后一部分是使用.live()函数绑定所有动态生成的表单。它现在按需要工作。感谢您的耐心和指导我朝着正确的方向发展。 – Alex 2011-04-19 19:18:55

+0

好吧,如果其他人有类似的问题,我就不会回复我的回答。我很高兴你能工作。 – Dusty 2011-04-19 19:32:45

回答

1

我还没有测试过这个,我相信如果你多次添加这个控件,那么javascript部分也会被创建好几次。检查是否正在发生,如果是,那么我认为最好的方法是将javascript部分放入它自己的js文件中,然后在包含控件的页面中引用一次javascript文件。我希望这有帮助。

+0

尘土飞扬,我试过你的建议,但没有帮助。即使在将javascript移至其自己的.js文件后,我也会看到相同的行为。 – Alex 2011-04-19 14:17:29

+0

您是在部分视图还是在父视图中引用它?如果在部分视图中,那么我相信它将与在分部视图中使用JavaScript相同,因此请仔细检查以确保它在父视图中仅显示一次函数。让我知道。谢谢 – Dusty 2011-04-19 14:23:47

+0

该参考文件在局部视图中。我曾尝试将它保留在父视图中,但随后来自.ascx的funtion调用没有被解雇。我怎样才能在.aspx脚本(或引用),并有.ascx触发器? – Alex 2011-04-19 14:31:52

0

更新

我刚才读的初始后的意见相同的答案...


我知道这个帖子是年纪大了,但我已经通过了类似的问题。首先,我使用.NET 3.5,MVC 2.0,jQuery 1.8,bootstrap 2.0。我所引用的部分视图实际上是一个用户控件(ascx),它表示一个包含几个字段和验证的窗体,并作为模态对话框打开。

其次,这里是我做过什么:

  • 我感动的局部视图(用户控制)父视图的JavaScript文件,因为它甚至在局部的一个电话打过几次电话视图。
  • 但是,然后,部分视图内的jQuery绑定停止工作,因为JavaScript是在部分视图的内容被加载之前执行的。
  • 我找到的解决方案是修改绑定类型以使用jQuery活动绑定,并且工作正常。

我希望它能帮助别人!