[ASPX] Mostrar Imagen en Base de Datos en una etiqueta

Es muy común que en alguna aplicación además de información de tipo texto o numérico (entre otras), sea también necesario almacenar imágenes correspondientes a la información que se requiere representar.

Supongamos una aplicación en la cual se desean mostrar los eventos que se realizaran en cierta institución ordenada en cierta manera pero que además de la información propia del evento, se quiera mostrar un carrusel con JQuery en el cual se muestren los banners correspondientes a cada evento.

Para esto se deberá almacenar dicho banner en Base de Datos junto con la información textual del evento. He aquí la pregunta. Si mi imagen esta almacenada en base de datos, ¿Cómo puedo mostrar esta imagen en una etiqueta IMG? A continuación se muestra una opción para hacerlo.

Paso 1: Crear un WebForm llamado Imagen.aspx

Este formulario funcionara como url local para acceder a la imagen.

Paso 2: Obtener la imagen.

En este paso se consulta la base de datos para obtener la imagen en el evento Page_Load de la página Imagen.aspx, esto se hace de la misma forma que con cualquier dato.

//Recuperar el identificador
string id = Request.QueryString["id"];
//Crear conexion
using (SqlConnection con = new SqlConnection())
{
   //Obtener ConnectionSctring de web.config
   System.Configuration.Configuration rootWebConfig = System.Web.Configuration.WebConfigurationManager.OpenWebConfiguration("~");
   System.Configuration.ConnectionStringSettings connString;
   if (0 < rootWebConfig.ConnectionStrings.ConnectionStrings.Count)
   {
     connString=rootWebConfig.ConnectionStrings.ConnectionStrings["MiCadena"];
     if (null != connString)
     {
       con.ConnectionString = connString.ToString();
       con.Open();
       using (SqlCommand com = con.CreateCommand())
       {
          //tipo de comado StoreProcedure o consulta
          com.CommandType = CommandType.Text;
         //nombre del StoreProcedure o consulta
          com.CommandText = "SELECT Banner FROM Eventos WHERE IdEvento=" + id;
         try
         {
            //Ejecutar comando
            byte[] img = (byte[])com.ExecuteScalar();
         }catch(SqlException se){}
      }
      //Cerrar conexion
      con.Close();
   }
 }
}

Paso 3: Una vez obtenida la información de la imagen. Solo nos resta responder esta imagen como contenido de tipo “image/jpeg” ya que JPG es el formato en que se almaceno la imagen en la Base de Datos. Ver Tipos Mime


MemoryStream str = new MemoryStream();
str.Write(img, 0, img.Length);
Bitmap bit = new Bitmap(str);
Response.ContentType = "image/jpeg";//Responder Img JPG
bit.Save(Response.OutputStream, ImageFormat.Jpeg);

Paso 4: En el codigo HTML, mostrar la imagen de la siguiente manera:

<img alt="imagen1" src="Imagen.aspx?id=1" />

Con esto nos queda una URL local con la cual accedemos a la imagen que necesitamos.

Gracias

Mostrar PDF en IFRAME dentro de Master Page

En algunas ocasiones es necesario mostrar archivos PDF en un sitio Web, por ejemplo, en un Sistema que genera Ordenes de Pago, pues es lógico pensar que las ordenes generadas sean mostradas en un Web Form, para su impresión o almacenamiento por parte del cliente.

He aquí una forma de mostrar un archivo PDF creado en Directorios de la aplicación (Servidor) en un Web Form, hijo de una Master Page.

ASPX


<iframe id="pdf" runat="server" height="800" width="600"><iframe>

Como puedes darte cuenta, coloco la etiqueta runat=”server”, esto hace visible este control del lado del servidor.

C#

//Nuevo control HTML y Buscamos dentro del ContentPlaceHolder del sitio llamado "contenido"
HtmlControl frame1 = (HtmlControl) Page.Master.FindControl("Contenido").FindControl("pdf");
//Asignamos a la propiedad "src" la ruta donde se genero el archivo
frame1.Attributes["src"] = "../../Documentos/" + Session["usuario"] + ".pdf";

Con esto se le indica al contro iframe (de lado del cliente), la ruta del archivo PDF (del lado del servidor). Esto bastará para mostrarse correctamente.

Saludos.
Gracias.

ASPX + TinyMCE

En algunas ocasiones es necesario crear aplicaciones web, cuyos formularios soliciten información a los usuarios (Eje: El registro a un diplomado virtual), en donde estos puedan agregar enlaces a alguna pagina, crear tablas para organizar contenidos, enumerar en lista algunas características o elementos, resaltar texto o hacerlo mas grande.

Claro!!!.. Las respuesta es un TextBox que tenga la propiedad de poder editar contenido como HTML. Ya que nativamente el control ASP TextBox no cuenta con esta propiedad, es necesario utilizar otras tecnologías como Ajax o en este caso JQuery.

Lo primero que necesitamos es descargar el plugin TinyMCE, un editor de contenido HTML muy popular, que además de todo cuenta con plugins para WordPress, Joomla, etc.

http://www.tinymce.com/tryit/basic.php

Agregamos el directorio tiny_mce a nuestro proyecto, que entre otras cosas continene:

Los archivos .js, los temas, lenguajes, etc.

Luego de esto, ubicamos el asrchivo donde irá el control HTML, y configuramos el plugin:

<script src="tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions
,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste
,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,
template,wordcount,advlist,autosave",


// Theme options
theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft
,justifycenter,justifyright,justifyfull,fontselect,fontsizeselect,
|,tablecontrols",
theme_advanced_buttons2: "bullist,numlist,link,unlink,image,code",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,
sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons3: "",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|
,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,
template,pagebreak,restoredraft",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,

// Example content CSS (should be your site CSS)
// using false to ensure that the default browser settings are used for
best Accessibility
// ACCESSIBILITY SETTINGS
content_css: false,
// Use browser preferred colors for dialogs.
browser_preferred_colors: true,
detect_highcontrast: true,

// Drop lists for link/image/media/template dialogs
template_external_list_url: “lists/template_list.js”,
external_link_list_url: “lists/link_list.js”,
external_image_list_url: “lists/image_list.js”,
media_external_list_url: “lists/media_list.js”,
// Style formats
style_formats: [
{ title: ‘Bold text’, inline: ‘b’ },
{ title: ‘Red text’, inline: ‘span’, styles: { color: ‘#ff0000’} },
{ title: ‘Red header’, block: ‘h1’, styles: { color: ‘#ff0000’} },
{ title: ‘Example 1’, inline: ‘span’, classes: ‘example1’ },
{ title: ‘Example 2’, inline: ‘span’, classes: ‘example2’ },
{ title: ‘Table styles’ },
{ title: ‘Table row 1’, selector: ‘tr’, classes: ‘tablerow1’ }
],

// Replace values for the template plugin
template_replace_values: {
username: “Some User”,
staffid: “991234”
}
});
</script>

Y finalmente el control que por default debe ser un textarea. Agregamos el
runat=”server” para verlo del lado del servidor y listo.

<body>
<form id="form1" runat="server">
<div>
<textarea runat="server" style="background-color:#000;
width: 300px" id="Texto" name="elm1" rows="15" cols="80"
></textarea>
</div>
</form>
</body>

Error “A potentially dangerous Request.Form value was detected”

Solucion 1:
Uso de las clases HTMLEncode y HTMLDecode.

http://blog.tentaclesoftware.com/archive/2012/05/21/asp-net-4-0-tinymce-and-
ldquoa-potentially-dangerous-request.aspx

Solucion 2:
Deshabilitar la RequestValidation.

Default.ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="TinyMCE.Default" ValidateRequest="false">

Web.Config

<location path="Default.aspx">
<system.web>
<httpRuntime requestValidationMode="2.0" />
</system.web>
</location>

Gracias.