Asp.Net用戶當多個被添加到一種形式

我已經作出了用戶控制，允許圖像被上傳，然後裁剪控制不能正常工作，但是當我有幾個這些控制中的一種形式中，僅使最後一個添加會正常工作。問題是功能storeCoords，對X沒有影響，Y，W和H隱藏字段，因此當作物「橡皮筋」被移動時，這些值不會改變。隨着最終控制的添加，隨着'橡皮筋'的移動，隱藏區域被更新，然後一切按預期工作。爲什麼當我在一個頁面上有幾個這樣的控件時，只有最後一個的JavaScript能像預期的那樣工作。Asp.Net用戶當多個被添加到一種形式

<script src="/Controls/ImageUploadAndCrop/Javascript/jquery.Jcrop.min.js" type="text/javascript"> </script> 
<link href="/Controls/ImageUploadAndCrop/CSS/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript"> 
    $(window).on('load', function() 
    { 

     var elem = $('#<%= CropImage.ClientID %>'), 
      boxWidth = elem.width(), 
      boxHeight = elem.height(); 

     elem.Jcrop({ 
      onSelect: storeCoords, 
      boxWidth: boxWidth, 
      boxHeight: boxHeight 
     }); 

     $('#<%=CropButton.ClientID%>').click 
     (
      function() 
      { 
       var cropImg = $('.jcrop-holder img'); 

       $('#<%= ImgWidth.ClientID %>').val(cropImg.width()); 
       $('#<%= ImgHeight.ClientID %>').val(cropImg.height()); 
      } 
     ); 
    }); 

     function storeCoords(c) 
     { 
      $('#<%= X.ClientID %>').val(c.x); 
      $('#<%= Y.ClientID %>').val(c.y); 
      $('#<%= W.ClientID %>').val(c.w); 
      $('#<%= H.ClientID %>').val(c.h); 
     } 
</script> 
<div> 
    <asp:Panel ID="UploadPanel" runat="server"> 
     <asp:FileUpload ID="Upload" runat="server" /> 
     <br /> 
     <asp:Button ID="UploadButton" runat="server" OnClick="UploadButton_Click" Text="Upload" /> 
     <asp:Label ID="ErrorLabel" runat="server" Visible="false" /> 
    </asp:Panel> 
    <asp:Panel ID="CropPanel" runat="server" Visible="false"> 
     <asp:Image ID="CropImage" runat="server"/> 
     <br /> 
     <asp:HiddenField ID="X" runat="server" /> 
     <asp:HiddenField ID="Y" runat="server" /> 
     <asp:HiddenField ID="W" runat="server" /> 
     <asp:HiddenField ID="H" runat="server" /> 
     <asp:HiddenField ID="ImgWidth" runat="server"/> 
     <asp:HiddenField ID="ImgHeight" runat="server"/> 
     <asp:Button ID="CropButton" runat="server" Text="Crop" OnClick="CropButton_Click" /> 
    </asp:Panel> 
    <asp:Panel ID="CroppedPanel" runat="server" Visible="false"> 
     <asp:Image ID="CroppedImage" runat="server" /> 
    </asp:Panel> 
</div>

來源

2012-07-04 Lee

您不能重複ID的一遍又一遍。如果您有多個元素的網頁上都具有相同的ID，那麼只有在'與ID' DOM的最後一個元素將有針對它採取的任何行動。您必須使用類，並將您正在使用的控制器稱爲「this」。如上所述，上面的代碼不會達到預期的結果。 – Ohgodwhy

我不確定，但我認爲'S（窗口）.on'只在窗口對象被加載時執行一次，並且當您最後一個用戶控件添加到頁面時，您應該將其更改爲單獨容納每個用戶控件。 –

@Ohgodwhy你可以給一個代碼片段嗎？ – Lee

我

看到幾個問題與此控制：

var elem = $('#<%= CropImage.ClientID %>'), 
      boxWidth = elem.width(), 
      boxHeight = elem.height();

不應被隨後分號這些線「;」而不是逗號？但也許是一個錯字。

因爲您使用在頁面的幾個地方這種控制，你需要採取的任何JavaScript代碼的「重複」出場的護理：

例如以下<script>標籤會每次將控件添加到頁面時都會出現。

<script src="/Controls/ImageUploadAndCrop/Javascript/jquery.Jcrop.min.js" type="text/javascript"> </script>

不過，這不會做什麼壞事，以功能（我認爲？！），但下面的功能肯定會做，因爲JavaScript就具有相同的參數相同功能的多個副本。哪一個被考慮？

function storeCoords(c) 
     { 
      $('#<%= X.ClientID %>').val(c.x); 
      $('#<%= Y.ClientID %>').val(c.y); 
      $('#<%= W.ClientID %>').val(c.w); 
      $('#<%= H.ClientID %>').val(c.h); 
     }

速戰速決是：

elem.Jcrop({ 
      onSelect: storeCoords<%= CropImage.ClientID %>, 
      boxWidth: boxWidth, 
      boxHeight: boxHeight 
     });

而且

function storeCoords<%= CropImage.ClientID %>(c) { ... }

這樣你就會有獨特的功能名稱。

然而ASP .Net有機制來處理它使用JavaScript的用戶控件。見ClientScriptManager

來源

2012-07-04 15:33:55

關於第1點，我相信你可以通過用逗號分隔這些值來在單個語句中聲明多個事物。隨着2，我完全同意。在進行用戶控制時，如果頁面上需要有多個名稱，分析所有名稱的唯一性，而不僅僅是HTML ID的唯一性至關重要。 – Chris

第2點是解決方案。謝謝！正如@Chris所說，所有名稱都需要進行獨特分析，而不僅僅是html id。 – Lee

Asp.Net用戶當多個被添加到一種形式

回答

相關問題