📓 Create and Update with a One-To-Many Relationship
Now it's time to update the rest of our application so that our users can actually associate a Category
with an Item
. We'll also make two other valuable updates: we'll list the Category
that an Item
belongs to on its details page, and we'll make an update to our CREATE action to prevent unhandled database errors.
Using ViewBag for Category
Data in the ItemsController
Let's now use ViewBag to get Category
data into our Item
Views. We will be updating our example To Do List project with the following changes. In this example, we'll access ViewBag data from an HTML helper, and the syntax in the View will look different than what we've seen so far.
We will need Category
data in two of our Item
routes, so let's update those two methods in ItemsController
so that they use ViewBag. Here are the two methods we need to update:
using Microsoft.AspNetCore.Mvc.Rendering;
...
public ActionResult Create()
{
ViewBag.CategoryId = new SelectList(_db.Categories, "CategoryId", "Name");
return View();
}
...
public ActionResult Edit(int id)
{
Item thisItem = _db.Items.FirstOrDefault(item => item.ItemId == id);
ViewBag.CategoryId = new SelectList(_db.Categories, "CategoryId", "Name");
return View(thisItem);
}
...
First we add the necessary using directive so that we have access to SelectList
. Now note that both methods have the following lines added to them:
ViewBag.CategoryId = new SelectList(_db.Categories, "CategoryId", "Name");
When we create and edit our items, we want them to belong to categories that already exist. We do this by creating a ViewBag.CategoryId
property in the Create
and Edit
GET actions, and assigning it as a new SelectList
object.
A SelectList
will provide a list of the data needed to create an html <select>
list of all the categories from our database. The displayed text of each <option>
will be the Category
's Name
property, and the value of the <option>
will be the Category
's CategoryId
. That way, a user can select an Category
from the dropdown to associate with the Item
we are creating or editing.
The SelectList
takes multiple arguments:
- The first argument represents the data that will populate our SelectList's
<option>
elements: a list of categories from our database. - The second argument is the value of the every
<option>
element: theCategory
'sCategoryId
. - The third argument is the displayed text of every
<option>
element: the name of theCategory
.
Updating Item
Create and Edit Views
Next, let's update the corresponding views:
@{
Layout = "_Layout";
}
@model ToDoList.Models.Item
<h4>Add a new item</h4>
@using (Html.BeginForm())
{
@Html.LabelFor(model => model.Description)
@Html.TextBoxFor(model => model.Description)
@Html.LabelFor(model => model.Category)
@Html.DropDownList("CategoryId")
<input type="submit" value="Add new item" class="btn btn-primary" />
}
<p>@Html.ActionLink("Show all items", "Index")</p>
@{
Layout = "_Layout";
}
@model ToDoList.Models.Item
<h2>Edit</h2>
<h4>Edit this item: @Html.DisplayFor(model => model.Description)</h4>
@using (Html.BeginForm())
{
@Html.HiddenFor(model => model.ItemId)
@Html.LabelFor(model => model.Description)
@Html.EditorFor(model => model.Description)
@Html.LabelFor(model => model.Category)
@Html.DropDownList("CategoryId")
<input type="submit" value="Save" />
}
<p>@Html.ActionLink("Back to list", "Index")</p>
Note that we've added the following two lines to both views:
@Html.LabelFor(model => model.Category)
@Html.DropDownList("CategoryId")
We use an HTML helper method called DropDownList()
, we give DropDownList()
the string name of a ViewBag property of the type SelectList
. Since we saved our SelectList as ViewBag.CategoryId
, we give DropDownList()
the string "CategoryId"
. This helper method will create an html dropdown select list out of the SelectList
object.
Note — CategoryId
may seem like a bad name for a SelectList
object, but the reason we chose that name is because that will be the name
attribute on the <select>
tag created. You can check this in your browser DevTools Inspector and see <select id="CategoryId" name="CategoryId">
. We could use a different name like ViewBag.CategoryList
and you'd get <select id="CategoryList" name="CategoryList">
. The problem with that is when we submit our form it will use the name
attribute to know what property of the Item
object to assign a value, so it will try to create an Item with a CategoryList
property, which will not work.
Listing the Category
on the Item
Details Page
Next, let's list the name of the Category
on the details page for an Item
. First, we'll update the Details
action in the ItemsController
to grab include the Category
when it gets the Item
from the database:
...
public ActionResult Details(int id)
{
Item thisItem = _db.Items
.Include(item => item.Category)
.FirstOrDefault(item => item.ItemId == id);
return View(thisItem);
}
...
Then, we'll update the corresponding view to display the Category
name:
@{
Layout = "_Layout";
}
@model ToDoList.Models.Item
<h2>Item Details</h2>
<hr />
<h3>@Html.DisplayNameFor(model => model.Description): @Html.DisplayFor(model => model.Description)<h3>
<h3>@Html.DisplayNameFor(model => model.Category): @Html.DisplayFor(model => model.Category.Name)<h3>
<p>@Html.ActionLink("Edit Item", "Edit", new { id = Model.ItemId })</p>
<p>@Html.ActionLink("Delete Item", "Delete", new { id = Model.ItemId })</p>
<p>@Html.ActionLink("Back to list", "Index")</p>
Preventing Database Errors
Users will see an unhandled error in the browser when they try to create an Item
without there being a Category
they can associate the Item
with. That's because our database expects each Item
to have a valid CategoryId
, and without it, our application breaks. That means we need to update our application to prevent this from happening. There's quite a few ways we can do this, and we'll implement a basic solution for this issue now. In the next course section, we'll learn how to solve this issue with a different tool.
Our basic solution is to add an instruction for the user to read to let them know they need to add a Category before they create an Item. Then, in the controller, we'll check to see if a Category
has been added, and if not, redirect back to the Create
page.
Let's start with the instruction to the user. In Views/Items/Create.cshtml
, add the following code right before the <h4>
tag and above the form:
...
<p><strong>NOTE:</strong> You need to have at least one category before you can add an item!</p>
<p>Go to @Html.ActionLink("this page", "Create", "Categories") to create a category.</p>
...
Next, let's update the Create
POST action within the ItemsController.cs
to check whether a Category has been selected for the Item
.
Here's the updated Create
POST action:
...
[HttpPost]
public ActionResult Create(Item item)
{
if (item.CategoryId == 0)
{
return RedirectToAction("Create");
}
_db.Items.Add(item);
_db.SaveChanges();
return RedirectToAction("Index");
}
...
We've added a new if
statement that checks the value of CategoryId
. By default, the CategoryId
will be 0
if no Category is selected in the form. So, we can check if CategoryId
is set to 0
, and if so, redirect to the Create
GET action and view.
Again, this is just solution to our issue here. In the next section, we'll learn about validating models through validation attributes that we can add to our model's properties. We'll get into that soon!
At this point, we've successfully set up a one-to-many relationship. We've also added very basic protection to our application to not create an item unless there's a category that it can be associated with. We can run our application and make an association between an Item
and a Category
via a dropdown.
For further information on using Entity, check out Microsoft's documentation on Entity Framework Core.
Repository Reference
Follow the link below to view the finished project for the walkthrough of creating a To Do List app that uses EF Core to communicate with a MySQL database. Note that this is a link to a specific branch in the repository.
Example GitHub Repo for To Do List with EF Core: 4_one_to_many_relationship