er2021 Curso de Ct - Data binding Curso de C# Data binding Introduccién Listas de opciones Conjuntos de datos Introducci6n Se pueden asociar datos a las propiedades de los controles de la interfaz grafica mediante tres mecanismos diferentes + Podemos especificar los datos que deseemos en las etiquetas asociadas a los controles (), aunque sélo de forma estética, no dindmica. + Podemos implementar fragmentos de cédigo que hagan uso del modelo orientado a objetos asociado a los controles de nuestros formularios, Esta es la opcién habitual que se emplea para rellenar valores 0 listas sencillas (por ejemplo, en el evento Form_Load del formulario web). + En situaciones mas complejas que requieran algo més ‘ofisticado podemos utilizar un mecanismo denominado ‘data binding”. En primer lugar, debemos disponer de un objeto que contenga los datos (DataSet, Array...). A continuacién, asociamos ese objeto al control. + De esta forma, separamos claramente el cédigo de nuestra aplicacién de la interfaz de usuario. + Podemos enlazar el control a una amplia variedad de fuentes de datos: colecciones (Array, Hashtable, etc,), conjuntos de datos (DataSet, DataTable, DataView, DataReader), ficheros XML, propiedades, expresiones, llamadas a métodos... + Hemos de tener en cuenta que deberemos introducir cédigo para actualizar en enlace (esto es, el mecanismo por defecto rellena una Unica vez las propiedades que hayamos enlazado [one way snapshot model") + En las paginas ASP.NET podemos _incluir expresiones de enlace a datos de la forma <%it expresion %> (de forma andloga a las ‘etiquetas personalizadas de JSP en Java). tas de opciones Se puede utilizar "data binding" para rellenar listas con elementos que provengan de alguna fuente de datos, ya sea ésta una base de datos, un fichero XML 0 un script. Los siguientes controles permiten utilizar listas en un formulario web ASP.NET: asp:RadioButtonList, lvex.ugresidecsailesharpiwebibinding xm ¥Cursa da Ci - Data binding asp:CheckBoxList, asp:DropDownList y asp:Listbox. Los elementos de dichas listas se suelen definir utilizando uno o varios componentes asp:ListItem, como en el siguiente ejemplo: provincia" runat="server"> :ListItem value: Listrtem value :ListItem value: :ListItem value= :ListItem value: ListItem value :ListItem value: ListItem value Sin embargo, resulta més adecuado utilizar una fuente de datos independiente para rellenar la lista, De esta forma, los datos se separan del HTML y cualquier cambio que se produzca en ellos sera mas facil de hacer (al no tener que modificar los elementos de la lista en todos los sitios de la interfaz donde aparezcan, sino sdlo en la fuente de datos, que deberia ser Unica). ArrayList La coleccién ArrayList contiene una lista de objetos y podemos utilizarla para rellenar los elementos de una lista en nuestra interfaz. Al cargar la pagina, creamos la lista y afiadimos los elementos que nos hagan falta utilizando el método Add(). Una vez que tenemos los elementos en la lista, podemos ordenarlos con el método Sort(). Si los quisiéramos en orden inverso, no tendriamos més que llamar al método Reverse una vez que los tengamos ordenados. Finalmente, una vez que tenemos la lista con los elementos ordenados, sélo tenemos que enlazar la lista al ArrayList utilizando la propiedad DataSource del control y llamar al método DataBind() del control para rellenar nuestra lista: private void Page_Load(object sender, System.EventArgs e) t if !Page. IsPostBack) { ArrayList list = new ArrayList(); List .Add(" list.add(" List.add(" List .Add(" List.Add(" List .add(” list.add(" List Add("Huelva"); List. Sort(); provincia.DataSource provincia. DataBind(); lists lvex.ugresidecsailesharpiwebibinding xm 28er2021 Cursa da Ci - Data binding A List - Microsoft Internet Explorer Archive Edcién Ver Favoritos Herramientas Ayuda Ore: O- A OD| omen thecién| Rip ocahorist Arevistones BS] BEY ce O Almeria O Cadiz OCérdoba @ Granada OFuelva OJaén OMataga Givewtoal En este caso, los elementos del array se utilizan como texto (Text) y como valor (Value) asociado a los distintos elementos de [a lista en nuestra interfaz, si bien esto no tiene por qué ser asi siempre. Para emplear valores internos diferentes a las etiquetas que visualiza el usuario, podemos emplear colecciones de tipo Hashtable o SortedList. Hashtable Las tablas hash (Hashtable) contienen pares clave-valor y podemos utilizarlas si queremos emplear los cédigos correspondientes a las provincias en vez de sus nombres completos, para lo cual hemos de indicar qué vamos a emplear como etiqueta (DataTextField) y qué como valor (DataValueField) private void Page_Load(object sender, System.EventArgs e) t + d lvex.ugres/decsailesharpiwebibinding xm f (1Page. IsPostBack) { Hashtable table = new Hashtable(); table.add("GR", “Granad: table.Add("AL", “Almeri: table.Add("MA", "Mélaga” table-Add("J",’ “Jaén") table.Add("Co", “Cérdob table.Add("SE", "Sevill. table.Add("CA", “Cadiz")5 table.Add("HU", "Huelva"); provincia.DataSource = table; provincia. DataValueField="key” provincia.DataTextField="Value"; provincia. DataBind(); a8er2021 Cursa da Ci - Data binding EI Unico inconveniente de las tablas hash es que no se puede elegir el orden de los elementos de [a lista. Para poder ordenar los elementos deberemos emplear la coleccién SortedList, que se puede utilizar exactamente igual que la tabla hash y se mantiene ordenada automaticamente. Ejercicio Utilizar una lista ordenada en vez de la tabla hash del ejemplo anterior. Ficheros XML Incluso podemos rellenar las listas de nuestra interfaz utilizando un fichero XML auxiliar como el siguiente: AL Almeria CAc/id> Cadiz CO cérdobac/nonbre> GR Granada HU Huelva 3 Jaén MAC/id> Ma1aga SE Sevilla Para hacer el enlace, construimos un DataSet a partir del fichero XML y enlazamos dicho DataSet al control: private void Page_Load(object sender, System.EventArgs e: { if (1Page.IsPostBack) { lvex.ugresidecsailesharpiwebibinding xm aier2021 Cursa da Ci - Data binding DataSet dataset = new DataSet(); dataset. Readxml (MapPath("provincias.xml")); sets id nombre” provincia.DataSource = da provincia. DataValucFiel provincia. bataTextFiel provincia.DataBind(); PD: Por cierto, la propiedad SelectedItem de la lista es la que nos indica la opcién seleccionada por el usuario, mientras que el evento SelectedItemChanged se produce cuando el usuario selecciona una de las opciones de la lista. "Acédigo fuente de los ejemplos de esta seccién Conjuntos de datos El control asi fepeater sirve para mostrar conjuntos de dato: proen ele} a a Ow- oO HAG SBS recs > Codigo Nombre | AL Almeria | CA Cadiz | CO Cétdoba | CJinranetioca En primer lugar, afiadimos un control asp:Repeater al formulario web. A continuacién, podemos utilizar un conjunto de datos construido a partir del fichero XML que usamos en el tltimo ejemplo de la seccién anterior, Dicho conjunto de datos hemos de enlazarlo al control asp: Repeater: protected System.Web.UI.WebControls.Repeater provincia; private void Page_Load(object sender, System.EventArgs e) slvex.ugres/decsailosharpiwebibinding xml 58er2021 Cursa da Ci - Data binding if (Page. IsPostBack) { DataSet dataset = new DataSet(); dataset. Readxml (MapPath("provincias.xml")); provincia.DataSource = dataset; provincia.DataBind(); Finalmente, hemos de especificar cémo se visualizaré cada dato de los que hemos enlazado al control asp:Repeater, para lo cual no nos queda més remedio que editar el cédigo HTML de la pagina ASP.NET. Mediante el uso de plantillas definimos el aspecto visual de nuestro conjunto de datos: provincia” runat="server"> cellpadding="5'

Cédigo	Nombre
<%# DataBinder.Eval(Container.Dataltem, “id") %>	<%# DataBinder.Eval(Container.DataItem, "nonbre") %>

La plantilla se muestra al comienzo de la salida asociada al control asp:Repeater. Para cada "registro" de nuestro conjunto de datos se utiliza la plantilla . Esta plantilla la rellenamos con las etiquetas HTML que deseemos acompafiadas de expresiones del tipo <%# DataBinder.Eval(Container.DataItem, “campo") %> para visualizar los valores de los datos de nuestro conjunto de datos. Por ultimo, la plantilla cierra la salida asociada al control asp: Repeater Opcionaimente, se puede utilizar una _plantilla, para que las filas pares e impares se visualicen de forma distinta (p.ej. utilizando colores alternos). ‘Ademas, el control asp:Repeater incluye la posibilidad de utilizar una plantilla adicional () para lvex.ugresidecsailesharpiwebibinding xm es‘182021 Cursa da Ci - Data binding describir lo que queremos que aparezca entre registro y registro, Ejercicio Modificar el ejemplo anterior de forma que la tabla se muestre empleando colores alternos con ayuda de una plantilla de tipo . Esc eee eee Archive Edin Ver Favoritos Heerat Om Oo HAG ir yneulos Codigo Nombre AL Alera | CA Caden “codigo fuente de los ejemplos de esta seccién En ASP.NET —existen _otros_—scontroles. ~—aparte.— de. system.Web.UI.WebControls.Repeater que se pueden emplear pare visualizar e incluso modificar conjuntos de datos. En concreto, los controles ‘System.Web .UI.WebControls.DataList y system.Web.UI.WebControls.DataGrid (o asp:GridView) pueden ser de gran utilidad en el desarrollo de aplicaciones web. El control asp:DataList es similar a asp:Repeater, si bien incluye por defecto una tabla alrededor de los datos y resulta més adecuado para su disefio desde el Visual Studio .NET, desde el que se pueden especificar sus distintas plantillas y definir su amplia gama de propiedades de forma visual (p.ej. estilos CSS). A las plantillas de asp:Repeater hay que afiadir otras que permiten, por ejemplo, resaltar un elemento seleccionado dentro del conjunto de datos o editar su valor. Finalmente, los controles asp:DataGrid y asp:GridView son atin mas versatiles a la hora de manipular conjuntos de datos (y mas complejos a la hora de disefiar la aplicacién, si bien es cierto el entorno nos ayuda mucho al poder disefiar el contenido de la tabla de forma "visual". elvex ugr esidecsalcsharpiwebybinding xml 718‘sr2021 Curso de GH - Data binding Ejercicio Construir una tabla como la del ejemplo anterior —_utilizando_—el_— control asp:DataGrid 0 asp:Gridview. -Giformularios web Sesiones de usuario} fee © Fernando Berzal Galiano elvexuge ISecsailosharpiwebibinding xm a8