asp.net usercontrols中的Javascript變量 - 在同一插入的usercontrol中覆蓋變量

我有四個相同的UserControl插入到Default.aspx中。我想將數據寫入HiddenField並使用javascript將這些數據寫入Label1。asp.net usercontrols中的Javascript變量 - 在同一插入的usercontrol中覆蓋變量

該方法僅適用於上次加載的UserControl - HiddenFieldLoader3。

爲什麼該方法不適用於所有的用戶控件？我如何修復我的代碼？

Default.aspx的

<%@ Register Src="~/HiddenFieldLoader.ascx" TagPrefix="uc1" TagName="HiddenFieldLoader" %> 


<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Default.aspx</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <script src="HiddenFieldLoader.js"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader" /> 
     <uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader1" /> 
     <uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader2" /> 
     <uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader3" /> 
    </form> 
</body> 
</html>

用戶控件：HiddenFieldLoader.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HiddenFieldLoader.ascx.cs" Inherits="NewControls.HiddenFieldLoader" %> 

<script type="text/javascript"> 
    HFLoader.declareVariables("<%=Button1.ClientID %>", "<%=HiddenField1.ClientID %>", "<%=Label1.ClientID %>"); 
</script> 

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
<asp:HiddenField ID="HiddenField1" runat="server" /> 

<input type="button" ID="Button1" value="Save" runat="server" /> 

<input type="button" ID="Button2" onclick="HFLoader.showEvent();" value="Show" runat="server" />

JavaScript文件：HiddenFieldLoader.js

HFLoader = { 

    button: null, 
    hiddenField: null, 
    label: null, 

    declareVariables: function (btn, hf, label) { 
     HFLoader.button = btn; 
     HFLoader.hiddenField = hf; 
      HFLoader.label = label; 
     }, 
     ///////SHOW EVENT 
     showEvent: function() { 
      $("#" + HFLoader.label).html($("#" + HFLoader.hiddenField).val()); 

     }, 
     //////!SHOW EVENT 
     saveHiddenField: function (data) { 

     $("#" + HFLoader.hiddenField).val(data); 
    }, 

    buttons: function() { 
     $("#" + HFLoader.button).click(function() { 

      var datatest = "Data from button ID: " + $(this).attr("id"); 
      HFLoader.saveHiddenField(datatest); 
      $("#" + HFLoader.label).html($("#" + HFLoader.hiddenField).val()); 
      return false; 
     }); 
    }, 

    init: function() { 
     $(function() { 

      HFLoader.buttons(); 

     }); 
    } 

}; 

HFLoader.init();

來源

2013-01-23 Jenan

它不起作用，因爲您使用的是單個實例變量HFLoader，而不是實例。

所以解決這個問題的一種方法是將您的HFLoader放在更近的位置（函數，局部範圍），以便每個方法調用都可以限制對象。在下面的例子中，我將HFLoader變量包含在創建者函數中。然後，每次撥打HFLoaderCreator將產生不同版本（實例）的HFLoader對象。我選擇這樣做的原因而不是創建一個真正的JS類是因爲它需要最少的代碼更改來演示如何完成。

編輯。我們還要說，您希望稍後調用HFLoader來調用諸如saveHiddenField方法之類的內容。要做到這一點，我已經完成了2個。 1）我已將data('HFLoader')添加到傳入的三個元素中，因此您可以使用其中任何一個來調用HFLoader設置。 2）我添加了可以觸發調用方法的自定義事件。這兩個選項顯示了jQuery插件開發人員用來允許訪問底層結構的兩種不同方式。

<script type="text/javascript"> 
    HFLoaderCreator("<%=Button1.ClientID %>", "<%=HiddenField1.ClientID %>", "<%=Label1.ClientID %>"); 
</script> 


function HFLoaderCreator(btn, hf, label) 
{ 
    var HFLoader = { 

     button: null, 
     hiddenField: null, 
     label: null, 

     declareVariables: function (btn, hf, label) { 
      HFLoader.button = btn; 
      HFLoader.hiddenField = hf; 
      HFLoader.label = label; 
     }, 

     saveHiddenField: function (data) { 
      $("#" + HFLoader.hiddenField).val(data); 
     }, 

     buttons: function() { 
      $("#" + HFLoader.button).click(function() { 

       var datatest = "Data from button ID: " + $(this).attr("id"); 
       HFLoader.saveHiddenField(datatest); 
       $("#" + HFLoader.label).html($("#" + HFLoader.hiddenField).val()); 
       return false; 
      }); 

      // add the data so it can be recalled at a later date 
      $("#" + HFLoader.button).data('HFLoader', HFLoader); 
      $("#" + HFLoader.hiddenField).data('HFLoader', HFLoader); 
      $("#" + HFLoader.label).data('HFLoader', HFLoader); 

      // add custom event handlers - saveHiddenField 
      $("#" + HFLoader.button).on('saveHiddenField', HFLoader.saveHiddenField); 
      $("#" + HFLoader.hiddenField).on('saveHiddenField', HFLoader.saveHiddenField); 
      $("#" + HFLoader.label).on('saveHiddenField', HFLoader.saveHiddenField); 

      // add custom event handlers - showEvent 
      $("#" + HFLoader.button).on('showEvent', HFLoader.showEvent); 
      $("#" + HFLoader.hiddenField).on('showEvent', HFLoader.showEvent); 
      $("#" + HFLoader.label).on('showEvent', HFLoader.showEvent); 
     }, 

     init: function() { 
      $(function() { 

       HFLoader.buttons(); 

      }); 
     } 

    }; 

    HFLoader.declareVariables(btn, hf, label); 
    HFLoader.init(); 

    return HFLoader; 
}

所以現在要利用它。在JS，如果你想查找基於Button1的ID的HFLoader數據，你可能會做這樣的事情：

<script type="text/javascript"> 
    var HFLoader = $('#<%=Button1.ClientID %>').data('HFLoader'); 
    HFLoader.showEvent(); 
</script>

如果你想使用ButtonID1觸發自定義事件，這將最終調用showEvent方法，你可以這樣做：

<script type="text/javascript"> 
    $('#<%=Button1.ClientID %>').trigger('showEvent'); 
</script>

如果你想要做內聯，喜歡你的第一個例子...

<input type="button" ID="Button2" onclick="$('#<%=Button1.ClientID %>').data('HFLoader').showEvent();" value="Show" />

雖然我會強烈建議，而不是使用JS對線Button2的事件，如：

$(function() 
{ 
    $('#<%=Button2.ClientID').click(function() 
    { 
    $('#<%=Button1.ClientID %>').data('HFLoader').showEvent(); 

    return false; 
    }); 
});

這樣它就不是內聯腳本。總的來說，HFLoader的腳本有點被黑了。我建議看看我放在一起的例子，以提取有用的信息，並考慮重新考慮和/或重寫你做事情的方式。你的大腦推動你進入某種「全局」視圖，或者某種自動作用域的變量HFLoader。但是如果你在一個頁面上有5個實例，那麼你確實需要一些HFLoader對象的實例，而不是HFLoader的全局概念。這就像創建類的新實例，而不是使用類的靜態或單例實例 - 兩個非常不同的概念！

我希望這會有所幫助。

來源

2013-01-23 20:48:59

輝煌的代碼！非常感謝你！ :-) – Jenan

我添加了一個函數來顯示消息 - showEvent和帶有ID - Button2的按鈕。我怎樣才能改變你的方法來調用這個功能？謝謝！ – Jenan

我在嘗試這個「onclick =」HFLoader.showEvent（）;「」，它不起作用。我怎樣才能解決這個問題？謝謝@Eli Gassert – Jenan

asp.net usercontrols中的Javascript變量 - 在同一插入的usercontrol中覆蓋變量

回答

相關問題