locked
Passing value of Image control with value of label controls on that image control to another image control in another web page RRS feed

  • Question

  • User-1994446809 posted

    Hello Forum,

    How can I pass every control that is on image control to another image control in another web form?

    For example, I have some labels and child image controls which are placed on a parent image control, and I want to click a button and pass the parent image with the labels and child image controls to another web page without affecting the positions, size, fonts and color of the controls.

    If I set the label fore color and font-size, the event should not affect it when passing to another web form.

    I really do not know how to it works, which is why I seek for help in this forum, as I have checked online for guidance on this to no avail. So I tried out something if I will be able to get it but it is no way near. May I please ask for help on this?

    HTML (Page 1)

    <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Temporary ID Card</title>
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' />
        <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      
        <!-- Bootstrap CSS CDN -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
        <!-- Our Custom CSS -->
        <!-- <link rel="stylesheet" href="style.css"/>-->
        <link href="css2/style2.css" rel="stylesheet" />
        <link rel="stylesheet" href="style2.css" />
        <!-- Scrollbar Custom CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
        <!-- Font Awesome JS -->
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
        <style type="text/css">
            .wrapper {
                display: flex;
                width: 100%;
                align-items: stretch;
            }
            #midcont {
                ;
                background-color: #ffffff;
                border: 1px solid #ccc;
            }
             .child {
                ;
                width: 100%;
                height: auto;
                padding: .5rem;
                border: 1px solid #ccc;
            }
             .child2{
                ;
                width: 100%;
                height: auto;
                padding: .5rem;
                border: 1px solid #ccc;
             }
             #Image1 {
                 padding: .5rem;
                 ;
             }
              #chill {
                ;
                right: 39%;
                top: 35%;
                cursor: move;
                background-color: #fafafa;
                border: solid 1px #00003D;
                font-size: 24px;
                text-align: center;
                backface-visibility:hidden;
                background:unset;
                height: 110px;
                width:100px
            }
              #Image2 {
                ;
                right: 70%;
                top: 8%;
                cursor: move;
                background-color: #fafafa;
                border: solid 1px #00003D;
                font-size: 24px;
                text-align: center;
                backface-visibility:hidden;
                background:unset;
              }
              #nann {
                ;
                right: 60%;
                top: 60%;
                cursor: move;
                text-align: center;
                backface-visibility:hidden;
                background:unset;
            }
              #organ {
                ;
                right: 23%;
                top: 8%;
                cursor: move;
                text-align: center;
                backface-visibility:hidden;
                background:unset;
                height: auto;
                display: flex;
              }
               #post {
                ;
                left: 30%;
                top: 65%;
                cursor: move;
                text-align: center;
                backface-visibility:hidden;
                background:unset;
              }
                #number {
                ;
                left: 43%;
                top: 70%;
                cursor: move;
                text-align: center;
                backface-visibility:hidden;
                background:unset;
              }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
                   <div class="wrapper">
                    <div class="line"></div>
                        <div class="form-horizontal">
                        <div class="col">
                                <div class="child" id="midcont">
                                    <asp:Image ID="Image1" runat="server" width="350px" Height="500px" BorderWidth="1pt" BorderStyle="Solid" />
                                    <div id="child1">
                                        <div id="chill">
                                            <asp:Image ID="Image4" runat="server" BorderStyle="None" Width="100px" Height="110px" />
                                        </div>
                                        <div id="nann" style="right: 35%;">
                                            <asp:Label ID="Label4" runat="server" Text="Samuel Tochi James" Font-Size="9pt" Width="150"></asp:Label>
                                            <script>
                                                function settext(e) {
          
                                                    document.getElementById("<%= Label4.ClientID %>").innerHTML = e.value;
                                                }
                                            </script>
                                        </div>
                                        <div id="organ" style="max-width: 50%;">
                                            <asp:Label ID="orgname" runat="server" Text="COMPANY/ORGANIZATION NAME" Font-Size="9pt"></asp:Label>
                                        </div>
                                         <div id="post">
                                            <asp:Label ID="labelpost" runat="server" Text="Employee/Student Position" Font-Size="9pt"></asp:Label>
                                        </div>
                                        <div id="number">
                                            <asp:Label ID="labelnum" runat="server" Text="ID Number" Font-Size="9pt"></asp:Label>
                                        </div>
                                        <asp:Image ID="Image2" runat="server" BorderStyle="None" Width="40px" Height="40px" onchange="ImagePreview(this);"/>
                                    </div>
                            </div>
                        </div>
                    </div>
              </div>
            <br />
            &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<asp:Button ID="Button1" runat="server" CssClass="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="Pass Data" OnClick="Button1_Click" />
        </form>
    </body>
    </html>

    C# (Page 1)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class Default2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
     
        protected void Button1_Click(object sender, EventArgs e)
        {
            string image = (sender as Button).PostBackUrl;
            Session["Image"] = image;
            Response.Redirect("Page2.aspx");
        }
    }

    HTML (Page 2)

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
           <div class="container-fluid2" style="background-color: #ffffff; width: auto;">
                                <div class="child" id="midcont">
                                    <asp:Image ID="Image1" runat="server" width="350px" Height="500px" BorderWidth="1pt" BorderStyle="Solid" />
                                    </div>
                            </div>
        </form>
    </body>
    </html>

    C# (Page 2)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class AAB : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Session["Image"] != null)
            {
                Image1.ImageUrl = Session["Image"].ToString();
            }
        }
    }

    Monday, October 5, 2020 1:11 PM

Answers

  • User409696431 posted

    It is not advised to store controls in Session.  I doubt you really need to.

    Don't think that, even if you stored an image control, that its string value is its ImageUrl. If you take it's string value it is "System.Web.UI.WebControls.Image".  You'd need to cast the value in session to an Image control, and retrieve it's attributes individually to assign the placeholder image you have in page2.

    Such as:

    Image ImagePassed = (Image)Session["ImageStoredInSession"];
    Image4.ImageUrl = ImagePassed.ImageUrl;
    // and whatever other attributes of the Image control were passed. Note that the CSS you have in page1 that you are using to style the images is not part of the Image Control's attributes.

    And, no, this following code will not get you an image control.  The button is not associated with an image control.

    protected void Button1_Click(object sender, EventArgs e)
        {
            string image = (sender as Button).PostBackUrl; // this is null

    I suspect you just need to pass image ImageUrl values and label Text values to the next page.  It's up to you to put the same controls in the same locations with the same styling to work on the second page, where you then assign the image urls and label text values on page load.

    Example:

    page1.cs
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                Session["Image4URL"] = Image4.ImageUrl;  // add other images and labels with additional session values, or use an array in session
                Response.Redirect("page2.aspx");
            }
    
    page2.cs
    
    protected void Page_Load(object sender, EventArgs e)
            {
                if (Session["Image4URL"] != null)
                {
                    Image4.ImageUrl = Session["Image4URL"].ToString();
                }
    //retrieve the other Session values for other image control URLs or label Texts. }

    It's up to you to do the logic, if there may be different numbers of images or labels, to show or hide them on the second page depending on if the session value for them is null.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 5, 2020 10:04 PM

All replies

  • User409696431 posted

    It is not advised to store controls in Session.  I doubt you really need to.

    Don't think that, even if you stored an image control, that its string value is its ImageUrl. If you take it's string value it is "System.Web.UI.WebControls.Image".  You'd need to cast the value in session to an Image control, and retrieve it's attributes individually to assign the placeholder image you have in page2.

    Such as:

    Image ImagePassed = (Image)Session["ImageStoredInSession"];
    Image4.ImageUrl = ImagePassed.ImageUrl;
    // and whatever other attributes of the Image control were passed. Note that the CSS you have in page1 that you are using to style the images is not part of the Image Control's attributes.

    And, no, this following code will not get you an image control.  The button is not associated with an image control.

    protected void Button1_Click(object sender, EventArgs e)
        {
            string image = (sender as Button).PostBackUrl; // this is null

    I suspect you just need to pass image ImageUrl values and label Text values to the next page.  It's up to you to put the same controls in the same locations with the same styling to work on the second page, where you then assign the image urls and label text values on page load.

    Example:

    page1.cs
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                Session["Image4URL"] = Image4.ImageUrl;  // add other images and labels with additional session values, or use an array in session
                Response.Redirect("page2.aspx");
            }
    
    page2.cs
    
    protected void Page_Load(object sender, EventArgs e)
            {
                if (Session["Image4URL"] != null)
                {
                    Image4.ImageUrl = Session["Image4URL"].ToString();
                }
    //retrieve the other Session values for other image control URLs or label Texts. }

    It's up to you to do the logic, if there may be different numbers of images or labels, to show or hide them on the second page depending on if the session value for them is null.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 5, 2020 10:04 PM
  • User-1994446809 posted

    Hi KathyW,

    Thank you for the knowledge, I really appreciate the effort you put to this and letting me know what I should do. 

    It is not advised to store controls in Session.  I doubt you really need to.

    I see in the code, it's the URL of the image that is stored in Session.

    I suspect you just need to pass image ImageUrl values and label Text values to the next page. 

    Since you suspect that I needed to pass image ImageURL, it appears to me that it's what I want. If I may ask please, is there a standard and correct way to do this besides what the reference you gave me?

    If there's any other ideas, I will really appreciate if you enlighten me more, please.

    Thank you,

    Georgeakpan233

    Tuesday, October 6, 2020 8:42 AM
  • User409696431 posted

    "Since you suspect that I needed to pass image ImageURL, it appears to me that it's what I want. If I may ask please, is there a standard and correct way to do this besides what the reference you gave me?"

    I showed you in my response one way how to do it.  I'm not sure what else you are asking.  There is no "standard" method because each method depends on what your application is doing.

    Since your posted attempt used Session, I assume your application is fine with the fact that this data is temporary, only available to a user going from one page to the other, and if they come back the next day, they won't be able to go to the second page directly and expect anything to show up.

    If your application expects this data to persist for a user over time, a more common scenario is that you'd have a registration method, and store the information in a database, associated with the user, and fetch if from there rather than pass it in session.  Or you could store the information in a cookie - which assumes the user is on the same machine, using the same browser, when they return to the site, and assumes the information stored is not larger than what can be stored in cookies.

    ...And so on.  It's up to you to know if the Session storage method is suitable for your application.

    Tuesday, October 6, 2020 3:13 PM
  • User-1994446809 posted

    Hi KathyW,

    It's up to you to know if the Session storage method is suitable for your application.

    Absolutely. It's now clearer and I completely understand. Thanks a million for this knowledge. I appreciate.

    Georgeakpan233

    Wednesday, October 7, 2020 10:24 AM