Création d'une interface utilisateur basée sur des valeurs de texte

Question

Je dois ajouter des objets d'interface utilisateur à une page en fonction des résultats de chaîne d'une requête. "textbox, textbox, checkbox, textbox", par exemple, afficherait 3 éléments de zone de texte et un élément de case à cocher sur l'écran. J'ai également besoin de lire les valeurs que chacun détient lorsque l'utilisateur clique sur un bouton.

Je n'arrive pas à déterminer comment conserver différents types d'objets dans une collection, donc je peux lire toutes les valeurs dans le bon ordre, quel que soit le type. J'aurai besoin d'une sorte de polymorphisme pour ajouter et lire les valeurs. Des idées pour me pousser dans la bonne direction?

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

Espérons que cela aide. De même, si vous souhaitez spécifier des noms pour vos cases à cocher et vos zones de texte, vous pouvez également les stocker dans votre magasin de données afin d'attribuer au moins un identifiant unique qui pourra être utilisé ultérieurement pour lire des valeurs depuis l'interface utilisateur. vous utiliserez donc la méthode FindControl() et transmettrez le nom d'ID unique. Cela ressemblerait à quelque chose comme ça.

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

J'ai utilisé une méthode similaire pour remplir et récupérer les valeurs d'un detailsview que doens't utiliser les sources de données génériques pour remplir et récupérer les valeurs en utilisant ma couche logique métier.

Answer 2

Commencez avec un formulaire vide dans votre page HTML:

<form> 
    <div id="formElementsContainer"> 

    </div> 
</form> 

Structure la chaîne retournée au client sous forme de données JSON. Quelque chose comme ça pourrait fonctionner pour un seul élément

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

- ou quelque chose comme ça pour une collection -

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

Utilisez jQuery/Javascript pour analyser le JSON en objets javascript:

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

Dites Prop1 est le nom de l'élément et prop2 est la valeur qui va dans la zone de texte. Utilisez les données de l'objet pour construire vos éléments de formulaire et les ajouter au formulaire conteneur éléments:

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

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

ceci est un exemple très simple, et bien sûr vérifiez le code, mais il vous permettra de démarrer. Lorsque vous renvoyez le formulaire au serveur, les valeurs des éléments d'entrée sont renvoyées pour que vous utilisiez C# côté serveur.

Answer 3

La méthode la plus simple consiste à associer les valeurs d'objet à un dictionnaire. Ses valeurs seront mises à jour par les gestionnaires d'événements relatifs que vous allez créer pour chaque objet.