21

私は現在、情報アーキテクトと JavaScript 開発者を本業としていますが、最近は再びバックエンド コーディングに取り組んでいます。また、HTML プロトタイプを統合して C# ベースの CMS と連携させようとしているときに、HTML ID 属性がフォーム要素用に .NET によって任意に書き換えられていることについて、プログラマーと衝突しました。

.NET が ID を変更するコード ビハインドの理由は理解できますが、jQuery 拡張インターフェイスなどを開発しようとするときに ID を使用できなくなったという事実は、いくつかの摩擦を引き起こしています。これを回避するにはどうすればよいですか?

代わりにクラス属性を使用してみましたが、それは本当にくだらないものであり、意図したものではなく、レンダリングされたソースをオンザフライで効果的に変更する.NETの問題を回避できません。また、CSS の有用性が低下し、作成と保守の効率が低下することも意味します。

ヒントやアドバイスは大歓迎です-眠れない夜を数回減らすための何か...

4

10 に答える 10

25

簡単に言うと、いいえです。Web フォームでは、要素のネストに応じて ID をいつでも書き換えることができます。ClientID プロパティを介して ID にアクセスできるため、ページ/コントロールの最後にあるスクリプトの変数に ID を設定し、それらを jQuery に入れることができます。

このようなもの：

<asp:button id="ImAButton" runat="server">Click Me</asp:button>

<script type="text/javascript">
var buttonId = "<%=ImAButton.ClientId%>";
$("#"+buttonId).bind('click', function() { alert('hi); });
</script>

それは私が知っているハックですが、うまくいきます。（私は初心者のために注意する必要があります、私はそこでPrototype $ get by idメソッドを使用しています）

于 2008-09-02T08:20:29.283 に答える
12

1 つの方法は、ID を手動でオーバーライドすることです。

public override string UniqueID
{
  get { return this.ID; }
}
public override string ClientID
{
  get { return this.ID; }
}

Rick Strahl は、そのアプローチに関する詳細情報をブログに投稿しました。

于 2008-09-02T08:23:49.290 に答える
7

ASP.Net MVC を見てください。ASP.Net がデフォルトで生成するオーバーキル オブジェクト階層に対応しています。

このサイトは MVC で書かれています (私が思うに) - その構造を見てください。現在新しいプロジェクトに取り組んでいる場合、最初に検討します

基本的な ASP.Net に行き詰まっている場合は、ClientID と UniqueID を上書きすることに注意してください。多くの Web コントロールが壊れる傾向があります。

私が見つけた最善の方法は、読み取れない ClientID を Javascript に渡すことです。

于 2008-09-02T09:00:03.900 に答える
4

.net コントロールを拡張して、関連するプロパティが呼び出されたときに実際の ID を返すようにすることができます。

ClientID は id 属性で、UniqueID は html 要素の name 属性です。したがって、次のようなテキストボックスを作成し、フレームワークのテキストボックスの代わりにこれを使用すると、id および name 属性がサーバー側の ID と同じようにレンダリングされます。

public class MyTextBox : TextBox
{
    public override string ClientID { get { return ID; } }
    public override string UniqueID { get { return ID; } }
}

この新しいユーザー コントロールを使用するには、基本的に、カスタム ユーザー コントロールの場合と同じようにこのコントロールを登録します (web.config で行うことができるので、すべてのページで行う必要はありません)。

<%@ Register Assembly="MyLibrary" NameSpace="MyLibrary.WebControls" TagPrefix="MyPrefix" %>

そして、テキスト ボックスを使用するように使用します。

<MyPrefix:MyTextBox ID="sampleTextBox" runat="server" />
于 2008-09-02T08:18:35.963 に答える
1

個人的には、サーバー側のASP.NETの「魔法」（まだMS MVCのものを使用していません）とクライアント側のコードをブリッジするために開発した一連のメソッドを使用します。これは、IDが変更されるためです。 。これは、有用であると証明される場合とされない場合があるものです。

public void RegisterControlClientID(Control control)
{
   string variableDeclaration = string.Format("var {0} = \"{1}\";", control.ID, control.ClientID);
   ClientScript.RegisterClientScriptBlock(GetType(), control.ID, variableDeclaration, true);
}

したがって、サーバー側のコードでは、これを呼び出して、よりわかりやすい名前を使用するコントロールのインスタンスを渡すだけです。つまり、設計時に、IDが「m_SomeTextBox」のテキストボックスがあり、同じ名前を使用してJavaScriptを記述できるようにしたい場合があります。サーバー側のコードでこのメソッドを呼び出すだけです。

RegisterControlClientID(m_SomeTextBox);

次に、クライアントで次のようにレンダリングされます。

var m_SomeTextBox = "ctl00_m_ContentPlaceHolder_m_SomeTextBox";

そうすれば、すべてのJavaScriptコードは、ASP.NETが変数に名前を付けることを決定したことをかなり知らない可能性があります。確かに、これにはいくつかの注意点があります。たとえば、ページにコントロールの複数のインスタンスがある場合（たとえば、すべてにm_SomeTextBoxのインスタンスがあるユーザーコントロールの複数のインスタンスを使用するため）、通常、このメソッドは最も基本的なニーズに役立ちます。

于 2008-09-02T17:48:10.307 に答える
1

私が通常行うことは、フィールドの名前を受け取る一般的な関数を作成することです。通常の「asp.net」プレフィックスを追加し、オブジェクトを返します。

var elemPrefix = 'ctl00-ContentPlaceHolder-'; //replace the dashes for underscores

var o = function(name)
{    
    return document.getElementById(elemPrefix + name)
}

これで、jQueryでこの種の呼び出しを使用できます

$(o('buttonId')).bind('click', function() { alert('hi); });
于 2008-09-05T22:55:25.283 に答える
1

コントロールツリーが変更されるような方法でページ上のものを再配置すると変更される可能性があるため、asp.net で生成された ID を CSS にハードコードすることは絶対に避けてください。

CSS ID にはその役割があることは間違いないので、クラスのみを使用するという提案は無視します。

ここで説明するさまざまな JavaScript ハックは、小さな問題にはやり過ぎです。クラスからの継承と ID プロパティのオーバーライドも同様です。また、CSS のリファクタリングだけを行いたい場合に、MVC への切り替えを提案することは確かに役に立ちません。

CSS で対象とする個別の div と span を用意するだけです。ID を使用する場合は、ASP.NET コントロールを直接ターゲットにしないでください。

  <div id="DataGridContainer">
     <asp:datagrid runat=server id="DataGrid" >
         ......
     <asp:datagrid>
  </div>
于 2008-09-22T01:53:36.320 に答える
0

はるかに優れたアプローチは、ClientIDMode を使用して に設定することstaticです。特定のページに対して、または web.config ファイルでグローバルに設定することもできます。そうすれば、この問題に再び対処する必要がなくなり、JQuery がよりクリーンになります。

ページの先頭:

<%@ Page Title="" ClientIDMode="Static" Language="C#" CodeBehind="..." Inherits="WebApplication1.WebForm2"  %>

コントロールのみ:

<asp:Panel runat="server"  ClientIDMode="Static"></asp:Panel>
于 2016-02-11T08:32:24.353 に答える
0

.NET システムがいかに直感的でないかはわかりますが、チャンスを与えてください。私の経験では、実際にはよりクリーンなコードが作成されます。もちろん

<asp:button id="ImAButton" runat="server">Click Me</asp:button>

<script type="text/javascript">
var buttonId = <%=ImAButton.ClientId%>
$(buttonId).bind('click', function() { alert('hi); });
</script>

正常に動作します。しかし、これはモジュール化されていないという問題があります。あなたが本当に欲しいのは次のようなものです：

<script type="text/javascript">
function MakeAClick(inid)
{
  $(inid).bind('click', function() { alert('hi); });
}
</script>

その後、Java 側または C# 側のコードで MakeAClick を呼び出します。もちろん、C# 側ではより理にかなっています。そこには ClientID だけが含まれています。

おそらく、これはあなたがレビューしているコードの本当の問題です。

于 2009-12-02T22:00:58.690 に答える
0

jQuery を使用している場合は、ページ上の要素をターゲットにするために自由に使用できる大量のCSS セレクターと jQuery カスタム セレクターがあります。したがって、ID で送信ボタンを選択するのではなく、次のようなことができます。

$('fieldset > input[type="submit"]').click(function() {...});
于 2008-09-09T12:05:25.703 に答える