Преобразование HTML-кнопок на стороне клиента в веб-элементы управления asp.net с помощью динамических идентификаторов.(ASP.net) (VB) - PullRequest
Новая
       17

Преобразование HTML-кнопок на стороне клиента в веб-элементы управления asp.net с помощью динамических идентификаторов.(ASP.net) (VB)

0 голосов
/ 12 января 2011

У меня есть следующий код на стороне клиента на странице .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

Идентификаторы переключателей являются динамическими («Q» и QuestionID). Если ответа на вопрос нет, функция GetVisible возвращает значение false, а содержащая панель скрыта.

Я пытался избавиться от html и заменить их на asp: radiobuttons, но невозможно установить идентификаторы из привязки данных ... просто. Я пытался что-то вроде: 

<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 из codebehind или добавлять события!

Пожалуйста, может эксперт предложит лучший способ заменить html подходящими веб-элементами управления asp.net или из кода и вывести его. Или укажете мне правильное направление?

Спасибо: 0)

Ответы [ 2 ]

1 голос
/ 12 января 2011

Я сейчас работаю над чем-то похожим. Я использую 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, затем захватывает данные на стороне сервера и десериализует в объекты, которые может использовать ваш код. Затем возьмите данные и делайте все, что вам нужно.

1 голос
/ 12 января 2011

У меня был некоторый опыт работы с элементами управления ASP и привязки данных. Проблема, с которой вы сталкиваетесь, заключается в , вероятно , в том факте, что после объявления элемента управления с помощью разметки вы не сможете получить к нему доступ из привязки данных. Также не следует путать идентификатор на стороне сервера с идентификатором на стороне клиента.

Идентификатор на стороне сервера, сопоставленный со свойством Id элементов управления, используется для программного доступа к элементу управления из кода позади. Идентификатор на стороне клиента - это идентификатор, который будет помещен в атрибут id тега и сопоставлен со свойством ClientId.

Судя по вашему вопросу, вам нужно построить опрос с несколькими вариантами ответов, и, на мой взгляд, не важно, как генерируются идентификаторы, просто чтобы они правильно группировались для каждого вопроса.

Я отвечу на часть программного доступа к элементам управления в привязке данных, которая является частью вашего вопроса.

Вот пример из моего кода. Предположим, у вас есть очень простой 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. Когда строка связана, у вас есть прямой доступ к строке, а затем вы можете использовать метод FindControl Control class

Вот пример кода 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. Когда вы обработаете это событие, свяжите внутренний список радиобутонетов с ответами.

Это должно работать для вас

...