Создать пользовательский интерфейс на основе текстовых значений

Question

Мне нужно добавить объекты пользовательского интерфейса на страницу на основе строковых результатов запроса.«textbox, textbox, checkbox, textbox», например, будет отображать 3 элемента текстового поля и элемент флажка на экране.Мне также нужно прочитать значения, которые каждое из них содержит, когда пользователь нажимает кнопку.

Мне трудно определить, как хранить различные типы объектов в коллекции, чтобы я мог прочитать все значения обратно в правильном порядке, независимо от типа.Мне понадобится какой-то полиморфизм для добавления и чтения значений.Есть идеи, чтобы подтолкнуть меня в правильном направлении?

Answer 1

 const string TEXTBOX = "textbox";
    const string CHECKBOX = "checkbox";

    //assuming your result set is placed in a data table or dictionary we can enumerate through //the result set and based on the text comparison add a check box or textbox.  

    Panel panel = new Panel();

    DataTable dataTable = getResultSet();
    foreach(DataRow row in dataTable.Rows)
    {
        string comparison = row["<columnNameContaining yuur "TextBox" or "CheckBox text>"].value;
        switch(comparison)
        {
            case TEXTBOX:
                textBox = new TextBox();
                panel.Controls.Add(textBox);
                break;
            case CHECKBOX;
                CheckBox checkBox = new checkBox();
                panel.Controls.Add(checkBox);
                break;
        }
     }

Надеюсь, это поможет. Кроме того, если вы хотите указать имена для своих флажков и текстовых полей, вы также можете сохранить их в своем хранилище данных, чтобы вы могли по крайней мере назначить уникальный идентификатор, который впоследствии можно будет использовать, когда вы хотите прочитать значения обратно из пользовательского интерфейса. поэтому вы должны использовать метод FindControl () и передать уникальное имя ID. Это будет выглядеть примерно так.

Textbox textBox = (TextBox)panel.FindControl("<unique ID");
if(textBox != null)
{
    string value = textBox.Text;
}

Я использовал аналогичный метод для заполнения и получения значений из detailsView, в котором не используются общие источники данных для заполнения и получения значений с использованием уровня моей бизнес-логики.

Answer 2

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

Answer 3

Начните с пустой формы на своей HTML-странице:

<form>
    <div id="formElementsContainer">

    </div>
</form>

Структурируйте строку, возвращаемую клиенту, как данные JSON.Примерно так может работать для одного элемента

{
    "ui-model": "textbox",
    "value": {"prop1": "value1", "prop2": "value2", /* etc */ }
}

- или что-то вроде этого для коллекции -

{
    "uimodel": "checkbox",
    "value": { "myCollection": [
        {"prop1": "value1", "prop2": "value2", /* etc */ },
        {"prop1": "value1", "prop2": "value2", /* etc */ },
        {"prop1": "value1", "prop2": "value2", /* etc */ }
    ]}
}

Используйте jQuery / Javascript для анализа JSON в объектах javascript:

var data = $.parseJSON(/* your JSON data here */)

Скажите, что Prop1 - это имя элемента, а prop2 - это значение в текстовом поле.Используйте данные объекта для создания элементов формы и добавьте их в контейнер элементов формы:

var ui = data.uimodel;  // textbox
var obj = data.value;

var textbox = '<input type="' + ui + '" id="' + obj.prop1 +'">' + obj.prop2 + '</input>';
$('#formElementsContainer').append(textbox);

Это очень простой пример, и, конечно, дважды проверьте код, но он поможет вам начать работу.затем, когда вы отправляете форму обратно на сервер, значения элемента ввода будут отправлены обратно для использования на стороне сервера C #.