Windows Form add remove user control dynamically - winforms

Question

I have a windows form application and I have a requirement to allow user to add as many email IDs as he can on the form
I want an ability to add textbox control for email ID field on button click. Textbox should be added dynamically and N number of textboxes can be added on the form.
At the same time at any given point user should be able to remove textbox added. On click of 'Save' button all the 'n' emails need to be stored in DB.
Can anyone please advise how to do it in Windows form application?

Answer 1

You should probably create a custom user control to hold your email addresses and remove button. This way you can press the remove button to delete that email address/control.
Then you'll want your main form to have a button to add email addresses (an instance of your custom control) and then a FlowLayoutPanel to hold your customer controls.
Your custom control code should look something like:
public class EmailAddressControl : UserControl
{
public string EmailAddress
{
get
{
return(tbEmailTextBox.Text);
}
set
{
tbEmailTextBox.Text = value;
}
}
public EmailAddressControl()
{
InitializeComponent();
}
public event EventHandler<EventArgs> RemoveEmailAddress;
public void btnRemoveEmailAddress_Click(object sender, EventArgs e)
{
RemoveEmailAddress?.Invoke(this, EventArgs.Empty);
}
}
We have two sub-controls on the UserControl, tbEmailTextBox which is a textbox and btnRemoveEmailAddress which is a button. tbEmailTextBox will hold the email address your user types in. You can access it via the EmailAddress property from outside the control. btnRemoveEmailAddress will fire the RemoveEmailAddress event which will tell its subscribers that it should be closed.
As I said before your main form should have a FlowLayoutPanel and a couple of buttons. A button we'll call btnAddEmail will add email user controls to the screen and the panel we'll call flpEmailAddresses and the second button we'll call btnSaveEmails which will save your emails to the database (the buttons should not be children of the flow layout panel - mainly for looks).
Your main code form would look like:
public class MainForm : Form
{
public MainForm()
{
InitializeComponent();
}
public void btnAddEmail_Click(object sender, EventArgs e)
{
EmailAddressControl email = new EmailAddressControl();
email.RemoveEmailAddress += RemoveEmailAddress;
flpEmailAddresses.Controls.Add(email);
}
public void RemoveEmailAddress(object sender, EventArgs e)
{
EmailAddressControl email = sender as EmailAddressControl;
email.RemoveEmailAddress -= RemoveEmailAddress;
flpEmailAddresses.Controls.Remove(email);
email.Dispose();
email = null;
}
public void btnSaveEmails_Click(object sender, EventArgs e)
{
foreach(EmailAddressControl email in flpEmailAddresses.OfType<EmailAddressControl>())
{
databaseinstance.SaveEmail(email.EmailAddress);
}
}
}
In the btnAddEmail_Click we are creating a new instance of your EmailAddressControl and subscribing to the RemoveEmailAddress event so the main form knows when to remove it. We then add it to the flpEMailAddresses panel.
When your user presses the btnRemoveEmailAddress it fures the RemoveEmailAddress event which is captured by the main form, in the RemoveEmailAddress event handler. In this handler we cast the sender object to EmailAddressControl unsubscribe from the RemoveEmailAddress event (to avoid memory leaks and to allow the control to be garbage collected) then we remove the control from flpEmailAddresses panel and finally dispose of the EmailAddressControl.
If the user clicks the btnSaveEmails button then the application loops over the EmailAddressControls that are children of flpEmailAddresses and retrieves the EmailAddress from each one and sends that to databaseinstance.SaveEmail. I'll leave it to you to implement databaseinstance.SaveEmail(string emailaddress) for yourself.