2011-04-18 86 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活動綁定,並且工作正常。

我希望它能幫助別人!