4

C#.NET 3.5 でプログラムを使用してラジオ ボタン リストを生成し、RadioButtonListそのために a を使用しています。ただし、非常にイライラするのは、またはRepeatLayoutにしか設定できないプロパティです。FlowTable

テーブルは表形式のデータ用であり、フォームを表示するためのものではありません。また、フローはスタイリングに適していないため、役に立ちません。

私が本当に欲しいのは、CSS で対処できる div のネストです。これはできますか？

私が話していることを説明するためのいくつかの例と、以下のサンプルコード。

フロー例

<span id="s1">
    <input id="s1_0" type="radio" value="Answer A" name="s1">
    <label for="s1_0">Answer A</label>
    <br>
    <input id="s1_1" type="radio" value="Answer B" name="s1">
    <label for="s1_1">Answer B</label>
</span>

テーブルの例

<table border="0" id="s1">
    <tbody>
        <tr>
            <td><input type="radio" value="Answer A" name="s1" id="s1_0"><label for="s1_0">Answer A</label></td>
        </tr>
        <tr>
            <td><input type="radio" value="Answer B" name="s1" id="s1_1"><label for="s1_1">Answer B</label></td>
        </tr>
    </tbody>
</table>

私が実際に欲しいもの

<div id="s1">
    <div>
        <input type="radio" value="Answer A" name="s1" id="s1_0">
        <label for="s1_0">Answer A</label>
    </div>
    <div>
        <input type="radio" value="Answer B" name="s1" id="s1_1">
        <label for="s1_1">Answer B</label>
    </div>
</div>

リストを生成するために使用しているC#コード

解決策が何であれ、これほど迅速かつ簡単ではないことはわかっていますが、私がそれを使用しているコンテキストのアイデアを得ることができるように、ここに置いています.

RadioButtonList rbl = new RadioButtonList { RepeatLayout = RepeatLayout.Table };
foreach (ControlValue cv in MasterControl.listControlValues)
{
    rbl.Items.Add(new ListItem(cv.name, cv.value));
}
ControlContainer.Controls.Add(rbl);
4

3 に答える 3

7

WebControlAdapterを使用して、RadioButtonListレンダリング方法を変更することができます。

以下は、あなたのケースの完全なコードです。

public class RadioButtonListAdapter : WebControlAdapter
{
    protected override void RenderBeginTag(HtmlTextWriter writer)
    {
        writer.RenderBeginTag("div");
    }

    protected override void RenderEndTag(HtmlTextWriter writer)
    {
        writer.RenderEndTag();
    }

    protected override void RenderContents(HtmlTextWriter writer)
    {
        var adaptedControl = (RadioButtonList) Control;
        int itemCounter = 0;

        writer.Indent++;
        foreach (ListItem item in adaptedControl.Items)
        {
            var inputId = adaptedControl.ClientID + "_" + itemCounter++;

            // item div
            writer.RenderBeginTag("div");
            writer.Indent++;

                // input
                writer.AddAttribute("type", "radio");
                writer.AddAttribute("value", item.Value);
                writer.AddAttribute("name", adaptedControl.ClientID);
                writer.AddAttribute("id", inputId);

                if (item.Selected)
                {
                    writer.AddAttribute("checked", "checked");
                }

                writer.RenderBeginTag("input");
                writer.RenderEndTag();

                // label
                writer.AddAttribute("for", inputId);

                writer.RenderBeginTag("label");

                writer.Write(item.Value);

                writer.RenderEndTag();

            // div
            writer.Indent--;
            writer.RenderEndTag();
        }
        writer.Indent--;
    }
}

このアダプターをアプリケーションに接続するには、2 つのオプションがあります。まず、ページコンストラクターでプログラムを使用して実行します。

var adapters = Context.Request.Browser.Adapters;
var radioButtonListType = typeof(RadioButtonList).AssemblyQualifiedName;
var adapterType = typeof(RadioButtonListAdapter).AssemblyQualifiedName;
if (!adapters.Contains(radioButtonListType))
{
    adapters.Add(radioButtonListType, adapterType);
}

2番目のオプションは.browserファイルを使用しています:

プロジェクトに新規追加Browser Fileします。フォルダーに常駐しApp_Browsersます。次に、コンテンツを次の宣言に置き換えます。

<browsers>
    <browser refID="Default">
            <controlAdapters>
                <adapter controlType="System.Web.UI.WebControls.RadioButtonList" 
                         adapterType="<your namespace>.RadioButtonListAdapter" />
            </controlAdapters>
    </browser>
</browsers>

参考として、ScottGu の投稿ASP.NET 2.0 Control Adapter Architectureからのリンクを使用できます。これらは、このトピックの適切な基盤となります。

また、既定の ASP.NET コントロールのレンダリングの問題に対処するオープン ソースのCSS Friendly Control Adaptersプロジェクトもあります。

于 2013-02-26T15:34:17.397 に答える
1

.net 4.5 の場合 >

ほとんどの html、少なくとも OrderedList (または UnOrdered) を使用した構造を取得し、CSS をいじって好みのスタイルを取得できます。

<asp:RadioButtonList ID="rblTest" runat="server" TextAlign="Left" RepeatDirection="Vertical" RepeatLayout="OrderedList">
   <asp:ListItem Value="1" Text="Option 1"></asp:ListItem>
   <asp:ListItem Value="2" Text="Option 2"></asp:ListItem>
   <asp:ListItem Value="3" Text="Option 3"></asp:ListItem>
</asp:RadioButtonList>

これはhtmlをレンダリングします：

<ol id="rblTest">
    <li>
        <label for="rblTest_0">Option 1</label>
        <input id="rblTest_0" type="radio" name="rblTest" value="0">
    </li>
    <li>
        <label for="rblTest_1">Option 2</label>
        <input id="rblTest_1" type="radio" name="rblTest" value="0">
    </li>
    <li>
        <label for="rblTest_2">Option 2</label>
        <input id="rblTest_2" type="radio" name="rblTest" value="0">
    </li>
</ol>

TextAlign="Right" を設定すると、必要に応じて入力の後にラベルが表示されます。

これは、div を使用して設定に近づけることができますが、リスト全体を div で囲み、その div から li とラベル css を設定すると、設定する必要があります。

于 2016-11-30T14:51:04.620 に答える
0

構造を変えるより、CSSで回避策を探すべきだと思います。私もこの種の構造でいくつかの問題に直面していますが、私の設計チームは簡単に修正できます。

于 2013-02-17T06:08:50.103 に答える