基于文本值构建用户界面

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

我很难确定如何在集合中保存不同类型的对象，所以我可以按照正确的顺序读取所有的值，而不管类型如何。我将需要某种多态性来添加和读取值。任何想法推动我朝着正确的方向发展？

2011-12-12 Alec Sanger

请在下面查看我的答案。另外，Javascript和JSON很好地适应了多态，因为没有什么东西像C＃那样是硬类型的，它是所有的键/值配对字符串，而且它绝对是你应该处理UI问题的地方，而不是在服务器上。只要确保你的服务器端代码将你的C＃对象，解析为一个JSON字符串，发送给浏览器...然后它可以被解析回一个javascript对象。 –

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; 
     } 
    }

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

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

我使用了类似的方法来填充，并从该好好尝试使用通用的数据源来填充和使用我的商业逻辑层检索值一个DetailsView检索值。

来源

2011-12-12 18:05:33 gsirianni

我结束了与此类似的事情。由于我还有其他一些与UI元素相关的属性，我仍然希望将它们存储在一个类中并创建一个列表。我仍然认为有更好的方法来处理它，但是这确实让我在终点线上。谢谢！ –

我想你可能会使用WebControls列表作为TextBox和CheckBox继承自WebControl类。您可以使用此列表来填充表单，但是当您想从控件读取值时，您必须将它们转换为CheckBox或TextBox。如果你使用这种方法，你可能想要使用Linq，否则你会使用像DataTable这样的ADO对象。 – gsirianni

开始在你的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＃服务器端。

来源

2011-12-12 18:01:17

有一点需要注意......如果你想以更大规模发回事物，你可以简单地将上面的对象项例子包装在一个更大的JSON集合中，然后编写逻辑枚举集合programaticaly。 –

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

来源

2011-12-12 18:02:25

基于文本值构建用户界面

回答

相关问题