Can't access image control defined in the HTML, in the code behind C# file

Question

I'm busy with a project, and I'm trying to get an image to change when a button is clicked. The problem is that I cannot call the image control in the code section. How can I call the image control?

I have tried adding the control to the designer.cs file but I cannot access the UI control, I have also tried many other ways but it hasn't solved the problem.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using INF3014F_BMW_TEAM16.Models;
using System.Web.ModelBinding;



namespace INF3014F_BMW_TEAM16
{
    public partial class ProductDetails : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

    }

    public IQueryable<Product> GetProduct(
                    [QueryString("ProductID")] int? productId, [RouteData] string productName)

    {
        var _db = new INF3014F_BMW_TEAM16.Models.ProductContext();
        IQueryable<Product> query = _db.Products;
        if (productId.HasValue && productId > 0)
        {
            query = query.Where(p => p.ProductID == productId);
        }
        else if (!String.IsNullOrEmpty(productName))
        {
              query = query.Where(p =>
              String.Compare(p.ProductName, productName) == 0);
        }
        else
        {
            query = null;
        }
        return query;
    }

    protected void RedBtn_Click(object sender, EventArgs e)
    {
        Image1.ImageUrl = "/Catalog/Images/1hacth3red.jpg";            
    }

<asp:FormView ID="productDetail" runat="server" ItemType="INF3014F_BMW_TEAM16.Models.Product" SelectMethod ="GetProduct" RenderOuterTable="false" OnPageIndexChanging="productDetail_PageIndexChanging">
    <ItemTemplate>
        <div>
            <h1><%#:Item.ProductName %></h1>
        </div>
        <br />
        <table>
            <tr>
                <td>             

                        <Image id="Image1" src="/Catalog/Images/<%#:Item.ImagePatheWhite %>" style="border: solid; height: 300px" alt="<%#:Item.ProductName %>" runat ="server" />


                </td>
                <td>&nbsp;</td>  
                <td style="vertical-align: top; text-align:left;">
                    <b>Description:</b><br /><%#:Item.Description %><br /><span>
                     <b>Price:</b>&nbsp;<%#: String.Format("{0:c}", Item.UnitPrice) %></span><br /><span>
                     <b>Product Number:</b>&nbsp;<%#:Item.ProductID %></span><br />
                    <br />
                    <asp:Button ID="WhiteBtn" runat="server" Text="White" BackColor ="White" OnClick ="WhiteBtn_Click" />
                   <<asp:Button ID="BlackBtn" runat="server" Text="Black" BackColor ="Black" />
                    <asp:Button ID="RedBtn" runat="server" Text="Red" BackColor ="Red" OnClick ="RedBtn_Click" />
                    <br />
                      <a href="/AddToCart.aspx?productID=<%#:Item.ProductID %>">               
                                    <span class="ProductListItem">
                                        <b>Add To Cart<b>
                                    </span>           
                                </a>
                    <br />

                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:FormView>

Answer 1

User server control:

<asp:Image ID="Image1" runat="server" ImageUrl="/Catalog/Images/<%# Item.ImagePatheWhite %>" AlternateText="<%#:Item.ProductName %>" BorderColor="Black" Height="300px" />

<Image> tag does not exists,You have to use tag and use attribute runat="server"

<img alt="" src="" />

Answer 2

I think it should be:

<asp:Image id="Image1" runat="server" ... etc./>

and just set the ImageUrl server-side.