Asked by:
Repeater ItemCommand not firing from within ModalPopupExtender

Question
-
User1329262882 posted
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
Wednesday, June 5, 2013 6:58 PM
All replies
-
User555306248 posted
Hi, Please refer this
http://www.asp.net/ajax/tutorials/using-modalpopup-with-a-repeater-control-cs
http://forums.asp.net/t/1468195.aspx/1
http://forums.asp.net/t/1028539.aspx/1
Wednesday, June 5, 2013 11:39 PM -
User1329262882 posted
@chetan : unfortunately, those are all examples of the means of popping up the MPE is from within a repeater. In my case, it's the other way around - I am dynamically adding a user control that contains a repeater to a placeholder panel in the MPE. does that make sense?
Thursday, June 6, 2013 6:28 PM -
User-173385315 posted
Hi,
Not sure if you resolved it already but still providing a solution for anyone facing the same problem.
I used confirmbuttonextender and modalpopupextender together. the targetcontrolid for confirmbuttonextender and modalpopupextender is the button in repeater control.
I would need to dig into why we need both to make it work for repeater.
The code is as folows:
<asp:Repeater ID="rptComponentGroup" runat="server"> <HeaderTemplate> <table class="maint-component-group"> <thead> <tr> <th scope="col" class="maint-comgroup-description"><%#ComponentGroupColumnHeader%></th> <th scope="col" class="maint-comgroup-type"><%#ComponentGroupTypeColumnHeader%></th> <th scope="col" class="maint-settings"><%#SettingsColumnHeader%></th> <th scope="col" class="maint-edit"><%#EditColumnHeader%></th> <th scope="col" class="maint-delete"><%#DeleteColumnHeader%></th> </tr> </thead> </HeaderTemplate> <ItemTemplate> <tbody> <tr> <td class="maint-voucher-description"> <%# DataBinder.Eval(Container.DataItem, "Description").ToString().Trim()%> </td> <td class="maint-voucher-type"><%# DataBinder.Eval(Container.DataItem, "ComponentGroupType").ToString().Trim()%></td> <td class="maint-setting"> <asp:Button ID="btnSettingLink" runat="server" Text='<%# SettingButtonText %>' CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ComponentGroupId").ToString().Trim() %>' CommandName="Setting" /> </td> <td class="maint-edit"> <asp:Button ID="btnEditLink" runat="server" Text='<%# EditButtonText %>' CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ComponentGroupId").ToString().Trim() %>' CommandName="Edit" /> </td> <td class="maint-delete"> <asp:Button ID="btnDeleteLink" runat="server" Text='<%# DeleteButtonText %>' CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ComponentGroupId").ToString().Trim() %>' CommandName="Delete" /> <ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server" TargetControlID="btnDeleteLink" DisplayModalPopupID="ModalPopupExtender1" /> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnDeleteLink" PopupControlID="PNL" OkControlID="btnPanelOK" RepositionMode="RepositionOnWindowScroll" DropShadow="True" CancelControlID="btnPanelCancel" BackgroundCssClass="modalBackground" /> <asp:Panel ID="PNL" runat="server" style="display:none; width:200px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;"> <asp:Literal Text="Are you sure you want to delete the record?" runat="server" ID="ConfirmBoxText"></asp:Literal> <br /><br /> <div style="text-align:right;"> <asp:Button ID="btnPanelOK" runat="server" Text="OK" /> <asp:Button ID="btnPanelCancel" runat="server" Text="Cancel" /> </div> </asp:Panel> </td> </tr> </tbody> </ItemTemplate> <AlternatingItemTemplate> <tbody> <tr> <td class="maint-voucher-description"> <%# DataBinder.Eval(Container.DataItem, "Description").ToString().Trim()%> </td> <td class="maint-voucher-type"><%# DataBinder.Eval(Container.DataItem, "ComponentGroupType").ToString().Trim()%></td> <td class="maint-setting"> <asp:Button ID="btnSettingLink" runat="server" Text='<%# SettingButtonText %>' CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ComponentGroupId").ToString().Trim() %>' CommandName="Setting" /> </td> <td class="maint-edit"> <asp:Button ID="btnEditLink" runat="server" Text='<%# EditButtonText %>' CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ComponentGroupId").ToString().Trim() %>' CommandName="Edit" /> </td> <td class="maint-delete"> <asp:Button ID="btnDeleteLink" runat="server" Text='<%# DeleteButtonText %>' CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ComponentGroupId").ToString().Trim() %>' CommandName="Delete" /> <ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server" TargetControlID="btnDeleteLink" DisplayModalPopupID="ModalPopupExtender1" /> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnDeleteLink" PopupControlID="PNL" OkControlID="btnPanelOK" RepositionMode="RepositionOnWindowScroll" DropShadow="True" CancelControlID="btnPanelCancel" BackgroundCssClass="modalBackground" /> <asp:Panel ID="PNL" runat="server" style="display:none; width:200px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;"> <asp:Literal Text="Are you sure you want to delete the record?" runat="server" ID="ConfirmBoxText"></asp:Literal> <br /><br /> <div style="text-align:right;"> <asp:Button ID="btnPanelOK" runat="server" Text="OK" /> <asp:Button ID="btnPanelCancel" runat="server" Text="Cancel" /> </div> </asp:Panel> </td> </tr> </tbody> </AlternatingItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater>
Wednesday, November 20, 2013 10:34 AM