2009-06-06 11 views
1

これは常に私を困惑させるものです。イベントとカスタムサーバーコントロールについての質問

カスタムコントロール(この場合はDatagridコントロールの子)を作成したいが、マウスを特定のセルの上に置くとロールオーバーカラーが表示されるようにしたい。データグリッドにこれを行うための準備がない場合(引数のために)、マウスの座標をセルに関連させてから、最も近いセルを強調表示する必要がありますか?

ありがとう

答えて

2

スタイルシートまたはJavaScriptを使用してロールオーバーの色を定義する必要があります。これはASP.NETを通じて直接制御されることはありません。ホバースタイルの定義に使用するCSSクラスを生成するサーバーコントロール、またはインラインJavaScriptを生成する必要があります。

CSSを使用するのが最良の選択肢ですが、IE6では機能しません(そしてIE7では覚えがたいかもしれません)。この例では、コントロールがデータグリッドをHTMLテーブルとして生成することを前提としています。あなたの質問は "カスタムサーバーコントロール"と書いてあるので、異なるマークアップでコントロールをレンダリングしている場合、これは異なるかもしれません。テーブルのCSSクラスがMyDataGridClassであることを確認してください。あなたが行全体を強調表示したい場合は

.MyDataGridClass td:hover { 
    background: #999; 
} 

は、あなたは上記の例ではtdtrにを変更します。

IE6でホバースタイルを使用したい場合、1つのセルだけを強調表示する必要がある場合は、各セル内に<a />というタグを使用するとより効果的です。 IE6は、それだけで、これが動作する理由である、<a />タグに動作しますが、上記のIE6でないように間違ってホバー擬似セレクタを実装しています

.MyDataGridClass a { 
    display: block; 
    width: 100%; 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 

.MyDataGridClass a:hover { 
    background: #999; 
} 

この例では、あなたが持っていることを、もちろん、前提としていコントロールが配置されるページにCSSを埋め込む機能。何らかの理由でこのオプションがない場合は、JavaScriptルートを使用することができますが、これは推奨される方法ではありません。 JavaScriptを使ってどうやってやっていくのか興味があれば教えてください。

更新:
以下のセクションでは、最初に残したコメントが記載されています。誰かがそれを見つけた場合に備えて私はオリジナルを保管しています。


は、イベント駆動型コントロールを作成するには、 IPostBackEventHandlerまたは IPostBackDataHandler実装する必要があります。これらの2つのインターフェイスの違いを理解する必要がある場合は、 see this questionとすることができます。私は、この答えをあまりにも長くしてしまうので、ここに詳細を含めないでください。

この例ではIPostBackEventHandlerを使用していますが、IPostBackDataHandlerはかなり似ています。

あなたはポストバックイベントを処理するためにいくつかのことを行う必要があります。

  • あなたのイベントのための識別子として使用するキーを作成します。これは、base.Eventのキー/値コレクションで使用されます。この例では、_EventClickオブジェクトを使用しています。
  • イベントをbase.Events[]に設定して登録すると、イベントのサブスクライバはポストバックを超えて維持されます。
  • コントロールをレンダリングするときは、Page.ClientScript.GetPostBackEventReferenceを呼び出します。これにより、ASP.NETの__doPostBack JavaScriptメソッドへの関数呼び出しが生成されます。このスクリプトは、レンダリングするすべてのJavaScriptイベント属性で使用できます。

これは、ASP.NET LinkBut​​tonコントロールの最小限の再作成です。 「魔法」の大部分はAddAttributesToRender()RaisePostBackEvent()の方法で起こります。

public class ControlWithEvent : WebControl, IPostBackEventHandler 
{ 
    private object _EventClick = new object(); 

    protected override HtmlTextWriterTag TagKey 
    { 
     get { return HtmlTextWriterTag.A; } 
    } 

    public event EventHandler Click 
    { 
     add 
     { 
      base.Events.AddHandler(_EventClick, value); 
     } 
     remove 
     { 
      base.Events.RemoveHandler(_EventClick, value); 
     } 
    } 

    public void RaisePostBackEvent(string eventArgument) 
    { 
     // The value of the 'eventArgument' parameter will be "myOptions" 
     EventHandler handler = (EventHandler)base.Events[_EventClick]; 
     if (handler != null) 
     { 
      handler(this, EventArgs.Empty); 
     } 
    } 

    protected override void AddAttributesToRender(HtmlTextWriter writer) 
    { 
     base.AddAttributesToRender(writer); 

     // "myOptions" can be anything, including an empty string. 
     // You can use it for your EventArgs object if you need it. 
     PostBackOptions options = new PostBackOptions(this, "myOptions"); 

     string script = Page.ClientScript.GetPostBackEventReference(options, false); 

     writer.AddAttribute(HtmlTextWriterAttribute.Onclick, script); 
    } 

    public string Text { get; set; } 

    protected override void RenderContents(HtmlTextWriter output) 
    { 
     output.Write(Text); 
    } 
} 

あなたがコントロールして、追加のJavaScriptのロジックを含めたい場合は、私はあなたがASP.NETでスクリプトを登録する方法を確認するためにASP.NETとJavaScriptなどでthis articleを読むことをお勧め。

+0

ありがとうございました。私はあなたに何か他のことを示す必要はありません。特定の行/セルを強調表示するためにjsを使用する方法のアイデアがあります。カスタムコントロールとイベントについて学ぶ必要があるので、私はこの質問をします(あなたが良いリンクを知っていれば、それらを自由にリストしてください):)。 – dotnetdev

+0

@dotnetdev私はあなたのコメントに基づいてあなたが探していると一致するように私の答えを変更しました。うまくいけば、これはあなたが探していたものの多くです。 –

+0

実際、両方の答えは非常に便利でした。要約すると、データグリッド内の行やセルを強調表示する最も簡単な方法は、必要なスタイル(cssがスキンなどを介してコントロールの一部であることを保証する)を持つ純粋なCSSだけです。これは本質的にあなたが提供した最初の方法ですよね? – dotnetdev