[ASP.NET AJAX] Ajax Toolkit ModalPopup meerdere TargetContro

[ThunderNet]

Edit:
Ik heb inmiddels voor een andere aanpak nodig. En daardoor is er geen oplossing meer nodig voor mij.

Orginele post:

Ik ben momenteel bezig met mijn nieuwe site. Ik maak deze site in ASP.Net 2.0 gebruikmakende van C#. Op de server draait ook nog een MySQL database.

Op mijn pagina heb ik een Portfolio pagina. Dit is een gallery, welke automatisch gevuld wordt door de url's van de foto's op te halen uite de database. Zodra de user op de foto klikt, wil ik dat er een ModalPopup wordt weergegeven (uit de Ajax Control Toolkit). Echter in de samples kan deze popup slechts 1 bron hebben (knop of link die de popup activeerd) Terwijl ik wil dat hij geactiveerd wordt zodra er iemand op een image klikt, en wil de id weten van waar hij opgeklikt heeft (zodat ik een grotere versie van de foto van de server kan halen).


Portfolio.aspx

HTML:

<%@ Page Language="C#" MasterPageFile="~/SiteMaster.master" AutoEventWireup="true" CodeFile="Portfolio.aspx.cs" Inherits="Portfolio" Title="Untitled Page" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
    
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
            <div id="modalPopupImage" style="width:800px; height:800px;">
            
            </div>

        </asp:Panel>



<div id="PortfolioDIV" runat="Server">

</div>

        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" 
            TargetControlID="PortfolioDIV"
            PopupControlID="Panel1" 
            BackgroundCssClass="modalBackground" 
            CancelControlID="CancelButton" 
            DropShadow="true"
             />

    <script type="text/javascript">
        // The following snippet works around a problem where FloatingBehavior
        // doesn't allow drops outside the "content area" of the page - where "content
        // area" is a little unusual for our sample web pages due to their use of CSS
        // for layout.
        function setBodyHeightToContentHeight() {
            document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px";
        }
        setBodyHeightToContentHeight();
        $addHandler(window, "resize", setBodyHeightToContentHeight);    
    </script>


</asp:Content>

De div portfolioDIV wordt in de codebehind gevuld met de data uit de database.

Portfolio.aspx.cs

C#:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.Odbc;

public partial class Portfolio : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // NewsItem.InnerHtml = GetNewsItem(Page.Request.Params["id"]);
        // Als id ontbreekt of 0 is, "hoofdpagina" laten zien

        if (Page.Request.QueryString.Count == 0)
        {
            PortfolioDIV.InnerHtml = PortfolioIndexPage();
        }
        else
        {
            PortfolioDIV.InnerHtml = PortfolioCatPage(Page.Request.QueryString["id"]);
        }
        
    }

    string PortfolioCatPage(string cat)
    {
        string returnstring = "";
        //Pagina opbouwen met alle foto's binnen een categorie
        OdbcConnection myCon = new OdbcConnection("Driver={MySQL ODBC 3.51 Driver");
        string strCommand = "SELECT name FROM portfolio_cat WHERE id = ";
        strCommand += Page.Request.QueryString["id"];
        myCon.Open();
        OdbcCommand myCom = new OdbcCommand(strCommand, myCon);
        returnstring += "<div class='Portfolio_Cat'><p>";
        returnstring += myCom.ExecuteScalar().ToString();
        myCon.Close();
        returnstring += "</p><div class='Portfolio_Images'>";

        OdbcConnection myCon2 = new OdbcConnection("Driver={MySQL ODBC 3.51 Driver};");
        string strCommand2 = "SELECT id, url_thumb, comment FROM portfolio_photos WHERE visible = 0 AND cat_id =";
        strCommand2 += Page.Request.QueryString["id"];
        myCon2.Open();
        OdbcCommand myCom2 = new OdbcCommand(strCommand2, myCon2);
        OdbcDataReader myReader2 = myCom2.ExecuteReader();
        while (myReader2.Read())
        {
            returnstring += "<img src='";
            returnstring += myReader2["url_thumb"];
            returnstring += "' alt='";
            returnstring += myReader2["comment"];
            returnstring += "' id='";
            returnstring += myReader2["id"];
            returnstring += "'/>";
        }
        myCon2.Close();

        returnstring += "</div></div>";

        return returnstring;
    }

    string PortfolioIndexPage()
    {
        string returnstring = "";

        //Hoofdpagina opbouwen, met 4 foto's per categorie

        OdbcConnection myCon = new OdbcConnection("Driver={MySQL ODBC 3.51 Driver};");
        string strCommand = "SELECT * FROM portfolio_cat WHERE visible = 0";

        myCon.Open();
        OdbcCommand myCom = new OdbcCommand(strCommand, myCon);
        OdbcDataReader myReader = myCom.ExecuteReader();

        while (myReader.Read())
        {
            returnstring += "<div class='Portfolio_Cat'><p><a href='Portfolio.aspx?id=";
            returnstring += myReader["id"];
            returnstring += "'>";
            returnstring += myReader["name"];
            returnstring += "</a></p>";
            returnstring += "<div class='Portfolio_Images'>";
                OdbcConnection myCon2 = new OdbcConnection("Driver={MySQL ODBC 3.51 Driver};");
                string strCommand2 = "SELECT id, url_thumb, comment FROM portfolio_photos WHERE visible = 0 AND cat_id =";
                strCommand2 += myReader["id"];
                strCommand2 += " LIMIT 3";
                myCon2.Open();
                OdbcCommand myCom2 = new OdbcCommand(strCommand2, myCon2);
                OdbcDataReader myReader2 = myCom2.ExecuteReader();
                while( myReader2.Read())
                {
                    //3 images die binnen de categorie vallen
                    returnstring += "<img src='";
                    returnstring += myReader2["url_thumb"];
                    returnstring += "' alt='";
                    returnstring += myReader2["comment"];
                    returnstring += "' id='";
                    returnstring += myReader2["id"];
                    returnstring += "'/>";
                }
                myCon2.Close();

                returnstring += "</div></div>";

        }

        myCon.Close();


        
        return returnstring;
    }
}

Zoals je ziet worden de images voorzien van een id. Nu wil ik dat zodra er op een image geklikt wordt. De modalpopup weergegeven wordt, met een grote versie van die image (ik kan diezelfde id gebruiken om de url van de grote image op te vragen uit de database)

De huidige pagina is te zien op: http://thundernet.nl/portfolio.aspx

HTML:

        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"  
            TargetControlID="PortfolioDIV" 
            PopupControlID="Panel1"  
            BackgroundCssClass="modalBackground"  
            CancelControlID="CancelButton"  
            DropShadow="true" 
             />

Bij TargetControlID wil ik dus alle images hebben. Echter al probeer ik 1 image krijg ik een error dat hij deze id niet kon vinden. (Niet zo gek, want hij wordt pas later dynamisch aangemaakt).

[ Voor 8% gewijzigd door ThunderNet op 11-05-2007 02:02 ]