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

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

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

Re[3]: ASP.NETでinputタグの周りにspanタグが入る


(過去ログ 167 を表示中)
掲示板トップ C# と VB.NET 入門 新規作成 利用方法/規約 トピック表示 ランキング 記事検索 過去ログ

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

■96278 / inTopicNo.1) 　ASP.NETでinputタグの周りにspanタグが入る
  ▼■
□投稿者/ simano (13回)-(2020/11/09(Mon) 15:45:57)

分類:[ASP.NET (C#)]　

こんにちは。

htmlに適用したCSSのスタイルを、ASP.NETでも同じように適用させたいと考えています。

しかし、WebコントロールのRadioButtonやCheckBoxは、
htmlになった時に<input>タグの周りに<span>タグが出力されるために、
CSSをうまく動作させることができません。

具体的には、RadioButtonの変化を、属性値セレクタでLabelに反映させることができません。


このような場合、ASP.NET MVCで作成するべきなのかもしれませんが、
プロジェクトの進行状態から、変更は難しい状態です。

また、RadioButtonのチェック状態が変化した時に、PostBackを発生させたいため、
Htmlコントロールではなく、Webコントロールを使いたいと思っています。（AutoPostBackを使いたいためです）

解決方法があれば、教えていただけないでしょうか。


ソースコードは、次の通りです。

---CSS---
.group_btn {
  display:none;
}

.group_btn:active + .group_btn_label {
  color: blue;
}

.group_btn:checked + .group_btn_label {
  color: blue;
}
------

---元のhtml---
 　<div>
	<input id="btn_id_1" class="group_btn" name="group_btn" type="radio"  />
        <label for="btn_id_1" class="group_btn_label">一番目の選択肢</label>
    </div>
 	<div>
		<input id="btn_id_2" class="group_btn" name="group_btn" type="radio"  />
        <label for="btn_id_2" class="group_btn_label">二番目の選択肢</label>
    </div>
------

---ASP.NET---
    <div>
        <asp:RadioButton ID="btn_id_1" name="group_btn" runat="server" />
        <label for="btn_id_1" class="group_btn_label">一番目の選択肢</label>
    </div>
 	<div>
	<asp:RadioButton ID="btn_id_2" name="group_btn" runat="server" />
        <label for="btn_id_2" class="group_btn_label">二番目の選択肢</label>
    </div>

※コードビハインドで、RadioButtonに直接classを設定する。
     btn_id_1.InputAttributes.Add("class", "group_btn");
     btn_id_2.InputAttributes.Add("class", "group_btn");
------

---ASP.NETのhtml出力結果---
    <div>
        <span name="group_btn"><input id="btn_id_1" type="radio" name="btn_id_1" value="btn_id_1" class="group_btn" /></span>
        <label for="btn_id_1" class="group_btn_label">一番目の選択肢</label>
    </div>
 	<div>
		<span name="group_btn"><input id="btn_id_2" type="radio" name="btn_id_2" value="btn_id_2" class="group_btn" /></span>
        <label for="btn_id_2" class="group_btn_label">二番目の選択肢</label>
    </div>
-----

よろしくお願いいたします。

引用返信 編集キー/
■96279 / inTopicNo.2) 　Re[1]: ASP.NETでinputタグの周りにspanタグが入る
▲▼■
□投稿者/ simano (14回)-(2020/11/09(Mon) 15:52:00)
■No96278 (simano さん) に返信

すみません、上記の「属性値セレクタ」はまちがいです…。
「A + B」というような、隣接した要素に対するセレクタが有効になりません。
引用返信 編集キー/
■96280 / inTopicNo.3) 　Re[2]: ASP.NETでinputタグの周りにspanタグが入る
▲▼■
□投稿者/ WebSurfer (2151回)-(2020/11/09(Mon) 16:24:59) 
■No96279 (simano さん) に返信

RadioButton.GroupName の設定の問題では？

以下のコードでやってみましたが、少なくと見かけは両方同じように動きます。

.aspx.cs
--------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class WebForm13 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            RadioButton1.InputAttributes.Add("class", "group_btn");
            RadioButton2.InputAttributes.Add("class", "group_btn");
        }
    }
}

.aspx
-----

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="WebForm13.aspx.cs" 
    Inherits="WebApplication1.WebForm13" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .group_btn {
            display:none;
        }

        .group_btn:active + .group_btn_label {
            color: blue;
        }

        .group_btn:checked + .group_btn_label {
            color: blue;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <h3>元のhtml</h3>
        <div>
	        <input id="btn_id_1" class="group_btn" name="group_btn" type="radio"  />
            <label for="btn_id_1" class="group_btn_label">一番目の選択肢</label>
        </div>
 	    <div>
		    <input id="btn_id_2" class="group_btn" name="group_btn" type="radio"  />
            <label for="btn_id_2" class="group_btn_label">二番目の選択肢</label>
        </div>

        <h3>ASP.NET</h3>
        <div>
            <asp:RadioButton ID="RadioButton1" runat="server" GroupName="aspnet_btn" />
            <label for="RadioButton1" class="group_btn_label">一番目の選択肢</label>
        </div>
 	    <div>
	        <asp:RadioButton ID="RadioButton2" runat="server" GroupName="aspnet_btn" />
            <label for="RadioButton2" class="group_btn_label">二番目の選択肢</label>
        </div>
    </form>
</body>
</html>

html
----

<h3>元のhtml</h3>
<div>
    <input id="btn_id_1" class="group_btn" name="group_btn" type="radio"  />
    <label for="btn_id_1" class="group_btn_label">一番目の選択肢</label>
</div>
<div>
    <input id="btn_id_2" class="group_btn" name="group_btn" type="radio"  />
    <label for="btn_id_2" class="group_btn_label">二番目の選択肢</label>
</div>

<h3>ASP.NET</h3>
<div>
    <input id="RadioButton1" type="radio" name="aspnet_btn" value="RadioButton1" class="group_btn" />
    <label for="RadioButton1" class="group_btn_label">一番目の選択肢</label>
</div>
<div>
    <input id="RadioButton2" type="radio" name="aspnet_btn" value="RadioButton2" class="group_btn" />
    <label for="RadioButton2" class="group_btn_label">二番目の選択肢</label>
</div>
引用返信 編集キー/
■96286 / inTopicNo.4) 　Re[3]: ASP.NETでinputタグの周りにspanタグが入る
▲▼■
□投稿者/ simano (15回)-(2020/11/09(Mon) 18:17:48)
■No96280 (WebSurfer さん) に返信

WebSurferさん、どうもありがとうございました！

グループ名の指定が足りていなかったんですね。

確かに、RadioButton.GroupNameを指定したら、spanタグが生成されなくなり、
htmlと同じように表示が切り替わるようになりました。
解決済み
引用返信 編集キー/


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

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -