Customizar Rows en un ASP Gridview

La manera más fácil de utilizar un ASP Gridview es que a partir de un origen de datos seleccionado Visual Studio, cree automáticamente las columnas y el tipo de control en el cual se representaran los datos, generalmente de tipo ASP BoundField.

Pero cada caso es muy diferente a los demás, en ocasiones esto no es muy conveniente debido a la extensa longitud de algunos datos.

Desarrollando un acortador de URL’s me encontré con un dato que quería mostrar en una columna de un ASP Gridview que era demasiado extenso (Url Larga), y al darle un ancho fijo a la columna lo único que hacia era distribuir el contenido en varias líneas. Eso si la cadena tenía espacios, si no, no respetaba el ancho de la columna.

Entonces, como no era necesario mostrar la cadena completa (Url Larga), decidí, hacer lo siguiente.

Dentro de la etiqueta <Columns> del Gridview
1.- Cambiar el tipo ASP BoundField por el tipo ASP ItemTemplate
2.- Dentro de <ItemTemplate>, Colocar un
<div> con el ancho requerido, y el estilo overflow:hidden.
3.- Dentro del div evaluar la expresión del origen de datos <%# Eval(“Url Larga”)%>

De esta manera, dentro del div se mostrara el contenido de la expresión, el ancho no cambiara a pesar de la longitud del contenido, y con el estilo nos aseguramos que el texto que se salga del div no aparezca, quedando algo asi:

De igual manera para la columna Url Corta, modifique el BoundField por ItemTemplate para poder mostrar este campo como un enlace <a>

Gracias

Bindear un ASP Label desde un SqlDataSource

Por default, el control ASP Label no es bindeable a un origen de datos, dado que no posee la propiedad DataSource.

Pero si por alguna razon se necesita mostrar informacion desde un origen en tiempo de ejecucion, esta es una buena solucion:

“Envolver” el control Label dentro de algun otro que sea bindeable, por ejemplo un Formview

<asp:FormView ID=”Saldo” runat=”server” DataSourceID=”SqlDataSourceSaldo”>
     <ItemTemplate>
              <asp:Label CssClass=”formulario negritas” ID=”SaldoActualLabel” runat=”server” Text='<%# Eval(“Monto_Ejercido”)%>’ />
    </ItemTemplate>
<asp:FormView>

Y si se requiere algun formato en particular:
     Text='<%# Eval(“Monto_Ejercido”,”{0:c}”) %>’

Gracias

Ajax Popup “Procesando”

Una forma de “controlar” la paciencia de los usuarios al estarse ejecutando procesos dentro del servidor, es la de mostrar un popup de progreso, deshabilitando la interaccion de cualquier control de la aplicacion.

Comenzamos con el codigo JavaScript que mostrara el Popup

<script type=”text/javascript”>
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args)
{
      // muestra el popup
      $find(ModalProgress).show();
}
function endReq(sender, args)
{
      // esconde el popup
      $find(ModalProgress).hide();
}

var ModalProgress = ‘<%=ModalProgress.ClientID%>’;
</script>

El evento beginRequest se provoca antes de que se inicie el procesamiento de una devolución de datos asincrónica y se envíe la devolución (postback) al servidor.
El evento endRequest se provoca después de que finalice una devolución de datos asincrónica y se haya devuelto el control al explorador.
Si se observa en las funciones de JavaScript se hace Referencia a la variable ModalProgress la cual debe ser creada desde el code-behind para que luego pueda ser utilizada por javascript.

Luego de esto crearemos el control popup.

<asp:Panel runat=”server” CssClass=”modalPopup” ID=”panelUpdateProgress”>
<asp:UpdateProgress ID=”UpdatePrg” DisplayAfter=”0″ runat=”server”>
<ProgressTemplate>
<div style=”position:relative; top:50%; text-align:center; height:100px;”>
<img src=”../../../images/loading.gif” style=”vertical-align:middle” alt=”Procesando…” width=”90px” />
Procesando ….
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<asp:ModalPopupExtender runat=”server” ID=”ModalProgress” TargetControlID=”panelUpdateProgress” PopupControlID=”panelUpdateProgress”
BackgroundCssClass=”modalBackground”>
</asp:ModalPopupExtender>

Y por ultimo, el control que iniciara el proceso.

<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>
<asp:Button ID=”Boton_guardar” runat=”server” Text=”Guardar”
ValidationGroup=”LoginUserValidationGroup” onclick=”Boton_guardar_Click” />
   
</ContentTemplate>
</asp:UpdatePanel>

Es importante que el boton este dentro de un PanelUpdate, ya que asi ajax sabra que es este el evento que procesara asincronicamente.

Fuente: Blog Guillermo G.

Gracias

Formato en columnas de un ASP GridView

En varias ocasiones, necesitaba mostrar informacion de una base de datos en un ASP GridView y colocarle los botones de Editar, Eliminar,etc.

Pero los datos no siempre eran de tipo texto (string), algunas ocasiones eran de tipo cantidad (money) o de tipo fecha (Date) y al momento de desplegar estos datos en el GridView se mostraban muy confusos o largos.

En lugar de mostrar $23.00 se mostraba 23.0000 o en lugar de mostrar 12/12/2010 se mostraba 12/12/2010 00:00:00 p.m..

Para cambiar esto, solo basta con darle el formato requerido a la columna del gridView dependiendo del tipo de dato que se obtendra de la base de datos.

En el GridView nos vamos al Smart Tag (Shift+Alt+F10) o hacemos click sobre el y del lado derecho aparecera un boton, hacemos click en el. Una vez ahi, seleccionamos Editar Columnas (edit columns), luego en el Listbox Campos Seleccionados (Selected Fields) seleccionamos la columna a la cual le daremos formato, del lado derecho apereceran las propiedades del este campo, buscamos DataFormatString y colocamos el patron de formateo, ver patrones.

De esta menera, logramos representar correctamnmete los datos que necesitamos. Muchas Gracias.

Imitando el menu de SharePoint

Hola a todos.

En esta ocasion le mostrare como añadir controles al Menu de ASP.NET, asi como estilos y codigo html para transformarlo completamente a como nuestro diseño lo demande. Para esto trataremos de imitar un menu de SharePoint.

Lo primero, es agregar un control al proyecto, una vez insertado, colocamos el cursor sobre el control, del lado derecho aparecera un boton, desplegamos el menu “Tasks”, y nos vamos a “Edit Templates” luego en “Displays” seleecionamos “DynamicItemTemplate”.

En el espacion en blanco colocamos dos controles “Label”, el primero sera el Titulo de la opcion del menu y el segundo sera la Descripcion de la opcion. A cada control “Label” le asignamos el tipo de letra,color,tamaño,etc. una vez hecho esto, nos vamos al codigo aspx de la pagina, y editamos dentro de la etiqueta “<DynamicItemTemplate>”.

Dentro de esta etiqueta, insertamos una tabla “<table>” y agregamos dos “<tr>” uno donde ira el Label del titulo y otro donde ira el Label Descripcion, y cada renglon contendra tres columnas “<td>” una sera la columna color gris de la izquierda, la segunda sera la separacion entre la primera columna y el texto, y la tercera sera el contenido, es decir los controles Label.

Luego de esto, en el control “Menu” agregamos los items que necesitemos.

Por ultimo, nos vamos al codigo .cs y aqui en el metodo “OnLoad()”, buscamos el control con el metodo Page.FindControl(), y a partir de aqui, buscamos los ID’s de los controles Label’s y cambiamos su propiedad “Text” con el valor que necesitemos.

Teniendo como resultado:

Y el nuestro:

No es 100% igual pero con un poco de paciencia y bastante lado femenino podremos darle un diseño muy profesional a nuestros controles.

Descargar ejemplo

Deshabilitar la cache y el boton “atras” del navegador



En ocasiones cuando en un sistema web se requiere que los usuarios inicien sesion, para asi, poder saber quien es la persona que entro y cuales son sus permisos, es conveniente, por seguridad, deshabilitar el boton “atras” del navegador o no permitir cache en la pagina.

Para deshabilitar el contenido anterior:

<script type="text/javascript">
{
if(history.forward(1))
location.replace(history.forward(1))
}
<script>

Para deshabilitar la cache:

<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache" />

Esto nos ayudara para que los usuarios no brinquen de una pagina a otra libremente, sobre todo cuando se tenga una pagina donde se realicen transacciones a bases de datos.

Agregar ASP.NET Ajax a Visual Studio 2010

Primero descargamos el toolkit de ajax para .Net de aqui.

Una vez descargado, abrimos VS2010, y en el panel Toolbox, hacemos click con boton derecho sobre superficie blanca. Y agregamos una nueva categoria.

Luego, colocamos el nombre.

Y sobre el espacio en blanco debajo de la nueva categoria hacemos click con boton derecho y elegimos Choose Items.

Cuando nos pida que elijamos items, nos vamos al boton de Navegar.

Y nos dirigimos a la ruta donde se encuentra la dll. del ajax toolkit. lo seleccionamos y abrimos.

De regreso en el dialogo de Choose Items, dejamos seleccionados los items por default y aceptamos.

Por ultimo, vemos como se agregan los controles de Ajax.

Gracias.

Publicar imagenes desde ASP.NET

En este ejercicio ejemplificaré como recuperar una imagen desde SQL Server y publicarla usando ASP.NET. Con este mecanismo tendremos una paguna aspx que responderá una imagen en lugar de responder HTML.
1.- Iniciamos recuperando el parametro que identificará a la imagen dentro de nuestra tabla en la BD. En esta parte debemos tener el suficiente control para no admitir cualquier valor sino solo aque que pueda darnos un resultado correcto al recuperar la información de la imagen desde nuextra tabla para esto podemos hacer uso de las siguientes condiciones:
Request.QueryString[“img”] == null
Request.QueryString[“img”].ToString() == “”
si esto no se cumple significa que no se ha pasado en la variable “img” la referencia a la imagen que debemos recuperar por lo que no seguimos, ya que no se cumple con los requisitos.
2.- Recuperar la colección de Bytes que corresponde a la BD de acuerdo a la referencia recuperada en el punto 1.
SqlConnection conn = new SqlConnection(Properties.Settings.Default.ConnString);
SqlCommand cmd = new SqlCommand(“select Foto from tabla where Id=@id”, conn);
cmd.Parameters.Add(“id”, SqlDbType.Int).Value = id;
conn.Open();
byte[] byteImage;
try
{
byteImage = (byte[])cmd.ExecuteScalar();
Response.ContentType = “image/jpeg”;
Response.Expires = 0;
Response.Buffer = true;
Response.Clear();
Response.BinaryWrite(byteImage);
Response.End();
}
catch
{
byteImage = null;
}
conn.Close();

La lógica es, si hay una imagen para mostrar se envia el encabezado de acuerdo al formato de la imagen que se va a enviar en el ejmemplo se considera que las imagenes siempre tendrán el mismo formato (JPG) por eso enviamos de encabezado image/jpeg.

Establacemos que el contenido enviado no va a expirar, además de habilitar el uso de Buffer durante en el envio de contenido de la imagen.
El paso de aplicar el método Clear ya que limpia todo el contenido colocado en la salida como parte de la respuesta de la página ASPX. así nos aseguramos que lo unico que se va a responder por parte de la página es la imagen recuperada desde la BD.
Escribimos la coleccion de Bytes recuperada y para finalizar especificamos que el envío de información ha terminado.

Cabe resaltar que con esta código no importa la estructura HTML que se tenga en la pagina ASPX. Estas instrucciones podrían están en el evento Page_Load.

Un saludo a todos