ASP.Net DataBound時Style変更の方法

このQ&Aのポイント
  • ASP.NetのFormView_DataBoundイベントでLabelのスタイル変更はできるが、タグの背景色を変更する方法がわからない。
  • JavaScriptを使用して、document.getElementByIdで指定したタグの背景色を変更することができる。
  • IDが"Great"でスタイルが"newStyle1"の場合、document.getElementById("Great").style.borderColor = "red"と記述することで背景色を変更できる。
回答を見る
  • ベストアンサー

ASP.Net DataBound時Style変2

お世話になります。 ASP.Net 初心者ではありますが、こちらで多岐に渡り質問させていただき、日々成長できていると思っております。この場をお借りして感謝申し上げます。 なるべく自身で解決したいと思うのですが、また壁に当たっております。 FormView_DataBound イベントの時に、データバインドさせてあるLabel を入れてあるタグがあります。 そのタグにスタイルを設定してあり、値により、そのスタイルの変更(背景色の変更)をしたいのですが、Labelに属してあるスタイルは変更できたのですが、Html上のタグの背景色が変更できないのです。いろいろと調べていくうちに、JavaScript で下記のような記述ができるようなのですが、これをこのまま FormView_DataBoundイベントに記述しても document のところでエラーが出てしまいます。 この部分には何かしらのコントロールの変数などを入れるのでしょうか? ちなみに 背景色を変えたいタグには ID="Great" を入れてあるので、このタグの背景色を変える為に、下記のプログラムをどう記述すればよいのか、わかりません。 document.getElementById("Great").style.borderColor = "red" ID = "Great" スタイルが "newStyle1" だった場合、上記をどう記述すればタグの背景色を変更できるでしょうか? 何卒、何卒よろしくお願い申し上げます。

質問者が選んだベストアンサー

  • ベストアンサー
  • shockatz
  • ベストアンサー率80% (153/191)
回答No.1

質問の遷移が早すぎると思うのですが。。 いつの間にか文面も変わっていて、戸惑いました。 結論から申し上げますと、サーバイベントであるItemDataBound中に、クライアントスクリプトであるJavaScriptをfireさせるのは、無理があります。 なので、サーバイベント中に、当該のHtml要素のStyleを変更するのがいいと思います。 <asp:FormView ID="FormView1" runat="server" ondatabound="TestDataBound">  <ItemTemplate>   <div runat="server" id="divTest">    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>   </div>  </ItemTemplate> </asp:FormView> protected void TestDataBound(object sender, EventArgs e) {  var divTest = (HtmlGenericControl)this.FormView1.FindControl("divTest");  divTest.Style["background-color"] = "red"; } とかじゃ駄目ですか?

kyokotan12
質問者

お礼

shockatzさま 大変お世話になっております。 大変申し訳ありませんでした。 JavaScript の document.getElementById で解決できるのかなと、質問を遷移させてしましました。改めてお詫び申し上げます。 Asp.Net のみならず、サーバーイベント、クライアントスクリプト、HTMLの要素、仕様なども合わせて勉強しないといけないと改めて思い知らされました。 例題のプログラムで、実現したかった、タグの背景色を変える事ができました。shockatzさまの叡智に感謝いたしております。 ありがとうございました。

関連するQ&A

  • ASP.Net DataBound時Style変更

    お世話になります。 ASP.Net 初心者ではありますが、こちらで多岐に渡り質問させていただき、日々成長できていると思っております。この場をお借りして感謝申し上げます。 なるべく自身で解決したいと思うのですが、また壁に当たっております。 FormViewにてある伝票の詳細を表示しております。 HTML上に Style143 の属性を持つタグがるのですが、このタグの中にあるデータバインドされた Label の値がマイナスの場合に Style143 の背景色を赤にしたいのですが、やり方がわかりません。 Labelの背景色を変えて試してみたのですが、余白の関係上、見た目が悪いので、タグ自体の属性である Style143 の背景色を変えたいのです。 上級者様には容易な事ではあると思いますが、何卒ご教授いただければと存じます。 よろしくお願い申し上げます。

  • ASP.Net FormViewでの削除について

    大変お世話になっております。 FormView を セッション変数にて該当するデータを表示するようにしております。 そのFormView に削除ボタンを作成して、ボタンのクリックイベントにて下記のようなプログラムを記述しております。     FormView1.DeleteItem()     Session("Number") = ""     Response.Write("<script language='javascript'> { window.close();}</script>") 上記を実行すると削除処理はされ、セッションもクリアされるのですが、その後、そのページを閉じたいのですが、3行目が無視されて、LoadイベントやDataBoundイベントに移ってしまいます。 DeleteItemメソッドでカレントデータを削除してその画面を閉じるには、どうすれば良いのでしょうか? 何か思い違いをしている個所や、ご指摘などございましたら何卒ご教授いただければと存じます。 よろしくお願いいたします。

  • 『オンマウスで説明文を表示』について

    http://lll.s21.xrea.com/m/link/38.html こちらのURLのタグを参考にしてやってみたところ、背景が半透明になってしまうのです。 すぐ上やすぐ下に文字が書いてあるので、ごちゃごちゃになって見えなくなってしまいます。 色々いじってみましたが、どうも上手くいきません。 どなたか、何処をどう変更するのか教えて頂けませんか? お願いします。 使用タグ↓ <SCRIPT language="JavaScript"> <!-- function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.clientX+10; set.style.posTop =document.body.scrollTop+window.event.clientY+10; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} //--> </SCRIPT> <A HREF="○○.html" onmouseover="up('文章...')"; onMouseout="kes()">テストページ</A> <DIV style="display:none;position:absolute;filter:Alpha(opacity=70);" ID="set"> <TABLE BORDER=1 style="border-style:dotted" BORDERCOLOR="#333333" BGCOLOR="#E0E0E0" cellspacing=1 cellpadding=20> <TR><TD BGCOLOR="#FFE0E0"><SPAN ID="te"></SPAN></TD></TR> </TABLE> </DIV>

  • style.displayだと効率悪いから...

    style.displayだと効率悪いからfor文を使いたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>

  • style.displayだと効率悪いから…

    style.displayだと効率悪いから違うやり方をしたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById(&#039;Box1&#039;).style.display = "";と、 document.getElementById(&#039;Box1&#039;).style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById(&#039;sample&#039;)){ id = document.getElementById(&#039;sample&#039;).value; if(id == &#039;select1&#039;){ document.getElementById(&#039;Box1&#039;).style.display = ""; document.getElementById(&#039;Box2&#039;).style.display = "none"; document.getElementById(&#039;Box3&#039;).style.display = "none"; }else if(id == &#039;select2&#039;){ document.getElementById(&#039;Box1&#039;).style.display = "none"; document.getElementById(&#039;Box2&#039;).style.display = ""; document.getElementById(&#039;Box3&#039;).style.display = "none"; } else if(id == &#039;select3&#039;){ document.getElementById(&#039;Box1&#039;).style.display = "none"; document.getElementById(&#039;Box2&#039;).style.display = "none"; document.getElementById(&#039;Box3&#039;).style.display = ""; } } window.onload = viewChange; } </script> javascript全文を書いていただければ幸いです。

  • スタイルシートで...

    スタイルシートでtableもしくはtdタグの背景色を1~100の間で透明にしたいのですが、 その記述方法を忘れてしまったのですがご存じの方いましたらタグをお教えください。 filter:Alpha(opacity=10)←のようにdiv,spanでやってみましたがだめでした。 有名なサイトなどでさがしましたがimgとfontはあるのですがtableの背景色の設定については さがすことができなかった為投稿します。

    • ベストアンサー
    • CSS
  • <asp>タグの属性情報が取得できない

    いつも利用させていただいております。 宜しくお願いします。 今、VS2005のASP.NETを使用してプログラミングをしているのですが どうしてもタグの属性情報が取得できないため、ご存知の方が おりましたら是非アドバイスを・・・と思い投稿させていただいています。 以下にソースを記載いたします <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>test</title> <script language="javascript" type="text/javascript"> <!-- function test(){ alert(document.getElementById("Label1").getAttribute('Visible')); } // --> </script> </head> <body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="DropDownList1" runat="server"> </asp:DropDownList> <asp:Label ID="Label1" runat="server" Text="Label" Visible="true"> </asp:Label> </div> </form> </body> </html> 上記ソースで「getElementById("Label1").getAttribute('Visible')」と言う部分が今回のターゲットです。 通常のHTMLタグ(div,・・・・)ですとなんら問題なくそれぞれの属性を取得できるのですが、こと<asp: タグで始まる属性を取得しようとすると・・・  ID→取得できました。  text→取得できません。  Visible→取得できません。 上記状態となってしまいます。 そこでご質問です。 ・<asp:タグの属性は[getAttribute]で取得できないのでしょうか? ・もし、取得できない場合は、何とか[Visible]をOnClickイベントで  "false"にしたいと考えています。 以上です。もしご存知の方がいましたら、なにとぞご教授の程 宜しくお願いします。 環境  WindowXP  VS2005 EnterPriseEdition  SQLServer2005

  • 特定の<input >タグ及び<label>タグの部分をCSSで非表示にしたい。

    下記コードの<input >タグ及び<label>タグの部分をCSSで非表示にしたいのですが、 <div class="image-size-item"> <input id="image-size-thumbnail-142" type="radio" value="thumbnail" name="attachments[142][image-size]"/> <label for="image-size-thumbnail-142">サムネイル</label> <label class="help" for="image-size-thumbnail-142">(96 × 96)</label> </div> 問題はimage-size-thumbnail-142の最後の番号及び桁数が出力ごとに変化します(例:image-size-thumbnail-154、image-size-thumbnail-2223等)。このような場合、CSSはどのように記述すればよいのでしょうか? CSSは、システムの関係上、同ページのヘッダー内に記述する必要があり、タグ内に直接記述することはできません。 以下のようなCSSコードを<head>内に記述しましたが、 <style type="text/css"> [id~="image-size-thumbnail"] { display: none; } [for~="image-size-thumbnail"] { display: none; } </style> 上記コードの<input >タグ及び<label>タグの部分を非表示にすることができません。どこが間違っているかご指摘いただけると幸いです。また、もっと良い方法があれば、教えてください。 なお、同ページには他の部分において<input >タグ及び<label>タグが使用されている箇所が複数ありますので、<input >タグ及び<label>タグ部分を全て表示にするというCSSの記述は使用できません。 参考サイト等ありましたら、教えて下さい。 よろしくお願いします。

  • ラジオボタン+style.displayで<TR>の表示を切り替えるとテーブルが拡大していく

    ラジオボタンを使って、 if (keisan_select == "1") { document.getElementById('TAG_check_set1').style.display = "inline"; document.getElementById('TAG_check_set2').style.display = "none"; という風に<TR>のstyleを変更して テーブルの表示切り替えを行っているんですが Firefoxで実際に動作させてみると、表示を切り替えるたび セルが拡大するような形で下にずれていきます。(IE7だと問題なし) Firefoxのエラーコンソールでは特に警告無く、 Another HTML-lint gatewayの文法チェックでは75点で普通の評価。(エラーの重要度最大2点) http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html タグに関係ないところで少し書き換えると動作が変わったりするので うちの環境に問題があるのかも知れないけど・・何が原因かわかる人います?。 アップローダに上げたサンプル http://kissho.xii.jp/1/src/1jyou73993.html <TABLE style="border:1px solid"> <TR><TD> テキストエリアが↓にずれていく謎のボタン  <label for="TAG_in_check1"><input type="radio" name="keisan_select" id="TAG_in_check1" onclick="set_display()" value="1" checked>猫</label>  <label for="TAG_in_check2"><input type="radio" name="keisan_select" id="TAG_in_check2" onclick="set_display()" value="2">犬</label>  <label for="TAG_in_check3"><input type="radio" name="keisan_select" id="TAG_in_check3" onclick="set_display()" value="3">狸</label> </TD></TR> <TR id="TAG_check_set1"><TD>表示変更領域 にゃんこ</TD></TR> <TR id="TAG_check_set2" style="display:none"><TD>表示変更領域 わんこ</TD></TR> <TR id="TAG_check_set3" style="display:none"><TD>表示変更領域 ぽんぽこ</TD></TR> </TABLE>

  • ASP.Net GridView TextBoxで

    大変お世話になります。 FormViewにあるGridView を編集状態にした状態で、 Dim Gv As GridView = FormView1.Row.FindControl("GridView1") TextBoxのデータを変更した際に、他のTextBoxの内容を変更したいのですが、 この場合、GridViewのTextBoxのTextChangedイベントを使用しています。 ここで問題なのが、 (1) GridVew の行の Index の取得 (2) TextChangedイベント内での FindControl の記述の仕方 上記のやり方がよくわかりません。 ボタンを使用した場合の Index の取得などはわかるのですが、 GridView1_RowCreated イベントで Dim A As Button = CType(e.Row.FindControl("A"), Button) A.CommandArgument = e.Row.RowIndex.ToString() 上記(1)、(2)はどうしたらよいのかわかりません。 編集状態にあるGridView の Index の取得方法とローカル関数でのFindCotrol メソッドの やり方など、お分かりになる方がいらっしゃいましたら 何卒ご教授いただければと存じます。