Scribd
Upload
76 views

ASP Controls

Uploaded by

Mariel Antonio Ake Lopez
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
76 views

ASP Controls

Uploaded by

Mariel Antonio Ake Lopez
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

<img src="URL de la imagen" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=100;this.

height=80;" width="100" height="80" /> Subir archive a Bd Este script debe estar en la misma carpeta que nuestros archivos a subir. La carpeta debe de contener permisos de escritura. Este codigo no lo ofrecemos ejecutable, por motivos de seguridad :-) <% 'Codigo ofrecido por Tutores.org %> <script language="VB" runat=server> Sub DoUpload(Sender As Object, e As System.EventArgs) Dim sPath as String Dim sFile as String Dim sFullPath as String Dim sSplit() as String Dim sPathsubir as String sPath = Server.MapPath(".") If Right(sPath, 1) <> "" then sPathsubir = sPath 'CArpeta a subir sPath = sPath & "" Else sPathsubir = Left(sPath, Len(sPath) - 1) End If sFile = txtUpload.PostedFile.FileName sSplit = Split(sFile, "") sFile = sSplit(Ubound(sSplit)) sFullPath = sPath & sFile Try txtUpload.PostedFile.SaveAs(sFullPath) lblResults.Text = "El archivo " & sFile & " to " & sPathsubir & " subio correctamente" Catch Ex as Exception lblResults.Text = "El archivo " & sFile & " to " & sPathsubir & " No pudo subirse al servidor por la siguiente razon: " & Ex.Message Finally lblResults.Font.Bold = True lblResults.Visible = true End Try End Sub </script> <html> <body> <form enctype="multipart/form-data" runat=server> <FONT face = +1><B> </b></FONT> <table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr> <td bgcolor="#990000"><font face = +1><b><font color="#FFFFFF" size="2" face="Verdana, Arial, Helvetica, sans-serif">Selecciona un archivo a subir:</font></b></font> <font color="#FFFFFF" size="2" face="Verdana, Arial, Helvetica, sans-serif"> <input name="file" type=file id="txtUpload" runat=server> </font> </td> </tr> </table> <P align = CENTER> <asp:button id=btnUpload Text="Upload File" OnClick="DoUpload" runat=server/> <hr noshade> <asp:label id="lblResults" Visible=false runat=server/> </form> </body> </html> Calendario <% 'Codigo ofrecido por Tutores.org %> <form runat="server"> <asp:Calendar DayNameFormat="Full" runat="server"> <DayHeaderStyle ForeColor="#0000ff" /> <TodayDayStyle BackColor="#00ff00" /> </asp:Calendar> </form> Boton MUESTRA MENSAJE <% 'Codigo ofrecido por Tutores.org %> <script runat="server"> Sub button1(Source As Object, e As EventArgs) text.InnerHtml="El boton ha sido pulsado" End Sub </script> <html> <body> <form runat="server"> <button id="b1" OnServerClick="button1" runat="server"> Pulsa el boton </button> <p id="text" runat="server" /> </form> </body> </html>

MOSTAR IMAGEN

<% 'Codigo ofrecido por Tutores.org %> <script runat="server"> Sub Page_Load(Sender As Object,E As EventArgs) image1.Src="imagen.gif" image1.Alt="Este es el texto alt" End Sub </script> <html> <body> <form runat="server"> <img id="imagen1" runat="server" /> </form> </body> </html>

Efecto rollover
Sencillo codigo para aplicar el efecto llamado rollover sobre imagenes
# Codigo ofrecido por Tutores.org <html> <head> <script language="javascript"> <!-function imageswap(imgx){ var name=imgx.src; var leng = eval(name.length) - 5; var num=name.charAt(leng); if(num==1){ name = name.replace(1,2); } else{ name = name.replace(2,1); } imgx.src=name; }; //--> </script> </head>

<body> <img src="/images/imagen1.gif" onMouseOut="imageswap(this);" onMouseOver="imageswap(this);"> </img> </body> </html>

Cambio de imagen al pasar el mouse onmouseover


Cuando queremos mostrar un boton el cual modifique la imagen al pasar el mouse por encima o " onmouseover ". Simplemente tenemos que modificar la linea 24 en donde aparecen el path hacia las imagenes o bien podremos agregar mas.

# Codigo ofrecido por Tutores.org <head> <SCRIPT LANGUAGE="JavaScript"> function cambiar (flag,img) { if (document.images) { if (document.images[img].permitirloaded) { if (flag==1) document.images[img].src = document.images[img].permitir.src else document.images[img].src = document.images[img].permitir.oldsrc } } } function preloadcambiar (img,adresse) { if (document.images) { img.onload = null; img.permitir = new Image (); img.permitir.oldsrc = img.src; img.permitir.src = adresse; img.permitirloaded = true; } } </SCRIPT> </head> <body> <A HREF="http://www.tutores.org/" TARGET="_BLANK" onMouseover="cambiar(1,'IMG1');" onMouseout="cambiar(0,'IMG1');"> <IMG SRC="/tutores/images/mundo.gif" border=0 NAME="IMG1"

onLoad="preloadcambiar(this,'/tutores/images/mundo2.gif');" ></A> </body>

Efecto de imagen temblando al pasar el mouse


Al pasar el raton por encima de la imagen esta empezara a temblar como si de un terremoto se tratase. Muy util para aplicar a nuestros banners o imagenes de publicidad
# Codigo ofrecido por Tutores.org <head> <style>.shakeimage { POSITION: relative } </style> <script language="JavaScript"> var rector=3 var stopit=0 var a=1 function init(which){ stopit=0 shake=which shake.style.left=0 shake.style.top=0 } function rattleimage(){ if ((!document.all&&!document.getElementById)||stopit==1) return if (a==1){ shake.style.top=parseInt(shake.style.top)+rector } else if (a==2){ shake.style.left=parseInt(shake.style.left)+rector } else if (a==3){ shake.style.top=parseInt(shake.style.top)-rector } else{ shake.style.left=parseInt(shake.style.left)-rector } if (a<4) a++

else a=1 setTimeout("rattleimage()",50) } function stoprattle(which){ stopit=1 which.style.left=0 which.style.top=0 } </script> </head> <body> <p align="center"><img class="shakeimage" onmouseout="stoprattle(this)" onmouseover="init(this);rattleimage()" src="/images/mundo.gif"></p> </body>

Menu con cambio de imagen al pasar el mouse


Este codigo javascript ayudado de hojas de estilo css consiguen mostrar un menu con imagen en su parte izquierda que al pasar el mous sobre el enlace esta imagen se modifica.
# Codigo ofrecido por Tutores.org <HEAD> <SCRIPT LANGUAGE="JavaScript"> function imgover(imgname){ imgname.src = "/tut/images/adelante.gif" } function imgout(imgname){ imgname.src = "/tut/images/dot.gif" } </SCRIPT> </HEAD> <BODY > <img name="pic1" SRC="/tut/images/dot.gif" width=10 height=10 border=0> <A href="#" onMouseOver="imgover(pic1)" onMouseOut="imgout(pic1)" style="color:green; text-decoration:none"; >Inicio<br> </A> <img name="pic2" SRC="/tut/images/dot.gif" width=10 height=10 border=0> <A href="#" onMouseOver="imgover(pic2)" onMouseOut="imgout(pic2)" style="color:green; text-decoration:none"; >Foros</A><br> <img name="pic3" SRC="/tut/images/dot.gif" width=10 height=10 border=0> <A href="#" onMouseOver="imgover(pic3)" onMouseOut="imgout(pic3)" style="color:green; text-decoration:none"; >Scripts</A> </body>

Tres colores al pasar el mouse por el enlace


Para dar un poco de efecto a nuestros enlaces, este script permite que al pasar el mouse por encima del enlace, este cambie de color 3 veces.
# Codigo ofrecido por Tutores.org <script type="text/JavaScript"> var colors = new Array("gray","silver","red"); var thelink = null; function colorup(link){ if(typeof(link.style) == "undefined") return; if(thelink != null) clearTimeout(thelink.colorTimeout); thelink = link; if(thelink.colorindex == null) thelink.colorindex = 0; else thelink.colorindex++; if(thelink.colorindex >= colors.length) { thelink.colorindex = null; //reset return; // done recursing. } thelink.style.color=colors[link.colorindex]; thelink.colorTimeout = setTimeout("colorup(thelink)",200); } </script> <A href="javascript:;" onmouseover="colorup(this)">Pasa el mouse por encima</a> Onmouseover <p>Hi Cano82,</p> <p>You need to add some javascript in the "onMouseOver" event of the <mark>hyperlink</mark> that changes the image. Here is an example of a link and image, where mousing over the link changes the source of the image, and mousing out of the link changes the image back to the original:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;(Your title here)&lt;/title&gt; &lt;script type="text/javascript"&gt; &lt;!-- function changeImage(theElement, theNewImage) { document.getElementById(theElement).src = theNewImage; } // --&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;asp:<mark>HyperLink</mark> ID="HyperLink1" runat="server" Text="abc" NavigateUrl="~/anotherPage.aspx" onmouseover="changeImage('theImage', 'images/image2.jpg');" onmouseout="changeImage('theImage', 'images/image1.jpg');"&gt;&lt;/asp:<mark>HyperLink</mark>&gt; &lt;img id="theImage" src="images/image1.jpg" /&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> <p> ~ mellamokb</p>

////////////// <p>The onMouseOver attribute is not part of the server-side tag, so it doesn't support DataBinding (&lt;%# Eval("Picture") %&gt;). However, you can use the GridView's RowDataBound event to access each <mark>HyperLink</mark> separately and set their onMouseOver attributes to the correct value as follows:</p> <p>---- myPage.aspx ----</p> <pre><code>&lt;asp:GridView .... OnRowDataBound="GridView1_RowDataBound"&gt; ... &lt;ItemTemplate&gt; &lt;asp:<mark>HyperLink</mark> ID="HyperLinkMS" runat="server" Text='&lt;%# Eval("Header") %&gt;' /&gt; &lt;asp:Image ID="ImageMS" runat="server" ImageUrl='&lt;%# Eval("Picture") %&gt;' /&gt; &lt;/ItemTemplate&gt; ... &lt;/asp:GridView&gt;</code></pre> <p> ---- myPage.aspx.cs ----</p> <pre><code>protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.DataItem != null) { DataRowView drv = (DataRowView)e.Row.DataItem; <mark>HyperLink</mark> h = (<mark>HyperLink</mark>)e.Row.FindControl("HyperLinkMS"); Image i = (Image)e.Row.FindControl("ImageMS"); h.Attributes.Add("onmouseover", "changeImage('" + i.UniqueID + "', '" + drv["PictureMouseOver"].ToString() + "');"); } }</code></pre> <p> ~ mellamokb</p> ///////

a:link { background-image:none; } a:hover { background-image:url('images/icon.png'); background-repeat:no-repeat; background-position:right; padding-right:10px /*adjust based on icon size*/ }

BUTTON CAUSES VALIDATION

'Declaration <ThemeableAttribute(False)> _ Public Overridable Property CausesValidation As Boolean 'Usage Dim instance As Button Dim value As Boolean value = instance.CausesValidation instance.CausesValidation = value

ONCLIENTCLICK

<script runat="server"> Sub btClick1(obj As Object, e As ImageClickEventArgs) lblMsg.Text="OnClick script: Hello!" End Sub </script> <html> <body> <form runat="server"> <asp:ImageButton OnClick="btClick1" OnClientClick="btClick2()" ImageUrl="img_submit.jpg" runat="server" /> <br /> <asp:label id="lblMsg" runat="server" /> </form> <script type="text/javascript"> function btClick2() { return confirm('OnClientClick script: Press OK to continue.'); } </script> </body> </html> Hyperlink Target <html> <body> <form runat="server"> <asp:HyperLink id="link1" runat="server" Text="W3Schools" NavigateUrl="http://www.w3schools.com" Target="_blank" /> </form> </body> </html>

PAGINACION

Por lo general yo utilizo un Metodo para llenar el GridView y luego en el SelectedIndexChanging, Sorting y el PageIndexChanging poder invocarlo. private void LLenarDatos() { SqlConnection cn = new SqlConnection("MiCadenadeConexion");

SqlDataAdapter da = new SqlDataAdapter("Select * From MiTabla", cn); DataSet ds = new System.Data.DataSet(); da.Fill(ds); GridView1.DataSource = ds; GridView1.DataBind(); }

y por lo que entendi quieres paginar, pues estas invocando mal al evento ya que deberia ser el Evento PageIndexChaging protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) { GridView1.PageIndex = e.NewPageIndex; LLenarDatos(); }

O si usas un SQLDataSource
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)

{ GridView1.PageIndex = e.NewPageIndex; SqlDataSource1.DataBind(); }

Si esto no resuelve tu inquietud puedes colocarnos el codigo completo y decirnos que tipo de fuente de datos utilizas.
///PAGINACIONNN

hola, Hola! a ver si me podis ayudar con esto. >Mi problema es que me falla la paginacin. tengo una especie de formulario en el que le introduces unos datos para que te busque >en la base de datos,despus de darle al botn "search" y el resultado de estos datos lo estoy intentando paginar, el problema est >en que cuando le doy a la hoja 2 ( o a cualguier otra) tengo que volver a darle al botn "search" para que me muestre los resultados > de la hoja 2 y lo mismo con la hoja 3...

esta raro lo que comentas , pero si te fijas en la propuesta que le hice arriba lo has implementado haci ?,, porque haci me funciona bien a mi viendo tu codigo no has implementado el Session("View") utilizando esta te perminte almacenar el valor de esta manera puede paginar sin problema implementando de esta manera . tu lo tienes haci : >Protected Sub GridView1_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles GridView1.PageIndexChanging > >GridView1.PageIndex = e.NewPageIndex > >GridView1.DataBind() > >End Sub

implementalo haci: protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) { this.GridView1.PageIndex = e.NewPageIndex; this.GridView1.DataSource = Session["View"].ToString (); }

te paso el codigo completo abajo protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) { this.GridView1.PageIndex = e.NewPageIndex; this.GridView1.DataSource = Session["View"].ToString (); } protected void Button1_Click(object sender, EventArgs e) { using (SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings["conection"].ConnectionStrin g.ToString())) { SqlCommand cmd = new SqlCommand("select * from tabla", cn); SqlDataAdapter da = new SqlDataAdapter(cmd); DataTable dt = new DataTable(); da.Fill(dt); this.GridView1.DataSource = dt;

this.GridView1.DataBind(); Session["view"] = dt; } }

You might also like