ASP.NET網頁控制中的JavaScript衝突

夥計。我在谷歌搜索了我的問題的答案，但我能找到的所有解決方案都是關於生成的asp.net web控件的HTML元素的唯一ID的解決方案。 但這不是我要找的。我需要的是一種方式來編寫我的網頁控制的JavaScript，當它在同一頁面中有多個實例時不會發生衝突。例如，考慮下面這個簡單的用戶控件，wiche有一個文本框和一個按鈕，當用戶點擊它顯示了thext框的值警報的按鈕：ASP.NET網頁控制中的JavaScript衝突

現在想象我們有兩個或更多這樣的用戶控件的實例。我怎樣才能確保JavaScript會顯示正確的文本框的消息，因爲他們的ID將動態生成，並將是所有不同的對方？我知道如何在運行時發現這些ID，這不是問題。但問題在於如何對用戶控件進行編程，以便javascrip僅引用實例的元素以使其成爲其中的一部分，就像我簡單用戶控件示例中的按鈕一樣。如果有十個用戶控件，那麼它將是十個按鈕，當然還有十個文本框。我想這裏的簡單警報信息開始變得有點不簡單。

但也許這很簡單，我只是不知道如何。感謝任何可以幫助我的人。

來源

2013-03-13 Ulysses Alves

有很多種方法可以處理這個。

我喜歡使用的一個就是編寫JS函數，以便它們不會顯式引用任何元素，而是接收元素（或元素ID）作爲參數。然後在你的（用戶）控件背後的代碼中，構建一小段JS，它只設置OnClientClick或調用jQuery（或其他）來將這些元素綁定在一起。

一個例子應該更清楚：

MyUserControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyUserControl.ascx.cs" Inherits="MyUserControl" %> 
<div style="border: 1px solid gray; margin: 1em;"> 
    My ID = "<%= ID%>"<br /> 
    <asp:TextBox runat="server" ID="tbx" /> 
    <asp:Button runat="server" ID="btn" Text="Alert!" /> 
</div>

MyUserControl.ascx.cs

protected void Page_Load(object sender, EventArgs e) 
{ 
    var script = string.Format("ShowAlert('{0}'); return false;", tbx.ClientID); 
    btn.OnClientClick = script; 
}

MyUserControl.js

function ShowAlert(textboxId) 
{ 
    var textbox = jQuery("#" + textboxId); 
    alert(textbox.val()); 
}

other（page，parent control，...）

<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src="MyUserControl.js"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
    <div> 
     <my:UserControl runat="server" ID="control1" /> 
     <my:UserControl runat="server" ID="control2" /> 
     <my:UserControl runat="server" ID="control3" /> 
     <my:UserControl runat="server" ID="control4" /> 
     <my:UserControl runat="server" ID="control5" /> 
    </div> 
</form> 
</body>

這樣的實際JS該做的工作包括只有一次，所有的必要的控制的ID作爲參數傳遞。

當然，最好使用jQuery的on()函數（或類似的機制，取決於您使用的框架）將函數綁定到使用OnClientClick的事件上，以便標記儘可能不含JS。

來源

2013-03-13 13:21:02

使用Clientidmode並將單擊事件處理程序（javascript）附加到每個按鈕。

文本控件：

然後使用javascrpt/jQuery的獲取按鈕ID並獲得最後兩個數字並獲得通過附加的最後兩位數字對應的文本ID從按鈕的ID爲靜態文本「txtEcho」

例得到

ID="txtEcho01" runat="server" ClientIDMode="Static"

Button控件：

ID="btnEcho01" runat="server" ClientIDMode="Static"

來源

2013-03-13 12:47:47 SP007

其中一個解決方案是將單擊事件偵聽器附加到父元素，然後在函數回調中監聽元素。通過這種方式，您根本不必擔心ID，只需基於類或事件源類型即可工作。 Check this link

檢查以下psudo代碼

<div class="portion" > 

... 
<input type="button"...> 

<div/> 


//jquery psudo code 
$(".portion").live(function(e){ 
if (e.target == input){ 
//do action 
} 
});

來源

2013-03-13 13:38:22

ASP.NET網頁控制中的JavaScript衝突

回答

相關問題