如何从 CodeBehind 访问 aspx 页面中的控件

Question

my aim is the following:

1. Put some ImageButtons on an aspx page (with masterpage)
2. Each ImageButton is actually a PlaceHolder, where I want to load an Image. I assume to have, at start, no ImageButton.ImageUrl.
3. When clicking on an ImageButton, I want the ImageButton to display an image (the final goal is to load it from local machine, but, for now I use a fixed image)

My idea is to change the ImageButton.imageUrl after a ImageButtonClick.

The Aspx page has an Asp:Panel with ID=FOGLIO, and contains an ImageButton with ID=HEADERLOGO.

I tried to google all related topics, but my code, actually refuses to work. Some basic mistake may be, because none of the controls in the page is retrieved, as evidenced by a Response.Write that I have put during a PostBack. I don't see anyway to do what I want. Does anybody have any hint?

Thanks in advance.

Aspx markup and code behind follow.

    <%@ Page Title="" Language="C#" MasterPageFile="Site.Master" AutoEventWireup="true" 
        CodeBehind="Images.aspx.cs" Inherits="Monitas.Images" %>
          <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
            <style media="all">

             .Sheet {position: relative; left: 15%; top:15%; background: white; width: 800px; 
                        height: 900px; border:3px solid #000;}

             .HeaderLogo {position: relative; background: yellow; width:240px; height:100px; 
                        left: 500px; top: 1px;  border:1px solid #000;}

           </style>

         </asp:Content>

       <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

      <asp:Panel ID="FOGLIO" class="Sheet" runat="server">

          <asp:ImageButton class="HeaderLogo" ID="HEADERLOGO" alternateText="Header Logo" 
                  runat="server" ImageAlign="Middle" OnClick="OnImageHeaderClick" />

      </asp:Panel>

     </asp:Content>

The code behind:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    using static Monitas.GlobalVars;

    namespace Monitas
    {
      public partial class Images : System.Web.UI.Page
     {
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.IsPostBack) // in a PostBack, following the OnImageHeaderClick
        {
            Panel p = (Panel)FindControl("FOGLIO");
            Response.Write("<<" + p + ">>"); // <<<< always null
            if (p!=null)
            {
                ImageButton img = (ImageButton)FindControl("HEADERLOGO");
                Response.Write("<<" + img + ">>");
                if (img!=null)
                    img.ImageUrl=HeadImage;
            }
        }

    }

    protected void OnImageHeaderClick(object sender, ImageClickEventArgs e)
    {
        HeadImage = Server.MapPath("../Monitas/Images/FooterLogo.png"); // use another image 
                after clicking on the previous
    }


    }
  }

Answer 1

Barring compiler errors, all controls with runat="server" and an ID attribute, and which aren't nested within a data-bound control, will be available as fields in the code-behind.

In this case, you should be able to reference HEADERLOGO directly from your code-behind, without having to resort to FindControl .

If all else fails, the sender parameter of the OnImageHeaderClick event handler will also be a reference to the image button.

It's also worth pointing out that you change the HeadImage property after setting the ImageUrl property. The update will not be visible until you click on the image button a second time.

And finally, Server.MapPath will return the physical path of the file on your server. That won't work as an image URL: the user browsing your site almost certainly won't have an image file in the same path on their computer; and even if they did, it's almost certainly not the same image as the one on your server; and even if it was, a website cannot reference images stored on the local filesystem.

protected void OnImageHeaderClick(object sender, ImageClickEventArgs e)
{
    HeadImage = "~/Monitas/Images/FooterLogo.png";
    
    // If you want the image URL to be updated immediately:
    HEADERLOGO.ImageUrl = HeadImage;
}

Answer 2

Yes, it probably better to use a listview (my favorte), but say lets use a grid view.

We have this grid view with some columns, and a image button:

eg this:

    <div style="padding:30px;width:50%">

            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                DataKeyNames="ID" CssClass="table" >
                <Columns>
                    <asp:BoundField DataField="Fighter" HeaderText="Fighter"  />
                    <asp:BoundField DataField="Engine" HeaderText="Engine"  />
                    <asp:BoundField DataField="Thrust" HeaderText="Thrust"  />
                    <asp:BoundField DataField="Description" HeaderText="Description" />

                    <asp:TemplateField HeaderText="View">
                        <ItemTemplate>
                        <asp:ImageButton ID="btnImage" runat="server" Height="68px" Width="149px"
                            OnClientClick ="popimage(this);return false"
                            ImageUrl = '<%# Eval("ImagePath") %>' /> 
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
    </div>

Now our data is this:

And code to load is this:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadGrid();
    }

    void LoadGrid()
    {
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            using (SqlCommand cmdSQL = new SqlCommand("SELECT * from Fighters", conn))
            {
                conn.Open();
                DataTable rstData = new DataTable();
                rstData.Load(cmdSQL.ExecuteReader());
                GridView1.DataSource = rstData;
                GridView1.DataBind();
            }
        }
    }

And now we have this:

Now, I have jQuery, but we COULD add some code to click on a image, and dispay it say in a popup - much larger.

So on the image button, we have a click event. We stuff the given row click (url) in to a MUCH larger image control we have hidden on the page, and then call jQuery.UI "dialog' to display that image in a dialog.

So, lets add the click event - and WE CAN do this 100% client side!!

So, we add a div to hold the image, and this code:

                <div id="imagepop" style="display:none;text-align:center;height:80%">
                    <asp:Image ID="Image1" runat="server" ClientIDMode="Static"
                    style="height:96%"/>
                </div>

            <script>
                function popimage(btn) {
                    FromImage = $(btn)
                    ToImage = $("#Image1")
                    ToImage.attr("src", FromImage.attr("src"))

                    pHeight = ($(window).height() * 0.96)
                    pWidth = ($(window).width() * 0.80)

                    myDialog = $("#imagepop");                    
                    myDialog.dialog({
                        title: "Fighter",
                        modal: true,
                        height: pHeight,
                        width: pWidth,
                        closeText: "",
                        show : "fade",
                        buttons: {

                            Ok: function () {
                                myDialog.dialog("close")
                            }
                        }
                    })
                }
            </script>

So, now I click on the image in the row, and we have this:

So, use a grid or listview - even a repeater. Place one image control, and repeat it for the many pictures you want to display.

Fyi: I assume both jquery and jquery.ui for the dialog pop up.