[ASP.NET] Mostrar diferentes imágenes en un GridView dependiendo de un valor
Es una pregunta que se hace mucho en los foros de ASP.NET así que he decidido hacer un pequeño ejemplo que podéis descargar aquí
Es necesario tener en cuenta 2 cosas que se han hecho en el ejemplo:
La primera es usar un TemplateField dentro de la colección de columnas del GridView y a su vez un ItemTamplate que contendrá la imagen que vamos a manipular en el evento RowDataBound:
<asp:GridView ID="grdMotores" runat="server" AutoGenerateColumns="false"
onrowdatabound="grdMotores_RowDataBound">
<Columns>
<asp:BoundField HeaderText="Identificador" DataField="Identificador" />
<asp:TemplateField HeaderText="Temperatura">
<ItemTemplate>
<asp:Image id="imgTemperatura" imageurl="" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Y por último el evento RowDataBound del GridView:
protected void grdMotores_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
var motor = e.Row.DataItem as Motor;
if (motor != null)
{
var image = e.Row.FindControl("imgTemperatura") as Image;
if (image != null)
{
if (motor.Temperatura == 0)
image.ImageUrl = "~/images/green.png";
else if (motor.Temperatura < 90)
image.ImageUrl = "~/images/yellow.png";
else
image.ImageUrl = "~/images/red.png";
}
}
}
}
Lo primero es comprobar que la fila es una fila de datos (DataControlRowType.DataRow) y acto seguido obtenemos el DataItem de la fila que será del tipo que le asignamos en su DataSource, en este caso le pasamos un List<Motor> pues el DataItem será del tipo Motor.
Una vez que comprobamos que no es nulo, obtenemos el control Image que metimos dentro del ItemTemplate y para ello hacemos uso del método FindControl de nuestra fila de datos e.Row
Comprobamos que no sea null y ya solo falta que comprobemos en el rango que está la temperatura del motor para asignarle a la propiedad ImageUrl la ruta de la imagen que queremos mostrar.
El resultado será este:
Un saludo