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

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

掲示板トップ C# と VB.NET 入門 新規作成 利用方法 ツリー表示 トピック表示 ランキング 記事検索 過去ログ
ログ内検索
  • キーワードを複数指定する場合は 半角スペース で区切ってください。
  • 検索条件は、(AND)=[A かつ B] (OR)=[A または B] となっています。
  • [返信]をクリックすると返信ページへ移動します。
キーワード/ 検索条件 /
検索範囲/ 強調表示/ ON (自動リンクOFF)
結果表示件数/ 記事No検索/ ON
大文字と小文字を区別する

No.96278 の関連記事表示

<< 0 >>
■96278 　ASP.NETでinputタグの周りにspanタグが入る
□投稿者/ simano -(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>
    -----

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


親記事 /過去ログ167より / 関連記事表示
削除チェック/

■96279 　Re[1]: ASP.NETでinputタグの周りにspanタグが入る
□投稿者/ simano -(2020/11/09(Mon) 15:52:00)
    ■No96278 (simano さん) に返信

    すみません、上記の「属性値セレクタ」はまちがいです…。
    「A + B」というような、隣接した要素に対するセレクタが有効になりません。
記事No.96278 のレス /過去ログ167より / 関連記事表示
削除チェック/

■96280 　Re[2]: ASP.NETでinputタグの周りにspanタグが入る
□投稿者/ WebSurfer -(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>
記事No.96278 のレス /過去ログ167より / 関連記事表示
削除チェック/

■96286 　Re[3]: ASP.NETでinputタグの周りにspanタグが入る
□投稿者/ simano -(2020/11/09(Mon) 18:17:48)
    ■No96280 (WebSurfer さん) に返信

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

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

    確かに、RadioButton.GroupNameを指定したら、spanタグが生成されなくなり、
    htmlと同じように表示が切り替わるようになりました。
記事No.96278 のレス / END /過去ログ167より / 関連記事表示
削除チェック/



<< 0 >>
パスワード/

- Child Tree -