将客户端 html 单选按钮转换为具有动态 id 的 asp.net Web 控件。 (ASP.net)(VB)

Question

我在数据列表项模板中的 .aspx 页面中有以下客户端代码，该模板从数据库中获取问题，如下所示：

<Itemtemplate>
<b> <%=GetQuestionNum()%>)
           <%#Server.HtmlEncode(Eval("Text").ToString())%></b> 
            <br />
            <asp:Panel ID="A" runat="server" Visible='<%#GetVisible(Eval("OptionA").Tostring())%>'>
                <input name="Q<%#Eval("ID")%>" type="radio" value="A">
                <%#Server.HtmlEncode(Eval("OptionA").ToString())%>
                </option><br />
            </asp:Panel>
            <asp:Panel ID="B" runat="server" Visible='<%#GetVisible(Eval("OptionB").Tostring())%>'>
                <input name="Q<%#Eval("ID")%>" type="radio" value="B">
                <%#Server.HtmlEncode(Eval("OptionB").ToString())%>
                </option><br />
            </asp:Panel>
            <asp:Panel ID="C" runat="server" Visible='<%#GetVisible(Eval("OptionC").Tostring())%>'>
                <input name="Q<%#Eval("ID")%>" type="radio" value="C">
                <%#Server.HtmlEncode(Eval("OptionC").ToString())%>
                </option><br />
            </asp:Panel>
            <asp:Panel ID="D" runat="server" Visible='<%#GetVisible(Eval("OptionD").Tostring())%>'>
                <input name="Q<%#Eval("ID")%>" type="radio" value="D">
                <%#Server.HtmlEncode(Eval("OptionD").ToString())%>
                </option><br />
            </asp:Panel></itemtemplate>

输出如下：

1) 您的年龄组是多少？
- 选项 1
- 选项 2
- 选项 3
- 选项 4

单选按钮的 ID 是动态的（“Q”和 QuestionID）。如果问题没有答案，则 GetVisible 函数返回 false 并且包含面板被隐藏。

我一直在尝试摆脱 html 并用 asp:radiobuttons 替换它们，但不可能从数据绑定中设置 id.. 只是简单地。我正在尝试类似：

<asp:RadioButton ID="Q<%#Eval("ID")%>" runat="server" Visible='<%#GetVisible(Eval("OptionA").Tostring())%>'
                Text='<%#Server.HtmlEncode(Eval("OptionA").ToString())%>' />

这里是提供数据的函数：

Public Shared Function GetQuestionsForSurvey(ByVal id As Integer) As DataSet
    Dim dsQuestions As DataSet = New DataSet()
    Try
        Using mConnection As New SqlConnection(Config.ConnectionString)
            Dim mCommand As SqlCommand = New SqlCommand("sprocQuestionSelectList", mConnection)
            mCommand.CommandType = CommandType.StoredProcedure
            Dim myDataAdapter As SqlDataAdapter = New SqlDataAdapter()
            myDataAdapter.SelectCommand = mCommand
            mCommand.CommandType = CommandType.StoredProcedure
            mCommand.Parameters.AddWithValue("@id", id)
            myDataAdapter.Fill(dsQuestions)
            mConnection.Close()
            Return dsQuestions
        End Using
    Catch ex As Exception
        Throw
    End Try
End Function

但我发现无法使用 html 控件，即从代码隐藏中获取它们的 .text 值，或添加事件！

请专家建议一种更好的方法，用合适的 asp.net Web 控件或从代码隐藏替换 html 并输出它。或者指出我正确的方向？

谢谢 :0)

Answer 1

我对 ASP 控件和数据绑定有一些经验。您面临的问题是可能这样一个事实，即一旦您通过标记声明控件，您就无法从数据绑定中访问它。此外，您不应将服务器端 ID 与客户端 ID 混淆。

映射到控件的Id 属性的服务器端ID 用于以编程方式从后面的代码访问控件。客户端 ID 是将放置在标记的 id 属性中并映射到 ClientId 属性的 ID。

从您的问题来看，您需要的是建立一个多项选择调查，并且在我看来，如何生成 ID 并不重要，只需为每个问题正确分组即可。

我将回答以编程方式访问数据绑定中的控件的部分，这是您问题的一部分。

这是我的代码中的一个示例。假设你有一个像这样的非常简单的 GridView

<asp:GridView ID="example" runat="server" OnRowDataBound="DataBound">
    <Columns>
        <asp:TemplateField HeaderText="New">
            <ItemTemplate>
                <asp:Image ID="imgExample" runat="server" />
            </ItemTemplate>
    </Columns>
</asp:GridView>

在数据绑定过程中获取一个数据集，并根据某个属性设置图像。它和DataList一样，不用担心。

现在，在后面的代码中，您处理 RowDataBoundEvent。您不能直接访问 imgExample 对象，因为它是 ItemTemplate 的子对象。绑定行后，可以直接访问行，然后可以使用Control类的FindControl方法

这是 C# 代码示例（易于转换为 VB）

protected void DataBound(object sender, GridViewRowEventArgs e)
{
        if (e.Row.RowType == DataControlRowType.DataRow) //Required
        {
            GridViewRow row = e.Row;

            [...] //get an email message

            (row.Cells[0].FindControl("imgExample") as Image).ImageUrl = (email.AlreadyRead)
                                                                            ? "Mail_Small.png"
                                                                            : "Mail_New_Small.png";
        }
}

适用于您的案例

为了构建多项选择调查，我的建议是创建一个包含问题的 DataList（外部控件），然后为每一行声明一个包含答案的 RadioButtonList（内部控件）。将外部数据列表绑定到问题和答案的数据集。处理 RowDataBound 事件或在 DataList 世界中调用的任何事件。当您处理该事件时，将内部单选按钮列表绑定到答案。

它应该适合你

Answer 2

我现在实际上正在做类似的事情。我正在使用 javascript 和 jQuery 向我的页面动态添加控件。将它们添加到我的页面后，我必须获取新控件、它们的文本等。我​​一直这样做的方式是这样的：

<table id='BuilderTable' class="BuilderTable">
    <tbody class='BuilderBody'>
    </tbody>
</table>
<asp:Button runat="server" ID="saveButton" OnClick="SaveButton_Click" OnClientClick="SaveData()"
    Text="Save Form" />
<asp:HiddenField runat="server" ID="controlsData" />

这个表是我放置所有新控件的地方。

然后当客户端点击保存按钮时它首先调用这个javascript/jQuery函数：

function SaveData() {
        var controlRows = $('#BuilderTable tr.control');
        var controls= [];
        controlRows.each(function (index) {
            //process control information here ...
            controlText = //use jQuery to get text, etc...
            var control = {
                Index: (index + 1),
                Text: controlText
            };
            controls.push(control);
        });
        var str = JSON.stringify(questions);
        $('#<%= controlsData.ClientID %>').val(str);
    }

然后调用按钮点击的服务端函数（这个在C#中，适配VB）。

protected void SaveButton_Click(object sender, EventArgs e)
{
        JavaScriptSerializer jss = new JavaScriptSerializer();
        string str = controlsData.Value;
        List<Control> controls = jss.Deserialize<List<Control>>(str);
}

使用这样的 Control 类：

public class Control
{
        public int Index { get; set; }
        public string Text { get; set; }
}

此代码使用 javascript 和 jQuery 获取您的控件，使用 JSON 序列化数据并将其保存在 asp 隐藏字段中，然后在服务器端获取数据并反序列化为您的代码可以使用的对象。然后获取数据并做任何你需要做的事情。