c# - 在 ASP.NET 中，在 ListView 内的 div 中添加动态单选按钮列表

Question

我有一个 ListView ，其中包含行中的 div。所有 div 都有自己的控件。一个 div 包含单选按钮列表，它从代码隐藏中获取数据源。数据已填充，但单选按钮列表位于相关 div 之外。

我们将不胜感激。

<div id="riDiv" class="rightDiv" runat="server">
        <asp:ListView runat="server" ID="lvItemDetails" style="border:solid; border-color:blue; border-width:10px;">
            <LayoutTemplate>
                <div>
                    <table>
                        <tr runat="server" id="itemplaceholder" class="TopboxDiv">

                        </tr>
                        <tr runat="server" id="itemPlaceHolder2">

                        </tr>
                    </table>
                 </div>
            </LayoutTemplate>
            <ItemTemplate>
                <tr>
                    <div class="TopboxDiv"> 
                        <asp:Literal ID="litItemDesc" Text='<%# ".." + Eval("item_description") %>' runat="server" />
                    </div>
                </tr>
                <tr>
                    <div class="MidboxDivWrapper" runat="server">
                        <div class="leftTagDiv">
                            <div class="pc">Price</div>
                        </div>
                    <div id="middiv" class="MidboxDiv" runat="server">
                        <%--<div id="innerRadDiv">--%>
                        <asp:Panel runat="server" ID="pnlMidBoxDiv" BorderStyle="Solid" BorderColor="Pink" BackColor="Aqua" style="z-index:2 !important;">
                            <span>
                                <asp:RadioButtonList ID="rdCrService" runat="server" DataTextField="ServiceName" DataValueField="ServiceName" RepeatDirection="Horizontal" CssClass="radioDiv" >
                                </asp:RadioButtonList>
                            </span>
                        </asp:Panel>

                        <%--</div>--%>
                        <div class="radioDiv">
                            <asp:RadioButton id="rdPost" Text="Postoffice Price" runat="server" CssClass="radiotext" GroupName="radPriceGroup" />
                            <asp:Literal ID="litPost" Text="Rs. 100" runat="server" />
                        </div>
                        <%--<div class="radioDiv">
                            <asp:RadioButton id="rdOCS" Text="OCS Price" runat="server" CssClass="radiotext" GroupName="radPriceGroup"/>
                            <asp:Literal ID="litOCS" Text="Rs. 110" runat="server" />
                        </div>
                        <div class="radioDiv">
                            <asp:RadioButton id="rdTCS" Text="TCS Price" runat="server" CssClass="radiotext" GroupName="radPriceGroup"/>
                            <asp:Literal ID="litTCS" Text="Rs. 120" runat="server" />
                        </div>
                        <div class="radioDiv">
                            <asp:RadioButton id="rdOther" Text="Other Price" runat="server" CssClass="radiotext" GroupName="radPriceGroup"/>
                            <asp:Literal ID="litOther" Text="Rs. 120" runat="server" />
                        </div>--%>
                    </div>
                        </div>
                    </tr>
                <tr>
                    <div class="bottomDivItemWrapper">
                        <div class="leftTagDiv">
                            <div class="pc">Color</div>
                        </div>
                    <div class="bottomDivItem">
                        <div class="radioDiv">
                            <%--<asp:RadioButton ID="Rad1" Text='<%# Eval("ServiceName") %>' runat="server" GroupName="testGrp" CssClass="radiotext"/>--%>
                            <asp:RadioButton id="rdWhite" Text="white" runat="server" CssClass="radiotext" />
                        </div>
                    </div>
                        </div>
                    <div class="OrderDivWrapper">
                        add cart and wishlist buttons. write cart and wishlist code functions so it can be called again and again.
                    </div>                        
                </tr>
            </ItemTemplate>
        </asp:ListView>
    </div>

Answer 1

这是一个非常人为的示例，但也可以对单选按钮列表进行数据绑定(bind)。下面是一个例子；诚然，这有点做作，但它确实有效。

首先，代码隐藏(包括我如何构建列表)。 getRandomString 和 getRandomListOfStrings 的细节并不是那么重要 - 基本上，我只是生成随机数据来填充前端。显然，您需要将其替换为您的实际数据源。

private class Temp
    {
        public string MainName { get; set; }

        // This is probably the key point here - I create a property to
        // hold data to bind my radio buttons to
        public List<string> RadioButtonOptions { get; set; }
    }

    private string getRandomString(Random r)
    {
        var sb = new StringBuilder();

        int length = r.Next(3, 10);

        for (int i = 0; i < length; i++)
        {
            int chr = r.Next(0, 60);
            char result = (char)(33 + chr);

            sb.Append(result);
        }

        return sb.ToString();
    }

    private List<string> getRandomListOfStrings(Random r)
    {
        int listLength = r.Next(3, 6);

        var list = new List<string>();

        for (int i = 0; i < listLength; i++)
        {
            list.Add(getRandomString(r));
        }

        return list;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        Random r = new Random();

        var list = new List<Temp>
        {
            new Temp
            {
                MainName = getRandomString(r),
                RadioButtonOptions = getRandomListOfStrings(r)
            },
            new Temp
            {
                MainName = getRandomString(r),
                RadioButtonOptions = getRandomListOfStrings(r)
            },
            new Temp
            {
                MainName = getRandomString(r),
                RadioButtonOptions = getRandomListOfStrings(r)
            },
            new Temp
            {
                MainName = getRandomString(r),
                RadioButtonOptions = getRandomListOfStrings(r)
            },
            new Temp
            {
                MainName = getRandomString(r),
                RadioButtonOptions = getRandomListOfStrings(r)
            },
            new Temp
            {
                MainName = getRandomString(r),
                RadioButtonOptions = getRandomListOfStrings(r)
            },
            new Temp
            {
                MainName = getRandomString(r),
                RadioButtonOptions = getRandomListOfStrings(r)
            }
        };

        mainListView.DataSource = list;
        mainListView.DataBind();

以及前端代码:

<asp:ListView ID="mainListView" runat="server">
    <ItemTemplate>
        <asp:Label runat="server" Text='<%# Eval("MainName") %>' /><br />
        <asp:RadioButtonList runat="server" DataSource='<%# Eval("RadioButtonOptions") %>'/><br />
        <hr />
    </ItemTemplate>
</asp:ListView>

单选按钮的 HTML 如下所示:

<tr>
    <td><input id="mainListView_ctl01_1_0_1" type="radio" name="mainListView$ctrl1$ctl01" value="6U(" /><label for="mainListView_ctl01_1_0_1">6U(</label></td>
</tr>

前端看起来像这样: