Pablo Viale – Página 29 – Recursos para desarrolladores

Publicada el por

Cómo hacer submit de un formulario usando JavaScript

Normalmente harás el submit de un formulario utilizando un botón común y corriente:

<form id="form1" name="form1" method="post" action="ProcesarDatos.aspx">
  <input name="edad" type="text" id="edad" />
  <input type="submit" name="Submit" value="Submit" />
</form>

O quizás lo sepas hacer con una imagen:

<form id="form1" name="form1" method="post" action="ProcesarDatos.aspx">
  <input name="edad" type="text" id="edad" />
  <input type="image" width="20" height="20" name="imageField" src="boton.gif" />
</form>

¿Pero has tratado de hacer el submit con una liga común?

HTML no nos da la opción de hacerlo de manera similar a los ejemplos antes mencionados, pero lo podemos hacer con JavaScript, así:

<form id="form1" name="form1" method="post" action="ProcesarDatos.aspx">
  <input name="edad" type="text" id="edad" />
   <a href="javascript:document.form1.submit()">Submit</a>
</form>

En el ejemplo anterior nota que form1 es el nombre que se le da al formulario, por eso es usado en la instrucción de JavaScript. Si modificas el nombre de tu formulario, asegúrate de modificarlo en el JavaScript. No modifiques document ni submit porque son palabras reservadas del lenguaje.

Publicada el por

Utiliza String.Format para establecer el valor de ImageUrl de un tag asp:Image dentro de un DataList

Me estuve peleando un rato con esto, hasta que encontré la solución.

Tengo un DataList, y dentro de él aparecen imágenes cuya ruta se forma a partir de un valor devuelto por la base de datos.

Mi primera idea fue tratar de unir la ruta con el Eval, de esta forma:

<asp:Image ImageUrl='~/postales/thumbs/<%# Eval("archivoThumbnail") %>' BorderStyle="None" CssClass="bordeImagenGris" Height="80" Width="80" ID="Image1" runat="server" />

Pero dado que el Eval aparece dentro de las comillas simples de ImageUrl, el valor es pasado tal cual, así que la imagen nunca es encontrada.

Para resolverlo, tienes que usar la función String.Format, de esta manera:

<asp:Image ImageUrl=<%# String.Format("~/postales/thumbs/{0}",Eval("archivoThumbnail"))%> BorderStyle="None" CssClass="bordeImagenGris" Height="80" Width="80" ID="Image1" runat="server" />

Sobre String.Format

La función String.Format es un concatenador (valga el término) de cadenas de texto. Toma n parámetros. Cada parámetro se define por un número encerrado entre llaves ({ y }), y a cada parámetro existente debes darle un valor.

Como siempre, es más fácil entenderlo con un ejemplo:

String.Format("Roger {0} es el mejor {1} del {2}", "Federer", "tenista", "mundo")
'Esto regresará el siguiente texto:
'Roger Federer es el mejor tenista del mundo

Publicada el por · 2 comentarios

Trabajando con subcarpetas, CSS y Master Pages usando Page.ResolveUrl

Tengo un Master Page en el fólder raíz de mi aplicación ASP.NET.
Tengo un CSS también en el fólder raíz.
En el Master Page, mando llamar al CSS de la siguiente forma:

<link href="Estilo.css" rel="stylesheet" type="text/css" />

Ahora bien, tengo una página llamada Default.aspx en el fólder raíz y otra llamada Dos.aspx en una carpeta. Las dos páginas están basadas en el Master Page. En la página Default.aspx el CSS se carga sin problemas. En la página Dos.aspx el CSS no se carga porque la aplicación no está reescribiendo la ruta del CSS, y no lo encuentra dentro de la carpeta.

Intenté esto:

<link href="~/Estilo.css" rel="stylesheet" type="text/css" runat="server" />

¡Pero no funciona!

Estuve investigando y encontré la manera de hacerlo funcionar, es así:

<link href='<%=Page.ResolveUrl("~/Estilo.css") %>' rel="stylesheet" type="text/css"></link>

La instrucción Page.ResolverUrl reescribe toda la ruta, sin importar en qué carpeta, sub-carpeta, sub-sub-carpeta, etc. estemos. Esto es genial ya que si un día mueves tu aplicación a un fólder virtual o a un dominio distinto, no tendrás que preocuparte por modificar estas referencias.

Lo mejor de todo es que funciona donde sea, por ejemplo:

<script src='<%=Page.ResolveUrl("~/scripts/MisFunciones.js") %>' type="text/javascript"></script>

Publicada el por

Las imágenes de las Master Pages no se ven en páginas que están en una subcarpeta

Si en un Master Page de ASP.NET pones alguna imagen de esta manera:

<img src="Imagenes/MiImagen.jpg">

Todo va a funcionar bien siempre y cuando las páginas que crees a partir de tu Master Page se encuentren en la misma carpeta que el Master Page.

Intenta crear un fólder y crea una página basada en tu Master Page dentro del fólder y verás que la imagen no se ve.

Esto es porque el Master Page no modifica la ruta de tu imagen.

Para que lo haga, escribe lo siguiente en tu Master Page:

<img src="~/Imagenes/MiImagen.jpg" runat="server">

La tilde, ~, sumada a la propiedad runat="server" le indican a la Master Page que reescriba las rutas de acuerdo al fólder en que se encuentra la página basada en el Master Page.

Está bien la solución anterior, pero lo mejor que puedes hacer es siempre utilizar tags de servidor. Así que para el ejemplo anterior utiliza:

<asp:Image ImageUrl="~/Imagenes/MiImagen.jpg" ID="Image1" runat="server" />

Con la tilde, si tienes una página en una subcarpeta, la imagen se reescribirá así:

<img src="../Imagenes/MiImagen.jpg">

Esta manera de manejar las imágenes es ideal porque si en un futuro mueves tu aplicación a cualquier otro fólder virtual, no necesitarás modificar las rutas de las imágenes.

Publicada el por · 2 comentarios

Usando UpdatePanel con Triggers

Si estás usando en Ajax un UpdatePanel, es sencillo hacer que éste se actualize si colocas un botón dentro de él mismo, algo como:

<asp:updatepanel id="UpdatePanel1" runat="server">
   <contenttemplate>
      <asp:button id="Buscar" runat="server" text="Buscar"></asp:button>
      <asp:label runat="server" text="Label"></asp:label>
   </contenttemplate>
</asp:updatepanel>

Sin embargo, ¿qué ocurre si el botón que debe desencadenar la actualización del UpdatePanel se encuentra fuera del mismo?

Entonces debes añadir un trigger al UpdatePanel para indicarle cuál o cuáles controles deben desencadenar su actualización. Hazlo así:

<asp:button id="Buscar" runat="server" text="Buscar"></asp:button>
<asp:updatepanel id="UpdatePanel1" runat="server">
   <contenttemplate>
      <asp:label runat="server" text="Label"></asp:label>
   </contenttemplate>
   <triggers>
      <asp:asyncpostbacktrigger controlid="Buscar" eventname="Click"></asp:asyncpostbacktrigger>
   </triggers>
</asp:updatepanel>