Управление изображениями с помощью переключателей

Question

Мне нужен элемент управления, который может содержать изображение и две радиокнопки, как у нас, когда мы загружаем фотографии на fb/orkut. 1. Изображение 2. Удалить радиокнопку. 3. Cover radio button. [Установить это изображение как обложку альбома]

Я создал пользовательский элемент управления с этими тремя вещами. На моей странице aspx по щелчку кнопки мне нужно добавить этот пользовательский элемент управления. Значит, пользователь будет выбирать изображение, используя FileUpload, и когда он нажимает кнопку, этот пользовательский элемент управления должен быть загружен. Я могу загрузить элемент управления. Проверьте следующий код.

<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> 

Проблема: 1> Все изображения приходят на новой линии я хочу их рядом друг с другом. 2> Как определить, какой переключатель нажата, поскольку у меня есть несколько изображений, и у всех есть переключатели. 3> Как захватить щелчок переключателя с страницы aspx? 4> Если есть какой-то другой способ добиться этого, дайте мне знать.

Искал на google, но не смог найти решение для этого. :( Заранее спасибо.

[Код После изменения] в ASCX файл я добавил следующий код

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); 
     } 
} 

Тем не менее я не в состоянии инициировать событие radiobutton_CheckedChanged. Пожалуйста, помогите.

Answer 1

Итак, вот ваше решение для первой проблемы:

1> Все изображения появляются на новой линии, я хочу их рядом друг с другом.
Ans: Вы можете сделать это в CSS из сНа блока вашего пользовательского элемента управления, просто установите поплавок налево, как этого

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

2> Как определить, какой переключатель щелкают, как у меня есть более одного изображения, и все имеют переключатели.
Ans: вы можете получить элемент управления, на котором размещен ваш RadioButton, поэтому вы можете использовать свойство NamingContainer кнопки Radio, чтобы получить элемент управления хостингом, который в вашем случае должен быть вашим пользовательским контролем.

3> Как захватить щелчок переключателя с страницы aspx?
Ans: Сделайте следующее в своем коде:

Сначала, когда вы зацикливаете, чтобы добавить пользовательский элемент управления к вашей Panel2, присоедините имя группы и обработчик событий к RadioButton. (Предполагается, что у вас уже есть свои радио-кнопки в пользовательском контроле), а затем обработать CheckedChanged событие (я использую анонимный делегат для обработки события)

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 
    }