Modal/Popup for Add/Edit data

The tutorial in question uses Dapper to access a SQLite database.
Some alternative ways to design this project would be:
– Read the data from a JSON file (The JSON file is your “database”)
– Create the data in C# code, as C# objects
– Use SQL commands to access a SQLite or SQL database (instead of using Dapper, we just write the code to connect to the database ourselves).

Each of these examples would have different code for creating new rows and editing existing rows, based on how it’s accessing the database, and what type of database it is.
The code to create a modal/popup is the same though.

Here is a sample that uses the simplest method- it creates the data in C# code, as C# objects. So this sample has no code for database access. The code just opens the modal and edits the data in the datagridview.

Some relevant bits of code from the sample:

This creates a BindingLIst, binds it to the DataSource of the datagridview, and then fills it with data: Note that data can be added to the BindingList before and after it is bound to the datagridview- it will all show up in the datagridview.

//Page1.cs
BindingList PeopleList = new BindingList(); //create empty BindingList
private void Page1_Load(object sender, System.EventArgs e)
{
PeopleList.Add(new Person() { FirstName = "John", LastName = "Doe", Age = 40 });
dataGridView1.DataSource = PeopleList; //bind the datagridview to the BindingList
PeopleList.Add(new Person() { FirstName = "Jane", LastName = "Doe", Age = 30 });
PeopleList.Add(new Person() { FirstName = "Tom", LastName = "Smith", Age = 21 });
PeopleList.Add(new Person() { FirstName = "Emily", LastName = "Brown", Age = 57 });
PeopleList.Add(new Person() { FirstName = "Susan", LastName = "Green", Age = 46 });
}

This code opens a modal dialog on button click. It also gets data from the modal dialog and uses that data to add a new entry to the table.

//Page1.cs
private void button1_Click(object sender, System.EventArgs e)
{
//dialog will not exist outside of this using statement
//handy because then it doesn't clog up memory and you don't have to remember to dispose of it.
using (var dialog = new ModalPopup())
{
dialog.ShowDialog();
PeopleList.Add(new Person() { FirstName = dialog.FirstName, LastName = dialog.LastName, Age = dialog.Age });
}
}


Here I attached an event handler to the CellEndEdit event. All it does is display a message. If you were connecting to an external database, this would be a good time to write data to the database,
//Page1.cs
private void dataGridView1_CellEndEdit(object sender, DataGridViewCellEventArgs e)
{
AlertBox.Show("You edited a value. If we were connected to a database, this would be a great time to save it.");
}

The code for the modal popup is ModalPopup.cs and it looks like this. I created several public fields (FirstName, LastName, Age) to store the data. In the button1_Click event, I show an AlertBox, and assign values to the public variables. I then close the popup.

//ModalPopup.cs
public string FirstName { get; private set; }
public string LastName { get; private set; }
public int Age { get; private set; }
public ModalPopup()
{
InitializeComponent();
}
private void button1_Click(object sender, EventArgs e)
{
AlertBox.Show("submitted");
FirstName = textBox1.Text;
LastName = textBox2.Text;
Age = int.Parse(typedTextBox1.Text);
this.Close();
}

Hope this helps!
-Julie