2009-08-05 13 views
5

私は次のようなコードは約600以上の参照を持っている中でどこでもctl00_かけることなく、IDおよびASP.NETで...コード

$("#ctl00_ContentMainPane_eliteUser").html 

をjQueryの、select要素を使用して、マスターテンプレートを変更する方法コントロール階層が変更されているため、すべてのコードが壊れていただけです。

私は一度それを固定した後ように、この問題を修正するには良い解決策を持っているしたい別のファイルに含まれているので、私はこのようなコードを使用することはできません...

$("#<%= eliteUser.clientID%>").html 

javascriptのすべて、Iドンテンプレートが将来変更される場合は、すべてのコードを変更する必要があります。

+1

多くの問題がここで確認されています:http://stackoverflow.com/questions/1232641 – digiguru

答えて

8

どのようなあなたのマスターページにJavaScript関数の定義について:このような何かをご含まJavaScriptファイルで次に

function getContainerId() { 
    return "<%=ContentMainPane.ClientID %>"; 
} 

$("#" + getContainerId() + "_eliteUser"); 
1

私が知る限り、asp.netはクラス名を混乱させません。コントロールにクラス名を追加し、その名前をコード内の参照として使用します。

$("input[id*=eliteUser]").html() 

をしかし、あなたはeliteUserにそのIDを終了する複数のコントロールを持っている場合 - それは動作しません。

2

あなたはこのような何かを行うことができます。

3

1つの方法は、各ページの上部に書き出されるjs変数オブジェクトを使用することです。外部のjsは、目的のプロパティを持つ設定オブジェクトを参照できます。こうすることで、外部のjsファイルに何もハードコーディングすることなく、aspxページのidを変更することができます。

次に、各ページでコントロールID項目をリストに追加できるようにする、マターページまたはベースページのメソッドを公開できます。基本メソッドは、各ページの上部にpageVarsスクリプトを書き出す責任があります。このhere

について

リックシュトラールの話あなたはまだ速いセレクタの利点を得るように私はこの方法を好みます。

例:

次のスクリプトを書き出すにはaspxを取得してください。外部JSで次に

var pageVars = { 
    idList: { 
     eliteUser : 'ctl00_ContentMainPane_eliteUser', 
     normalUser : 'ctl00_ContentMainPane_normalUser', 
     powerUser : 'ctl00_ContentMainPane_powerUser', 
     ..... 
    } 
}; 

$('#' + pageVars.idList.eliteUser) 
$('#' + pageVars.idList.powerUser)....etc 
0

次のバージョンのVisual Studioで対処されていることがわかっている問題ですが、これはあなたを助けません。

我々は我々のプロジェクトでそれに対処方法は、この何かのラインだった:

$.extend({ 
    clientID: function(id) { 
     return $("[id$='_" + id + "']"); 
    } 
}); 

そして、それを使用するコード:

statusBar = $.clientID("MSS_MESS_LINE_Static") 
+0

しかし、それはidでページ上のすべての要素をズームしてからフィルタリングするので、犬の低速セレクタで終わります。 – redsquare

+0

"visual studio"がこれをどのように解決するかについてのリンクがありますか?あなたは.NETフレームワークを意味しますか? – digiguru

+0

この記事の途中でhttp://www.mostlylucid.net/archive/2008/11/03/way-too-much-information-on-control-ids-and-asp.net-4.0.aspx – redsquare

2

私は、本質的に行うためにWebBrowserコントロールを拡張するクラスを使用していますRedSquare's suggestionと同じです。私はsuggestion on this blog

/// <summary> 
/// Custom Web control that renders two JavaScript functions out into the page 
/// so that defined control IDs can be used to get a reference to HTML DOM elements 
/// </summary> 
[DefaultProperty("Text")] 
[ToolboxData("<{0}:ClientIdHandler runat=\"server\"></{0}:ClientIdHandler>")] 
public class ClientIdHandler : WebControl 
{ 
    private StringBuilder _builder = new StringBuilder(); 

public ClientIdHandler(){} 


/// <summary> 
/// Renders the ClientID of the control in JavaScript function "clientId" to the specified writer. 
/// </summary> 
/// <param name="output">A <see cref="Control"/> whose ClientID will be included 
/// in the rendered HTML output.</param> 
public void AddControl(Control c) 
{ 
    _builder.AppendFormat(" case '{0}': return '{1}'; break;" + Environment.NewLine, c.ID, c.ClientID); 
} 

/// <summary> 
/// Overrides the Render method to prevent a Start and End <see cref="HtmlTextWriterTag"/> 
/// being rendered in the HTML for the control. 
/// </summary> 
/// <param name="output">A <see cref="HtmlTextWriter"/> that represents 
/// the output stream to render HTML content on the client.</param> 
protected override void Render(HtmlTextWriter writer) 
{  
    RenderContents(writer); 
} 


/// <summary> 
/// Renders the contents of the control to the specified writer. 
/// </summary> 
/// <param name="output">A <see cref="HtmlTextWriter"/> that represents 
/// the output stream to render HTML content on the client.</param> 
protected override void RenderContents(HtmlTextWriter output) 
{ 
    output.Write("<script type=\"text/javascript\"> " + Environment.NewLine); 
    output.Write("function clientId(id) {" + Environment.NewLine); 
    output.Write("switch (id) {" + Environment.NewLine); 
    output.Write(_builder.ToString()); 
    output.Write("  }" + Environment.NewLine); 
    output.Write("}" + Environment.NewLine); 
    output.Write("function getElementByClientId(id) {" + Environment.NewLine); 
    output.Write(" return document.getElementById(clientId(id));" + Environment.NewLine); 
    output.Write("}" + Environment.NewLine); 
    output.Write("</script>" + Environment.NewLine); 
} 
} 

を読んで、あなたはあなたの外部JavaScriptでそうページで次をレンダリングしますどの

<script type="text/javascript"> 
function clientId(id) { 
switch (id) { 
    case 'myControl': return 'ctl00_Main_myControl'; break; 
    } 
} 
function getElementByClientId(id) { 
    return document.getElementById(clientId(id)); 
} 
</script> 

をaspxページで使用したり、コードビハインド

protected override void OnInit(EventArgs e) 
    { 
     ClientIdHandler clientIds = new ClientIdHandler(); 
     clientIds.AddControl(myControl); 

     this.Controls.Add(clientIds); 

     base.OnInit(e); 
    } 

することができますファイルは、次のものを使用できます。

// for jQuery selectors 
var myControl = $('#' + clientId('myControl')); 

// for vanilla JavaScript 
var myControl = getElementByClientId('myControl')); 
1

私はScriptManager.RegisterStartupScriptを使用して、必要なすべてのClientIDを取得しています。

  1. IDを格納するページの 'head'にjavascript変数を定義します。 Page_Loadで
  2. 使用RegisterStartupScript次のように変数に値を割り当てる:

ストリングのMyScript = String.Formatの( "window.onload =関数(){ID1 = {0}、ID2 = {1}、 id3 = {2}} "、 Control1.ClientID、 Control2.ClientID、 Control3.ClientID);

ScriptManager.RegisterStartupScript(Page、Page.GetType()、 "SomeKey"、myScript、true);