I'm sure this has come up before, but I seem to keep finding the reverse (ModalPopupExtender (MPE) in Repeater), so here goes...
I have a single MPE in my base master page. I have a image carousel user control that dynamically adds a image gallery editor control to the MPE when an edit link button is clicked. the editor control has a repeater in it that shows the current list of images, link buttons for each image that move an image left & right (change the display order in the DB) & remove the image (delete from the DB), & a file upload, title textbox, & save button to add a new image.
The MPE works just fine (loads the editor), but when the move, remove, or save (link)buttons are cliked, the page refreshes w/ the MPE showing the editor, but nothing has changed. when debugging, I can see that the repeater's ItemCommand & the save button's Click events are not being fired.
Here is the master page's HTML w/ the single MPE in it:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="base.master.cs" Inherits="masterpages_base" %><%@ Register TagPrefix="ic" TagName="UserStatus" Src="~/controls/UserStatus.ascx" %><%@ Register TagPrefix="ic" TagName="Footer" Src="~/controls/Footer.ascx" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ic" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title></title><%-- --%><link type="text/css" rel="Stylesheet" href="../css/reset.css" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:500,regular&subset=latin" media="all" /><link type="text/css" rel="Stylesheet" href="../css/styles.css" /><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><asp:ContentPlaceHolder id="cphGeneralHead" runat="server" /><%-- --%><link href="../css/blue.monday/jplayer.blue.monday1.css" rel="stylesheet" type="text/css" /><!--<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
--><script type="text/javascript" src="../js/jquery.jplayer.js"></script><script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$('#jquery_jplayer_1').jPlayer({
ready: function (event) {
$(this).jPlayer('setMedia', {
mp3: 'tracks/<asp:Literal runat="server" id="litTrackFilename" />'
});
},
swfPath: '../js',
supplied: 'mp3',
wmode: 'window',
preload: 'auto'
});
});
function StopPlayer() {
$("#jquery_jplayer_1").jPlayer("stop");
}
//]]></script><script type="text/javascript">
function SaveTrack(textboxID, hiddenID) {
var textbox = document.getElementById(textboxID);
var hidden = document.getElementById(hiddenID);
hidden.value = textbox.value;
alert(hidden.value);
document.forms[0].submit();
}</script></head><body><a name="top"></a><form id="form1" runat="server"><%-- --%><asp:ScriptManager ID="ScriptManager1" runat="server" /><asp:Panel runat="server" ID="pnlPageWrapper"><div style="float:left;"><asp:HyperLink runat="server" ID="hypAdminLink" NavigateUrl="~/admin/home.aspx" Text="Admin" /></div><div id="user-status"><ic:UserStatus runat="server" ID="icUserStatus" /></div><div class="clear"><!-- --></div><div id="base-content"><asp:ContentPlaceHolder id="cphGeneral" runat="server" /></div><div id="footer"><ic:Footer runat="server" ID="icFooter" /></div></asp:Panel><%-- --%><asp:Button ID="btnMPEDummy" runat="server" Text="Button" Style="display: none" /><ic:ModalPopupExtender
ID="mpeContainer"
runat="server"
backgroundcssclass="modalBackground"
Enabled="True"
TargetControlID="btnMPEDummy"
PopupControlID="pnlMPE" /><asp:Panel runat="server" ID="pnlMPE" CssClass="modalPopup"><asp:ImageButton runat="server" ID="ibClose" ImageUrl="~/images/ui/player_close.png" OnClick="ibClose_Click" CssClass="close-button" /><div class="clear-bottom-15"><!-- --></div><asp:Panel runat="server" ID="pnlContainer" /></asp:Panel></form></body></html>Here is the ascx for the ImageLightboxCarousel user control:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ImageLightboxCarousel.ascx.cs" Inherits="controls_ImageLightboxCarousel" %><%@ Reference Control="~/controls/ImageGalleryEditor.ascx" %><script type='text/javascript' language='javascript'>
tb_pathToImage = '../images/ui/loading-thickbox.gif';
jQuery(document).ready(function () {
jQuery('#<asp:Literal runat="server" ID="litCarouselID1" />').jcarousel();
});</script><div id="image-lightbox-carousel"><asp:LinkButton runat="server" ID="lbEditImageGallery" CssClass="edit-image-gallery" onclick="lbEditImageGallery_Click" ToolTip="Edit Image Gallery" /><div class="clear"><!-- --></div><ul id='<asp:Literal runat="server" ID="litCarouselID2" />' class='jcarousel-skin-ie7'><asp:Repeater runat="server" ID="rptImages" onitemdatabound="rptImages_ItemDataBound" OnItemCommand="rptImages_ItemCommand"><ItemTemplate><li> <asp:LinkButton runat="server" ID="lbFull"><asp:Image runat="server" ID="imgThumb" Width="95px" Height="67px" /></asp:LinkButton></li></ItemTemplate></asp:Repeater></ul></div>
Here is the cs for the ImageLightboxCarousel user control:
using System;
using System.Web.UI.WebControls;
using System.Collections.Generic;
using AjaxControlToolkit;
public partial class controls_ImageLightboxCarousel : BaseControl
{
protected controls_ImageGalleryEditor icImageGalleryEditor = new controls_ImageGalleryEditor();
protected int ViewedUserID
{
get
{
return String.IsNullOrWhiteSpace(Request.QueryString["uid"])
? 0
: Convert.ToInt32(Request.QueryString["uid"]);
}
}
protected DBUser ViewedUser = null;
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
if (ViewedUserID < 1)
{
Response.Redirect(ResolveUrl("~/Home.aspx"));
}
ViewedUser = DBUser.GetUserByID(ViewedUserID);
if (Session["ShowEditImageGalleryLightbox"] != null)
{
try
{
bool showEditImageGalleryLightbox = Convert.ToBoolean(Session["ShowEditImageGalleryLightbox"]);
if (showEditImageGalleryLightbox)
{
ModalPopupExtender mpeContainer = Page.Master.Master.FindControl("mpeContainer") as ModalPopupExtender;
Panel pnlContainer = Page.Master.Master.FindControl("pnlContainer") as Panel;
pnlContainer.Controls.Clear();
icImageGalleryEditor = LoadControl("~/controls/ImageGalleryEditor.ascx") as controls_ImageGalleryEditor;
icImageGalleryEditor.ID = "icImageGalleryEditor";
pnlContainer.Controls.Add(icImageGalleryEditor);
mpeContainer.Show();
}
}
catch (Exception ignored) { }
}
return;
}
protected void Page_Load(object sender, EventArgs e)
{
litCarouselID1.Text = "image-gallery-carousel";
litCarouselID2.Text = "image-gallery-carousel";
rptImages.DataSource = ViewedUser.Images;
rptImages.DataBind();
lbEditImageGallery.Visible = (TheUser.ID == ViewedUserID);
return;
}
protected void rptImages_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
RepeaterItem item = e.Item;
if (item.ItemType == ListItemType.Item || item.ItemType == ListItemType.AlternatingItem)
{
DBImage image = item.DataItem as DBImage;
LinkButton lbFull = item.FindControl("lbFull") as LinkButton;
Image imgThumb = item.FindControl("imgThumb") as Image;
lbFull.ToolTip = image.Title;
lbFull.CommandArgument = image.ID.ToString();
imgThumb.ImageUrl = ResolveUrl(String.Format("~/users/{0}/gallery/thumb/{1}", ViewedUser.ID, image.Filename));
imgThumb.AlternateText = image.Title;
}
return;
}
protected void rptImages_ItemCommand(object source, RepeaterCommandEventArgs e)
{
int id = Convert.ToInt32(e.CommandArgument);
DBImage item = new DBImage();
foreach (DBImage image in ViewedUser.Images)
{
if (image.ID == id)
{
item = image;
}
}
ModalPopupExtender mpeContainer = Page.Master.Master.FindControl("mpeContainer") as ModalPopupExtender;
Panel pnlContainer = Page.Master.Master.FindControl("pnlContainer") as Panel;
pnlContainer.Controls.Clear();
Image imgFullImage = new Image();
imgFullImage.ImageUrl = ResolveUrl(String.Format("~/users/{0}/gallery/full/{1}", ViewedUser.ID, item.Filename));
pnlContainer.Controls.Add(imgFullImage);
mpeContainer.Show();
return;
}
protected void lbEditImageGallery_Click(object sender, EventArgs e)
{
ModalPopupExtender mpeContainer = Page.Master.Master.FindControl("mpeContainer") as ModalPopupExtender;
Panel pnlContainer = Page.Master.Master.FindControl("pnlContainer") as Panel;
pnlContainer.Controls.Clear();
icImageGalleryEditor = LoadControl("~/controls/ImageGalleryEditor.ascx") as controls_ImageGalleryEditor;
icImageGalleryEditor.ID = "icImageGalleryEditor";
pnlContainer.Controls.Add(icImageGalleryEditor);
Session["ShowEditImageGalleryLightbox"] = true;
mpeContainer.Show();
return;
}
}Here is the ascx for the ImageGalleryEditor user control:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ImageGalleryEditor.ascx.cs" Inherits="controls_ImageGalleryEditor" %><div id="image-gallery-editor"><h1>Current Gallery Images</h1><div id="images"><asp:Panel runat="server" ID="pnlContainer"><asp:Repeater runat="server" ID="rptImages" onitemdatabound="rptImages_ItemDataBound" OnItemCommand="rptImages_ItemCommand" EnableViewState="true"><ItemTemplate><div class="item"><div class="move"><asp:LinkButton runat="server" ID="lbMoveLeft" ToolTip="Move Left" CssClass="left" /></div><div class="center"><asp:Image runat="server" ID="imgThumb" CssClass="thumb" /><br /><asp:LinkButton runat="server" ID="lbRemove" ToolTip="Remove" CssClass="remove" /></div><div class="move"><asp:LinkButton runat="server" ID="lbMoveRight" ToolTip="Move right" CssClass="right" /></div><div class="clear"><!-- --></div></div></ItemTemplate></asp:Repeater><div class="clear"><!-- --></div></asp:Panel></div><br /><h1>New Gallery Image</h1><asp:FileUpload runat="server" ID="fuImage" /><br />
Title: <asp:TextBox runat="server" ID="txtTitle" /><br /><asp:Button runat="server" ID="btnSave" Text="Save" onclick="btnSave_Click" /><br /><asp:Label runat="server" ID="lblMessage" CssClass="message" /></div>Here is the cs for the ImageGalleryEditor user control:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using AjaxControlToolkit;
public partial class controls_ImageGalleryEditor : BaseControl
{
protected int ViewedUserID
{
get
{
return String.IsNullOrWhiteSpace(Request.QueryString["uid"])
? 0
: Convert.ToInt32(Request.QueryString["uid"]);
}
}
protected DBUser ViewedUser = null;
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
if (ViewedUserID < 1)
{
Response.Redirect(ResolveUrl("~/Home.aspx"));
}
ViewedUser = DBUser.GetUserByID(ViewedUserID);
return;
}
protected void Page_Load(object sender, EventArgs e)
{
lblMessage.Text = String.Empty;
lblMessage.Visible = false;
pnlContainer.Attributes.Add("style", String.Format("width:{0}px;", ViewedUser.Images.Count * 75 * 2));
rptImages.DataSource = ViewedUser.Images;
rptImages.DataBind();
return;
}
protected void rptImages_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
RepeaterItem item = e.Item;
if (item.ItemType == ListItemType.Item || item.ItemType == ListItemType.AlternatingItem)
{
DBImage image = item.DataItem as DBImage;
System.Web.UI.WebControls.Image imgThumb = item.FindControl("imgThumb") as System.Web.UI.WebControls.Image;
LinkButton lbMoveLeft = item.FindControl("lbMoveLeft") as LinkButton;
LinkButton lbMoveRight = item.FindControl("lbMoveRight") as LinkButton;
LinkButton lbRemove = item.FindControl("lbRemove") as LinkButton;
imgThumb.ImageUrl = ResolveUrl(String.Format("~/users/{0}/gallery/thumb/{1}", ViewedUser.ID, image.Filename));
imgThumb.AlternateText = image.Title;
imgThumb.ToolTip = image.Title;
if (item.ItemIndex == 0)
{
lbMoveLeft.Visible = false;
}
else
{
lbMoveLeft.Visible = true;
lbMoveLeft.CommandName = "left";
lbMoveLeft.CommandArgument = image.ID.ToString();
}
if (item.ItemIndex == (TheUser.Images.Count - 1))
{
lbMoveRight.Visible = false;
}
else
{
lbMoveRight.Visible = true;
lbMoveRight.CommandName = "right";
lbMoveRight.CommandArgument = image.ID.ToString();
}
lbRemove.CommandName = "remove";
lbRemove.CommandArgument = image.ID.ToString();
}
return;
}
protected void rptImages_ItemCommand(object source, RepeaterCommandEventArgs e)
{
string command = e.CommandName.ToLower();
int imageID = Convert.ToInt32(e.CommandArgument);
switch (command)
{
case "left":
{
ViewedUser.DecreaseImageDisplayOrder(imageID);
break;
}
case "right":
{
ViewedUser.IncreaseImageDisplayOrder(imageID);
break;
}
case "remove":
{
DBImage image = DBImage.GetImageByID(imageID);
string virtualThumb = String.Format("~/users/{0}/gallery/thumb/{1}", ViewedUser.ID, image.Filename);
string virtualFull = String.Format("~/users/{0}/gallery/full/{1}", ViewedUser.ID, image.Filename);
string physicalThumb = Server.MapPath(virtualThumb);
string physicalFull = Server.MapPath(virtualFull);
File.Delete(physicalThumb);
File.Delete(physicalFull);
ViewedUser.RemoveImage(imageID);
break;
}
}
pnlContainer.Attributes.Add("style", String.Format("width:{0}px;", ViewedUser.Images.Count * 75 * 1.9));
rptImages.DataSource = ViewedUser.Images;
rptImages.DataBind();
return;
}
protected void btnSave_Click(object sender, EventArgs e)
{
string title = txtTitle.Text.Trim();
if (String.IsNullOrWhiteSpace(title))
{
lblMessage.Text = "Gallery image title required";
lblMessage.Visible = true;
return;
}
if (!fuImage.HasFile)
{
lblMessage.Text = "no file provided";
lblMessage.Visible = true;
return;
}
string filename = fuImage.PostedFile.FileName;
if ((Path.GetExtension(filename) != ".jpeg") &&
(Path.GetExtension(filename) != ".jpg"))
{
lblMessage.Text = "image must be a JPG/JPEG";
lblMessage.Visible = true;
return;
}
if (fuImage.PostedFile.ContentLength > 1048576)
{
lblMessage.Text = "max file size is 1MB";
lblMessage.Visible = true;
return;
}
Bitmap full = new Bitmap(fuImage.PostedFile.InputStream);
if ((full.Width > 800) || (full.Height > 600))
{
lblMessage.Text = "image must be at most 800 pixels wide and 600 pixels high";
lblMessage.Visible = true;
return;
}
else if ((full.Width < 150) || (full.Height < 200))
{
lblMessage.Text = "image must be at last 150 pixels wide and 200 pixels high";
lblMessage.Visible = true;
return;
}
string fullVirtualFilename = String.Format("~/users/{0}/gallery/full/{1}", ViewedUser.ID, filename);
string fullPhysicalFilename = Server.MapPath(fullVirtualFilename);
if(File.Exists(fullPhysicalFilename))
{
lblMessage.Text = "the image filename already exists";
lblMessage.Visible = true;
return;
}
string thumbVirtualFilename = String.Format("~/users/{0}/gallery/thumb/{1}", ViewedUser.ID, filename);
string thumbPhysicalFilename = Server.MapPath(thumbVirtualFilename);
Bitmap thumb = new Bitmap(95, 67);
Graphics thumbGraphics = Graphics.FromImage(thumb);
thumbGraphics.Clear(Color.Transparent);
thumbGraphics.SmoothingMode = SmoothingMode.AntiAlias;
thumbGraphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
int thumbWidth = 0;
int thumbHeight = 0;
int left = 0;
int top = 0;
if (full.Width == full.Height)
{
thumbWidth = 67;
thumbHeight = 67;
left = (95 - 67) / 2;
}
else if (full.Width < full.Height) // portait
{
thumbWidth = 67 * full.Width / full.Height;
thumbHeight = 67;
left = (95 - thumbWidth) / 2;
}
else // landscape
{
thumbWidth = 95;
thumbHeight = full.Height * 95 / full.Width;
top = (67 - thumbHeight) / 2;
}
try
{
thumbGraphics.DrawImage(full, left, top, thumbWidth, thumbHeight);
fuImage.SaveAs(fullPhysicalFilename);
thumb.Save(thumbPhysicalFilename, ImageFormat.Png);
DBImage.Add(ViewedUser.ID, filename, title);
}
catch (Exception ignored)
{
if (File.Exists(fullPhysicalFilename))
{
File.Delete(fullPhysicalFilename);
}
if (File.Exists(thumbPhysicalFilename))
{
File.Delete(thumbPhysicalFilename);
}
lblMessage.Text = "upload error - please try again";
lblMessage.Visible = true;
return;
}
txtTitle.Text = String.Empty;
pnlContainer.Attributes.Add("style", String.Format("width:{0}px;", ViewedUser.Images.Count * 75 * 1.9));
rptImages.DataSource = ViewedUser.Images;
rptImages.DataBind();
return;
}
}
Can someone help me out?
Thanks in advance!
Orion