Image Gallery, page postback

3 posts, 0 answers
  1. Murat Co
    Murat Co avatar
    4 posts
    Member since:
    Jul 2009

    Posted 06 Aug 2009 Link to this post

    hi...
    i  have a problem with Rad rotator (image gallery).
    When i click an image, at first the page post back and then the image is seen above.
    But in your example when i click the image, image is seen above without page doesn't  post back.

    the same thing happens when i click "ok" button for update the image's detail.

    the client side code: 
    <%@ Page Title="" Language="C#" MasterPageFile="homepage.master" AutoEventWireup="true" CodeFile="photo.aspx.cs" Inherits="pages_photo" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">  
     
    <link type="text/css" rel="Stylesheet" href="../ClientFiles/css/gallery.css" /> 
     
    <style type="text/css">  
     
    .itemTemplate  
     
    {  
     
    text-align:center;  
     
    padding:20px;  
     
    border: solid 1px #dddddd !important;  
     
    }  
     
    </style> 
     
     
    </asp:Content> 
     
     
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">  
    <table width="100%" cellpadding="0" cellspacing="0">  
    <tr> 
                <td> 
                    <table width="100%">  
                        <tr> 
                            <td> 
                                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="LoadingPanel1">  
                                    <AjaxSettings> 
                                        <telerik:AjaxSetting AjaxControlID="thumbRotator">  
                                            <UpdatedControls> 
                                                <telerik:AjaxUpdatedControl ControlID="imagePreview" /> 
                                                <telerik:AjaxUpdatedControl ControlID="detailsPanel" /> 
                                            </UpdatedControls> 
                                        </telerik:AjaxSetting> 
                                        <telerik:AjaxSetting AjaxControlID="UpdateButton">  
                                            <UpdatedControls> 
                                                <telerik:AjaxUpdatedControl ControlID="detailsPanel" /> 
                                            </UpdatedControls> 
                                        </telerik:AjaxSetting> 
                                    </AjaxSettings> 
                                </telerik:RadAjaxManager> 
                                <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Skin="Default" Transparency="30" 
                                    BackColor="#E0E0E0">  
                                    <img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
                                    alt="Loading..." style="border: 0;" /> 
                                </telerik:RadAjaxLoadingPanel> 
                                <table id="tblGallery" width="683" cellpadding="0" cellspacing="0" border="0" runat="server" > 
                                    <tr> 
                                        <%--<td style="height: 22px">  
                                            <img src="../ClientFiles/resimler/imagegallery/White.gif" height="22" width="60" alt="" style="float: left;" /> 
                                        </td>--%> 
                                        <td style="height: 22px">  
                                            <img src="../ClientFiles/resimler/imagegallery/cornerLeftTop.gif" height="22" width="50" alt="" style="float: left;" /> 
                                        </td> 
                                        <td style="height: 22px">  
                                            <img src="../ClientFiles/resimler/imagegallery/topLeft.gif" height="22" width="292" alt="" style="float: left;" /> 
                                        </td> 
                                        <td style="height: 22px">  
                                            <img src="../ClientFiles/resimler/imagegallery/topRight.gif" height="22" width="280" alt="" style="float: left;" /> 
                                        </td> 
                                        <td style="height: 22px">  
                                            <img src="../ClientFiles/resimler/imagegallery/cornerRightTop.gif" height="22" width="62" alt="" style="float: left;" /> 
                                        </td> 
                                    </tr> 
                                    <tr style="vertical-align:middle;">  
                                        <%--<td> 
                                            <img src="../ClientFiles/resimler/imagegallery/whiteMiddle.gif" height="243" width="60" alt="" style="float: left;" /> 
                                        </td>--%> 
                                        <td> 
                                            <img src="../ClientFiles/resimler/imagegallery/leftFrame.gif" height="243" width="50" alt="" style="float: left;" /> 
                                        </td> 
                                        <td class="previewPane" style="vertical-align:top;">  
                                            <div style="margin-top: 20px">  
                                                <%--<asp:Image ID="imagePreview2" runat="server" ImageUrl="../ClientFiles/resimler/imagegallery/spacer.gif" Height="192px" 
                                                    Width="272px" AlternateText="preview" BorderWidth="0">  
                                                </asp:Image>--%> 
                                                <img id="imagePreview" name="imagePreview" runat="server" onclick="window.open(imagePreview.src);" src="../ClientFiles/resimler/imagegallery/spacer.gif" height="192" 
                                                    width="272" title="preview" style="border-width:0"/>  
                                            </div> 
                                        </td> 
                                        <td class="infoPane" style="vertical-align:top;">  
                                            <div class="infoPaneBg" runat="server" id="detailsPanel">  
                                                <div class="imageDetailsHeader">  
                                                    Resim detayları: </div> 
                                                <div id="viewPanel">  
                                                    <div class="details">  
                                                        <input type="hidden" ID='hdnImageID' runat="server" /> 
                                                    </div> 
                                                    <div class="details">  
                                                        <strong>İsim:</strong>&nbsp;  
                                                        <asp:Label ID="labelImageName" runat="server"></asp:Label> 
                                                    </div> 
                                                    <div class="details">  
                                                        <strong>Resim Adı:</strong>&nbsp;  
                                                        <asp:Label ID="labelImageKeywords" runat="server"></asp:Label> 
                                                    </div> 
                                                    <div class="details">  
                                                        <strong>Açıklama:</strong>&nbsp;  
                                                        <asp:Label ID="labelImageComments" runat="server"></asp:Label> 
                                                    </div> 
                                                    <div id="divUpdateButton" class="details" style="margin-top: 5px; margin-left: 28px" runat="server">  
                                                        <href="javascript:buttonEditClicked();">  
                                                            <img style="border-top-style: none; border-right-style: none; border-left-style: none;  
                                                                border-bottom-style: none" height="21" alt="" src="../ClientFiles/resimler/imagegallery/editBtn.gif" width="60" /></a>  
                                                    </div> 
                                                </div> 
                                                <div style="display: none" id="editPanel">  
                                                    <div class="details">  
                                                        <strong>İsim:</strong>&nbsp;  
                                                        <asp:TextBox ID="textImageName" runat="server" CssClass="detailsTxtBox"></asp:TextBox> 
                                                    </div> 
                                                    <div class="details">  
                                                        <strong>Resim Adı:</strong>&nbsp;  
                                                        <asp:TextBox ID="textImageKeywords" runat="server" CssClass="detailsTxtBox"></asp:TextBox> 
                                                    </div> 
                                                    <div class="details">  
                                                        <strong>Açıklama:</strong>&nbsp;  
                                                        <asp:TextBox ID="textImageComments" runat="server" CssClass="detailsTxtBox"></asp:TextBox> 
                                                    </div> 
                                                    <div class="details">  
                                                        &nbsp;<asp:LinkButton CssClass="editBtns" ID="UpdateButton" runat="Server" OnClick="UpdateButton_Click">OK</asp:LinkButton> <class="editBtns" 
                                                            href="javascript:buttonCancelClicked();">Cancel</a> 
                                                    </div> 
                                                </div> 
                                            </div> 
                                        </td> 
                                        <td> 
                                            <img src="../ClientFiles/resimler/imagegallery/rightFrame.gif" height="243" width="62" alt="" style="float: left;" /> 
                                        </td> 
                                    </tr> 
                                    <tr> 
                                        <%--<td> 
                                            <img src="../ClientFiles/resimler/imagegallery/whiteShadow.gif" height="117" width="60" alt="" /> 
                                        </td>--%> 
                                        <td> 
                                            <img src="../ClientFiles/resimler/imagegallery/left.gif" id="img_left" height="117" width="50" alt="" style="cursor: pointer" /> 
                                        </td> 
                                        <td colspan="2" class="thumbsViewer">  
                                            <telerik:RadRotator ID="thumbRotator" runat="server" RotatorType="ButtonsOver" Width="572" 
                                                Height="118px" ItemHeight="118" ItemWidth="145" FrameDuration="1"   
                                                ScrollDirection="Left,Right" OnItemClick="ShowImage">  
                                                <ItemTemplate> 
                                                    <div class="itemTemplate">  
                                                        <img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' width='90px' alt='gallery image' 
                                                            class="RotatorImage" /><br /> 
                                                        <%# DataBinder.Eval(Container.DataItem, "Name")%> 
                                                    </div> 
                                                </ItemTemplate> 
                                                <ControlButtons  LeftButtonID="img_left" RightButtonID="img_right" /> 
                                            </telerik:RadRotator> 
                                        </td> 
                                        <td> 
                                            <img src="../ClientFiles/resimler/imagegallery/right.gif" id="img_right" height="117" width="62" alt="" style="cursor: pointer" /> 
                                        </td> 
                                    </tr> 
                                </table> 
                                <telerik:RadCodeBlock ID="rcb1" runat="Server">  
                                    <script type="text/javascript">  
                                        function buttonEditClicked()  
                                        {  
                                            var panelViewImage = $get("viewPanel");  
                                            panelViewImage.style.display = "none";  
                                            var panelEditImage = $get("editPanel");  
                                            panelEditImage.style.display = "block";  
                                        }  
                                        function buttonCancelClicked()  
                                        {  
                                            var panelViewImage = $get("viewPanel");  
                                            panelViewImage.style.display = "block";  
                                            var panelEditImage = $get("editPanel");  
                                            panelEditImage.style.display = "none";  
                                        }  
                                    </script> 
                                </telerik:RadCodeBlock> 
                                <%--<div id="divPagePhoto" runat="server"></div>--%> 
                            </td> 
                        </tr> 
                    </table> 
                </td> 
            </tr> 
    </table> 
    </asp:Content> 
     
  2. Murat Co
    Murat Co avatar
    4 posts
    Member since:
    Jul 2009

    Posted 06 Aug 2009 Link to this post

    using System;  
    using System.Collections.Generic;  
    using System.Data;  
    using System.Linq;  
    using System.Web;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using Telerik.Web.UI;  
     
    public partial class pages_photo : System.Web.UI.Page  
    {  
        ........  
          
        [Serializable()]  
        private struct fileInfo  
        {  
            public string filename;  
            public string ID;  
            public string name;  
            public string alttext;  
            public string description;  
        }  
     
        private List<fileInfo> imagesArray  
        {  
            get { return (List<fileInfo>)ViewState["imagesArray"]; }  
            set { ViewState["imagesArray"] = value; }  
        }  
     
        protected void Page_Load(object sender, EventArgs e)  
        {  
            #region Değişkenler  
             ......  
            #endregion  
     
     
            #region Kullanıcı Kontrol  
     
            .....  
     
            if (.......)  
            {  
                divUpdateButton.Visible = false;  
            }  
     
            #endregion  
     
            if(......)  
            {  
                tblGallery.Visible = false;  
            }  
     
            if (!IsPostBack)  
            {  
                if (strAlbumID != "")  
                {  
                    ResimleriYukle(strAlbumID);  
                }  
            }  
        }  
    protected void ResimleriYukle(string pstrAlbumID)  
        {  
            string strImageSQL = " SELECT * FROM .....";  
     
            DataTable dtImage = .............  
     
            imagesArray = new List<fileInfo>();  
     
            if (dtImage.Rows.Count > 0)  
            {  
                for (int i = 0; i < dtImage.Rows.Count; i++)  
                {  
                    fileInfo fInfo = new fileInfo();  
                    fInfo.name = dtImage.Rows[i]["ImageName"].ToString(); //"Images/" + fileName.Substring(fileName.LastIndexOf("\\") + 1);  
                    fInfo.ID = dtImage.Rows[i]["ID"].ToString();  
                    fInfo.filename = dtImage.Rows[i]["Path"].ToString();  
                    fInfo.alttext = dtImage.Rows[i]["AltText"].ToString();  
                    fInfo.description = dtImage.Rows[i]["Description"].ToString();  
                    imagesArray.Add(fInfo);  
                }  
            }  
     
            RebindRotator();  
        }  
    private fileInfo FindFileInfo(string filePath)  
        {  
            string fileName = filePath.Replace(".jpg", "s.jpg");  
            foreach (fileInfo tempInfo in imagesArray)  
            {  
                if (tempInfo.filename == fileName)  
                    return tempInfo;  
            }  
            return new fileInfo();  
        }  
     
        private void RebindRotator()  
        {  
            DataTable rotatorData = new DataTable();  
            rotatorData.Columns.Add("Image");  
            rotatorData.Columns.Add("Name");  
            foreach (fileInfo tempInfo in imagesArray)  
            {  
                rotatorData.Rows.Add(new string[] { tempInfo.filename, tempInfo.name });  
            }  
            thumbRotator.DataSource = rotatorData;  
            thumbRotator.DataBind();  
        }  
     
        protected void ShowImage(object sender, RadRotatorEventArgs e)  
        {  
            fileInfo fInfo = imagesArray[e.Item.Index];  
            //imagePreview.ImageUrl = fInfo.filename.Replace("s.jpg", ".jpg");  
            imagePreview.Src = fInfo.filename.Replace("s.jpg", ".jpg");  
            //set the image information  
            labelImageComments.Text = fInfo.description;  
            labelImageKeywords.Text = fInfo.alttext;  
            labelImageName.Text = fInfo.name;  
            hdnImageID.Value = fInfo.ID;  
            textImageComments.Text = fInfo.description;  
            textImageKeywords.Text = fInfo.alttext;  
            textImageName.Text = fInfo.name;  
        }  
    protected void UpdateButton_Click(object sender, EventArgs e)  
        {  
            if (imagePreview.Src != "../spacer.gif")  
            {  
                //fileInfo fInfo = FindFileInfo(imagePreview.ImageUrl);  
                fileInfo fInfo = FindFileInfo(imagePreview.Src);  
                int index = imagesArray.IndexOf(fInfo);  
                imagesArray.Remove(fInfo);  
                fInfo.name = textImageName.Text;  
                fInfo.ID = hdnImageID.Value;  
                fInfo.alttext = textImageKeywords.Text;  
                fInfo.description = textImageComments.Text;  
                labelImageComments.Text = fInfo.description;  
                labelImageKeywords.Text = fInfo.alttext;  
                labelImageName.Text = fInfo.name;  
                imagesArray.Insert(index, fInfo);  
                RebindRotator();  
     
                string strUPDATESQL = " UPDATE ... SET ImageName='" + fInfo.name + "',AltText='" + fInfo.alttext + "',Description='" + fInfo.description + "' WHERE ID='" + fInfo.ID + "' ";  
                  
                .... ..Update database process....  
    }  
        } 
    and this is server side code:

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 07 Aug 2009 Link to this post

    Hello Murat,

    I prepared a very simple application by using the provided code but I was not able to reproduce any problem. Could you please rework the attached project and send it back? I will check it and do my best to provide a working solution.

    Best wishes,
    Fiko
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top