How to add image to image button within user controller for asp.net

785 Views Asked by At

I have 2 projects. One is the main webform project and the second is a library project for my user controls. This library doesn't use file extension ascx. I have to be clear on this. My objective is to create an user controller that contains 1 textbox, 1 image button, 2 dropdown, 1 button and 1 calendar. Basically is a date picker controller. So far, everything is working. I can modify the calendar, populate month(dropdown) and year (dropdown). All buttons and actions behave correctly how I expect to behave. Even the image button when I click it; it display the calendar fine. I am having problem assigning the imageurl properties. I have copy the image to the library project, main project and nothing works. When running the main project is just shows a broken image. both project have the same name for the folder and file (~/Images/calendar4.png";). I have added this url in the usercontroller and in the main project and none works.

I have tried the following syntax on both project (one at a time): (On Main Project)

string imgsource = "~/Images/calendar4.png";
ucpCalendar.ImageUrl = imgsource;

The I tried the following syntax:

string FullPathVirtual = Server.MapPath("~/Images/calendar4.png");
ucpCalendar.ImageUrl = FullPathVirtual;

The I tried this one:

string path = (Server.MapPath(".") + "//Images//" + "calendar4.png");
string imgPath = path.Replace("\\", "/").Replace("//", "/");
ucpCalendar.ImageUrl = imgPath ;

Here is my usercontroller code (I was trying to do a random image search to see if it finds a picture. Still didn't work):

public class pCalendar : UserControl
    {
        protected Calendar  cdatepicker;
        protected DropDownList ddrYear;
        protected DropDownList ddrMonth;
        protected ImageButton imbcalendar;
        protected TextBox txtbdatedisplay;
        protected Button btntoday;
        public pCalendar()
        {
            txtbdatedisplay = new TextBox();
            imbcalendar = new ImageButton();
            ddrMonth = new DropDownList();
            ddrYear = new DropDownList();
            btntoday = new Button();
            cdatepicker = new Calendar();
          
           
            Controls.Add(new LiteralControl("<table cellspacing=\"0\" cellpadding=\"0\">"));
            Controls.Add(new LiteralControl("   <tr>"));
            Controls.Add(new LiteralControl("       <td>"));
            Controls.Add(txtbdatedisplay);
            Controls.Add(imbcalendar);
            Controls.Add(new LiteralControl("       </td>"));
            Controls.Add(new LiteralControl("   </tr>"));
            Controls.Add(new LiteralControl("   <tr>"));
            Controls.Add(new LiteralControl("       <td>"));
            Controls.Add(ddrMonth);
            Controls.Add(ddrYear);
            Controls.Add(btntoday);
            Controls.Add(new LiteralControl("       </td>"));
            Controls.Add(new LiteralControl("   </tr>"));
            Controls.Add(new LiteralControl("   <tr>"));
            Controls.Add(new LiteralControl("       <td>"));
            Controls.Add(cdatepicker);
            Controls.Add(new LiteralControl("       </td>"));
            Controls.Add(new LiteralControl("   </tr>"));
            Controls.Add(new LiteralControl("</table>"));

        }
        protected override void OnInit(EventArgs e)
        {
           
            cdatepicker.VisibleDate = cdatepicker.TodaysDate;
            Hide();

            ControllersBasicInfo();
            
            int myYear = System.DateTime.Now.Year;
            int myMonth = System.DateTime.Now.Month;

            for (int i = 0; i < 101; i++)
            {
                ddrYear.Items.Add((myYear - i).ToString());
            }
            ddrYear.SelectedValue = myYear.ToString();
            ddrMonth.SelectedValue = myMonth.ToString();

            ddrMonth.AutoPostBack = true;
            ddrYear.AutoPostBack = true;

            ddrMonth.SelectedIndexChanged += new System.EventHandler(SetCalendarVisibleDate_SelectedIndexChanged);
            ddrYear.SelectedIndexChanged += new System.EventHandler(SetCalendarVisibleDate_SelectedIndexChanged);

            if (AutoPostBack)
            {
                ddrMonth.SelectedIndexChanged += new System.EventHandler(ddl_SelectedIndexChanged);
                ddrYear.SelectedIndexChanged += new System.EventHandler(ddl_SelectedIndexChanged);
              
            }
            imbcalendar.Click+=imbcalendar_Click;
            btntoday.Click += btntoday_Click;
            cdatepicker.SelectionChanged += cdatepicker_SelectionChanged;

            cdatepicker.DayRender += cdatepicker_DayRender;

            base.OnInit(e);
        }

        private void ControllersBasicInfo()
        {
            string FullPathVirtual = PickRandomImage2();
            //imbcalendar.ImageUrl = "~/Images/calendar4.png";
            imbcalendar.ImageUrl = FullPathVirtual;
        }
        private string PickRandomImage2()
        {
            Random rnd = new Random();
            string[] image = Directory.GetFiles(MapPath("~/image"), "*.jpg");
            string imageDisplay = image[rnd.Next(image.Length)];
            return imageDisplay;
        }
        public void BindData()
        {
            BindDataMonth();
        }
  
        public string ImageUrl
        {
            get
            {
                return this.imbcalendar.ImageUrl;
            }
            set
            {
                this.imbcalendar.ImageUrl = value;
            }
        }
}

the webform code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Calendar.aspx.cs" Inherits="IAS.Calendar" %>
<%@ Register Assembly="IAS.Controls" Namespace="IAS.Controls" TagPrefix="uc" %>
<!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">
    <script src="/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
      <script src="/scripts/common.min.js" type="text/javascript"></script>
     <script src="/scripts/jquery.extend-1.5.0.min.js" type="text/javascript"></script>
    <script src="/Calendar/jscal2.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="/Calendar/CSS/jscal2.css" />
  <link rel="stylesheet" type="text/css" href="/CSS/Common.css" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td>
                <uc:pCalendar ID="ucpCalendar" runat="server"></uc:pCalendar>
            </td>
        </tr>
    </table>
    <div>
</form>

Code behind C#.net :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using lktec.Utils;

namespace TestCalendar
{
  public partial class Calendar : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ucpCalendar.BindData();
                //ucpCalendar.ImageUrl = "~/Images/calendar4.png";
             }
        }
   }
}

Here is an image of what is happening: Calendar display with other info

I have put only relevant code to my issue. If you need the full code please let me know. It is a lot of code. I am not sure what I am doing wrong.

Here is the suggested code to add: using input tag:

string inputstring = @"<input type=""image""
                alt=""Clear button"" 
                src=""C:/Users/SANOZUKE/Documents/Visual Studio 2013/Projects/MHPPROJECT-English/IAS.root/IAS/IAS/Images/calendar4.png"" 
                onserverclick=""imbcalendar_Click"" 
                runat=""server""
                id=""imbcalendar"" />";

Unfortunately, this didn't work. Still shows no image on the controller.

Here is the picture: Adding Input Tag

0

There are 0 best solutions below