C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

ASP.NET上で、display:noneを付与したい

[トピック内 5 記事 (1 - 5 表示)]  << 0 >>

■84488 / inTopicNo.1)  ASP.NET上で、display:noneを付与したい
  
□投稿者/ ruru (27回)-(2017/07/07(Fri) 13:25:58)

分類:[ASP.NET (VB)] 

お世話になります。ご教示ください。

開発環境 Microsoft Visual Web Developer 2010
言語 ASP.NET(VB)

DBからテーブルを取得し、行の数だけリストに表示する画面があります。
一部のみ抜粋いたします。

【aspx】

<asp:Repeater ID="repeater1" runat="server">
<ItemTemplate>
<table border=1; class="SearchList">
<tr>
<td class="SearchListTitle" >条件</td>

<td class="sen"><input type="image" id="icon1" src="_icon1.png" runat="server"></td>
<td class="sen"><input type="image" id="icon2" src="_icon2.png" runat="server"></td>
<td class="sen"><input type="image" id="icon3" src="_icon3.png" runat="server"></td>
<td class="sen"><input type="image" id="icon4" src="_icon4.png" runat="server"></td>
<td class="sen"><input type="image" id="icon5" src="_icon5.png" runat="server"></td>
</tr>
<tr>
</table>
</ItemTemplate>
</asp:Repeater>

【VB】

Dim imageControl As HtmlInputImage
imageControl = CType(e.Item.FindControl("icon1"), HtmlInputImage)


条件に合致しなかった場合は、このiconを隠す必要がありますので下記を追加しました。

imageControl.Visible = False


すると隠れるには隠れましたが、表示エリアが残ってしまい妙な隙間が出来てしまいました。



<aspx>を直接変更する場合は、display:noneを指定すると綺麗に隙間はなくなりましたが
このdisplay:noneを、VB上で記載する方法はありますでしょうか。

ご教示お願い致します。


引用返信 編集キー/
■84490 / inTopicNo.2)  Re[1]: ASP.NET上で、display:noneを付与したい
□投稿者/ WebSurfer (1260回)-(2017/07/07(Fri) 14:37:46)
No84488 (ruru さん) に返信

何をしたいのか分かりません。

ある条件で、サーバーコントロールになっている input type="image" 要素の Visible プロパティを false に
したが、その外の tr, td 要素がそのまま残っているので、

> 表示エリアが残ってしまい妙な隙間が出来てしまいました。

・・・ということになってしまうと言ってます?

そもそも、Visble プロパティを false すると display: none; が設定されるわけではなくて、そのコントロー
ル自体(今回の例では input type="image" 要素)がレンダリングされなくなると思うのですが違います?

> <aspx>を直接変更する場合は、display:noneを指定すると綺麗に隙間はなくなりましたが

とのことですが、具体的にどのようにしたのか書けませんか?

最終的にどのような形になればいいのか html ソースで書けませんか?
引用返信 編集キー/
■84492 / inTopicNo.3)  Re[2]: ASP.NET上で、display:noneを付与したい
□投稿者/ ruru (28回)-(2017/07/07(Fri) 15:11:42)
WebSurfer様

いつもありがとうございます。助かっております。

>>ある条件で、サーバーコントロールになっている input type="image" 要素の Visible プロパティを false に
>>したが、その外の tr, td 要素がそのまま残っているので、
>>>> 表示エリアが残ってしまい妙な隙間が出来てしまいました。
>>・・・ということになってしまうと言ってます?

仰るとおりです。

ミニマムなコードは下記のようになります
(テストは、適当なtxtをhtmlに変えて、画像ではなくてテキストボックスで行っていました)


 ※※※ バックスラッシュaをいれると迷惑等後者といわれてしまったので、一部改変しております


【このような形でHTMLで出力される】
<table border=1;>
<tr border=1;>
<td class="SearchListTitle">条件</td>
<td class="sen"><a><input name="ctl00$MainContent$repeater1$ctl04$icon1" id="MainContent_repeater1_icon1_4" type="text" value="あいうえお">< / a></td>
<td class="sen"><a>< / a></td>
<td class="sen"><a><input name="ctl00$MainContent$repeater1$ctl04$icon3" id="MainContent_repeater1_icon3_4" type="text" value="さしすせそ">< / a></td>
<td class="sen"><a>< / a></td>
<td class="sen"><a>< / a></td>
</tr>
</table>



【こうしたい】
<table border=1;>
<tr border=1;>
<td class="SearchListTitle">条件</td>
<td class="sen"><a><input name="ctl00$MainContent$repeater1$ctl04$icon1" id="MainContent_repeater1_icon1_4" type="text" value="あいうえお">< / a></td>
<td class="sen" style="display:none" ><a>< / a></td>
<td class="sen"><a><input name="ctl00$MainContent$repeater1$ctl04$icon3" id="MainContent_repeater1_icon3_4" type="text" value="さしすせそ">< / a></td>
<td class="sen" style="display:none" ><a>< / a></td>
<td class="sen" style="display:none" ><a>< / a></td>
</tr>
</table>


出力されたほうは、「あいうえお」から「さしすせそ」の間に隙間が出来てしまっていて
これを消したいと考えております。


引用返信 編集キー/
■84495 / inTopicNo.4)  Re[3]: ASP.NET上で、display:noneを付与したい
□投稿者/ WebSurfer (1261回)-(2017/07/07(Fri) 15:51:40)
No84492 (ruru さん) に返信

> 条件に合致しなかった場合は、このiconを隠す必要がありますので下記を追加しました。
> imageControl.Visible = False

そこのところを具体的にどのようにして実現したのか分かりませんが、それができるのであ
れば td 要素をサーバーコントロールに変えて id を付与し、td 要素を FindControl で探
して、それに style 属性を追加してはいかがですか?


<td class="sen" runat="server" id="td1"><input type="image" id="icon1" src="_icon1.png" runat="server"></td>
<td class="sen" runat="server" id="td2"><input type="image" id="icon2" src="_icon2.png" runat="server"></td>
<td class="sen" runat="server" id="td3"><input type="image" id="icon3" src="_icon3.png" runat="server"></td>
<td class="sen" runat="server" id="td4"><input type="image" id="icon4" src="_icon4.png" runat="server"></td>
<td class="sen" runat="server" id="td5"><input type="image" id="icon5" src="_icon5.png" runat="server"></td>


Dim td As HtmlControl
td = CType(e.Item.FindControl("td2"), HtmlControl)

td.Attributes.Add("style", "display:none;")

引用返信 編集キー/
■84496 / inTopicNo.5)  Re[4]: ASP.NET上で、display:noneを付与したい
□投稿者/ ruru (29回)-(2017/07/07(Fri) 16:20:11)
WebSurfer様

ありがとうございます。思ったようなHTMLが出力され、実装が出来ました。

記載していただいたやりかたをそのままにして出来たため、フィードバック出来る情報がないぐらい
ずばりの回答でした。

回答そのものも大変助かりましたが、td属性に対して情報を追加するという発想自体も思いつかなかった為
大変勉強になりました。

以上ありがとうございました。
解決済み
引用返信 編集キー/

このトピックをツリーで一括表示


トピック内ページ移動 / << 0 >>

このトピックに書きこむ