Dodavanje koda za pokretanje scripte u DataList (npr. za event onClick)

[ vinkof @ 06.06.2009. 11:09 ] @

Na stranici (web form) postoji Image#velikaSlika (imgKontrol) i DataList#maleSlike koja se Binduje svim slikama nekog foldera.

Kako da napravim da se klikom na neku od malih slika u DataList#maleSlike u kontroli Image#velikaSlika učita (prikaže) baš ta slika.

Možda bude jasnije uz postojeći kod:

Details.aspx

Code:

                    <div id="velikaSlika">
                        <asp:Image ID="velSlika" runat="server" Width="350" Height="263px" ImageUrl="" />
                    </div>

                    <div id="maleSlike">
                     <asp:DataList id="dlMaleSlike"  runat="server" RepeatDirection="Vertical" RepeatColumns="4">
                <ItemTemplate >
                     <asp:Image ID="imgFromList" runat="server" ImageUrl='<%# Bind("Name") %>' width="100px" Height="70px" />
                </ItemTemplate>
                     </asp:DataList>
                    </div>

Details.aspx.vb

Code:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        folderName = Request("id")
        BindDataToList(folderName)

    End Sub

    Protected Sub dlMaleSlike_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dlMaleSlike.ItemDataBound

        If e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.Item Then

            DirectCast(e.Item.FindControl("imgFromList"), Image).ImageUrl = "~/images/accommodation/" + folderName + "/" + CType(e.Item.DataItem, System.IO.FileInfo).Name

        End If

    End Sub

    Private Sub BindDataToList(ByVal dirWithImages As String)
        If folderName = "" Then
            Response.Write("odaberi slike iz padajućeg izbornika")
        Else
            Dim di As New DirectoryInfo("C:\Documents and Settings\V\My Documents\Vinko WEB\Apartmani\02Cro-adriaNet\images\accommodation\" & dirWithImages)
            Me.dlMaleSlike.DataSource = di.GetFiles()
            Me.dlMaleSlike.DataBind()
        End If
    End Sub

Hvala unapred

[ deerbeer @ 08.06.2009. 15:51 ] @

Dodas atribut Image objektu za koji bindujes path od male slike tako sto ces dodati i atribut OnClick
koji ce pozivati javascript code koji ces negde definisati na aspx stranici
server-code u ItemDataBound :

Code:

Image img = CType( e.Item.FindControl("imgFromList"), Image)
img.Attributes.Add("onClick",showBigPic(url_do_velike_slike) )

javascript :

Code:

function showBigPic (url_do_velike_slike) {
var imgVelika = document.getElementById("ctl00_velSlika");
imgVelika .src = url_do_velike_slike;
}

ASP.NET dodaje prefix ctl00_ na ID tvoje image kontrole (pogledaj view source te strane ) pa uzmi
taj string i iz javascripta pronadji tu kontrolu sa document.getElementById.
Ovaj prefix nije uvek isti ..generisanje tog prefix-a dosta zavisi od layouta cele strane ,
tako da se on mozda i promeni ako recimo tu kontrolu premestis u neku drugu npr. Asp:Table itd ..

[ vinkof @ 08.06.2009. 21:41 ] @

Ako se ne varam ovaj prvi kod bi trebalo kopirat u:

Ja pokušao, ali mi ne prihvaća. " Image is type and cannot be use like an expression"

Možda da mi pokušaš uvrstit u postojeći kod.

Sory, nov sam.

[ deerbeer @ 09.06.2009. 09:02 ] @

Code:

Protected Sub dlMaleSlike_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dlMaleSlike.ItemDataBound

    If e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.Item Then

       DirectCast(e.Item.FindControl("imgFromList"), Image).ImageUrl = "~/images/accommodation/" + folderName + "/" + CType(e.Item.DataItem, System.IO.FileInfo).Name

      'ubacen kod za onClick
       DirectCast(e.Item.FindControl("imgFromList"), Image).Attributes.Add("onClick","showBigPic(url_do_velike_slike)")

        End If

    End Sub

Ispustio sam navodnike kod 2. parametra metode Add .
Parametar "url_do_velike_slike" moras sam da napravis tj. da ga procitas gde ti se nalazi veliki format slika ..

[ vinkof @ 10.06.2009. 21:47 ] @

Hvala, uz male preinake ovo radi.

Code:
Protected Sub dlMaleSlike_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dlMaleSlike.ItemDataBound
If e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.Item Then
            putDoSlike = "../../images/accommodation/" + folderName + "/" + CType(e.Item.DataItem, System.IO.FileInfo).Name
            DirectCast(e.Item.FindControl("imgFromList"), Image).ImageUrl = putDoSlike
            'ubacen kod za onClick
            DirectCast(e.Item.FindControl("imgFromList"), Image).Attributes.Add("onClick", "java_script:document.images.velikaSlika.src='" + putDoSlike + "'")
            If prvaVelikaSlika = "" Then
                prvaVelikaSlika = putDoSlike
                velikaSlika.ImageUrl = prvaVelikaSlika
            End If
        End If
End Sub

Ali, na drugoj strani sam došao do ovog riješenja:

Code:
Protected Sub dlMaleSlike_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dlMaleSlike.ItemDataBound
If e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.Item Then
    imeSlike= CType(e.Item.DataItem, System.IO.FileInfo).Name
    putDoSlike="../../images/accommodation/" + folderName + "/" + imeSlike
             strMaleSlike = "<img src='" + putDoSlike + "' alt='" + imeSlike + "' onclick=""java_script:document.images.velikaSlika.src='" + putDoSlike + "'""/>"

            DirectCast(e.Item.FindControl("LabelKodZaMaleSlike"), Label).Text = strMaleSlike

            If prvaVelikaSlika = "" Then
                prvaVelikaSlika = putDoSlike
                velikaSlika.ImageUrl = prvaVelikaSlika
            End If

        End If
End Sub

U ovom drugom upisujem kod u label kontrolu umetnutu u dlMaleSlike i tako odmah dodajem alt tag.

Što je bolje upotrijebit?