根据文本值构建用户界面

时间:2011-12-12 17:48:14

标签: c# asp.net user-interface types polymorphism

我需要根据查询的字符串结果将UI对象添加到页面。例如,“文本框,文本框,复选框,文本框”将在屏幕上显示3个文本框项目和一个复选框项目。我还需要读取用户单击按钮时各自保存的值。

我很难确定如何在集合中保存不同类型的对象,因此无论类型如何,我都可以按正确的顺序读回所有值。我需要某种多态性来添加和读取值。有什么想法让我朝着正确的方向前进?

3 个答案:

答案 0 :(得分: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;
        }
     }

希望这会有所帮助。此外,如果您要为复选框和文本框指定名称,您可能还希望将这些名称存储在数据存储中,这样您至少可以分配一个唯一的ID,以后可以在从UI读取值时使用该ID。所以你将使用FindControl()方法并传入唯一的ID名称。它看起来像这样。

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

我使用了一种类似的方法来填充和检索来自detailsView的值,这些值不使用通用数据源来使用我的业务逻辑层填充和检索值。

答案 1 :(得分:0)

从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#服务器端。

答案 2 :(得分:0)

最简单的方法是将对象值与字典相关联。它的值将由您将为每个对象创建的相对事件处理程序更新。