image control with radio buttons

Question

I need a control which can hold an image and two radio buttons, like the one we have when we upload a pictures on fb / orkut. 1. Image 2. Delete radio button. 3. Cover radio button.[Set this image as cover of album]

i have created a user control with these three things. On my aspx page on click of a button i need to add this user control. Means, user will select the image using FileUpload and when he clicks on the button this user control should be loaded. I am able to load the control. Check the following code.

<code>
<pre lang="cs">
protected void btnAddURL_Click(object sender, EventArgs e)
{

  if (FileUpload1.HasFile)
   {
//ItemList is an array list used to store the filename.
        ItemList.Add(FileUpload1.FileName);
        showImage();
    }
    }</pre>

    public void showImage()
    {

        PlaceHolder p = new PlaceHolder();

//Create Thumbnail
        FileUpload1.SaveAs(@"D:\ASP\Project_Dec_16\RealEstate\SaveImage\" +    FileUpload1.FileName);
        System.Drawing.Image img1 = System.Drawing.Image.FromFile(@"D:\ASP\Project_Dec_16\RealEstate\SaveImage\" + FileUpload1.FileName);
        System.Drawing.Image bmp2 = img1.GetThumbnailImage(100, 100, null, IntPtr.Zero);
        bmp2.Save(@"D:\ASP\Project_Dec_16\RealEstate\SaveImage\thumbnail\L\" + FileUpload1.FileName);

//Load the images selected by user
        for (int i = 0; i &lt;= ItemList.Count - 1; i++)
        {
            Control MyUserControl;


// Load user control dynamically
                MyUserControl = LoadControl(&quot;MyControl.ascx&quot;);
                    MyUserControl.ID = &quot;MyUserControl&quot; + cnt++;
  // Assign URL
    Image MyImage = (Image)MyUserControl.FindControl("Image1");
                   // MyImage.ID = "Image" + cnt;
                    MyImage.ImageUrl = "~/SaveImage/thumbnail/L/" + ItemList[i].ToString();
   // Add control to panel.
                   p.Controls.Add(MyUserControl);
                    Panel2.Controls.Add(p);

</code>

Problem : 1> All images come on new line i want them next to each other. 2> How to detect which radio button is clicked as i have more than one images, and all have radio buttons. 3> How to capture click of radio button from aspx page? 4> If there is some other way to achieve this let me know.

Searched on google but could not find a solution for this. :( Thanks in advance.

[Code After Changes] in ascx file i have added following code

 public event EventHandler rd_ClickDemo;

 protected void deleteimage_CheckedChanged(object sender, EventArgs e)
    {
        rd_ClickDemo(sender, e);
    }
    protected void setascover_CheckedChanged(object sender, EventArgs e)
    {
        rd_ClickDemo(sender, e);
    }

In aspx file on click of a button i am doing the following.

 protected void btnAddURL_Click(object sender, EventArgs e)
    {

        if (FileUpload1.HasFile)
        {
           // Add file name to array list
            ItemList.Add(FileUpload1.FileName);

          //Add The URL in a text box.
            txtAddURL.Text = txtAddURL.Text + System.Environment.NewLine + System.IO.Path.GetFullPath(FileUpload1.PostedFile.FileName);
            //Image1.ImageUrl = System.IO.Path.GetFullPath(FileUpload1.PostedFile.FileName);        
            //this.Button1_Click(this, e);  

            showImage();
        }
    }

public void showImage()
{

        PlaceHolder p = new PlaceHolder();

// Create a Thumbnail Image.
        FileUpload1.SaveAs(@"D:\ASP\Project_Dec_16\RealEstate\SaveImage\" + FileUpload1.FileName);
        System.Drawing.Image img1 = System.Drawing.Image.FromFile(@"D:\ASP\Project_Dec_16\RealEstate\SaveImage\" + FileUpload1.FileName);
        System.Drawing.Image bmp2 = img1.GetThumbnailImage(100, 100, null, IntPtr.Zero);
        bmp2.Save(@"D:\ASP\Project_Dec_16\RealEstate\SaveImage\thumbnail\L\" + FileUpload1.FileName);

//Load all images from array list.
        for (int i = 0; i <= ItemList.Count - 1; i++)
        {

            // Load user control dynamically
            MyUserControl = LoadControl("MyControl.ascx");

            MyUserControl.ID = "MyUserControl" + cnt++;

          // Find Radio Button
            RadioButton rdb1 = (RadioButton)MyUserControl.FindControl("deleteimage");
            RadioButton rdb2 = (RadioButton)MyUserControl.FindControl("setascover");

            //Attach Group Name.
            rdb1.GroupName = "G1" + cnt.ToString();
            rdb1.ID = "Rb_ID_D" + cnt.ToString();
            rdb1.AutoPostBack = true;
            rdb1.CheckedChanged +=new EventHandler(rdb1_CheckedChanged);

            //Attach Group Name.
            rdb2.GroupName = "G1"+ cnt.ToString();
            rdb2.ID = "Rb_ID" + cnt.ToString();
            rdb2.AutoPostBack = true;
            rdb2.CheckedChanged += new EventHandler(rdb1_CheckedChanged);
            //Image MyImage = (Image)MyUserControl.FindControl("Image1");
            // MyImage.ID = "Image" + cnt;

            //Attach URL to Image.
            Image MyImage = (Image)MyUserControl.FindControl("Image1");
            MyImage.ImageUrl = "~/SaveImage/thumbnail/L/" + ItemList[i].ToString();
            p.Controls.Add(MyUserControl);
            Panel2.Controls.Add(p);
       }
}

Still i am not able to trigger the radiobutton_CheckedChanged event. Please Help.

Answer 1

Ok so here is your solution for first problem:

1> All images come on new line i want them next to each other.
Ans: You can do so in CSS of your custom control's div block, just set the float to left like this

style="display:block;float:right;"

2> How to detect which radio button is clicked as i have more than one images, and all have radio buttons.
Ans: You can get the control which host your RadioButton so u can use NamingContainer property of the Radio button to get the hosting control, which in your case must be you custom control.

3> How to capture click of radio button from aspx page?
Ans: Do the following in your code:

first when you loop to add You custom control to your Panel2 attach a groupname and a event handler to the RadioButton. (Assuming you already have your radio buttons in your custom control) and then handle the CheckedChanged Event (i am using anonymous delegate for handling event)

RadioButton rdb1 = (RadioButton)MyUserControl.FindControl("deleteimage");
RadioButton rdb2 = (RadioButton)MyUserControl.FindControl("setascover");

rd1.GrouprdoSelect2.GroupName = "radiobutton" + i.ToString() ;
rd1.ID = "radiobutton" + i.ToString() + i.ToString() + Convert.ToString(1);
rd1.AutoPostBack = true;
rd1.CheckedChanged += (thesender, ev) => {
       RadioButton rb =  (RadioButton) thesender;
       MyUserControl mcl = rb.NamingContainer as MyUserControl;
       //Perform your task based on the fact of mcl.ID
   }

rd2.GrouprdoSelect2.GroupName = "radiobutton" + i.ToString() ;
rd2.ID = "radiobutton" + i.ToString() + i.ToString() + Convert.ToString(2);
rd2.AutoPostBack = true;
rd2.CheckedChanged += (thesender, ev) => {
       RadioButton rb =  (RadioButton) thesender;
       MyUserControl mcl = rb.NamingContainer as MyUserControl;
       //Perform your task based on the fact of mcl.ID
   }