14.2. Create a Model

In this book section, we will continue to make incremental changes to CodingEvents. The next set of changes show model creation, how models relate to data, and the practice of model binding. First, we replace the dictionary in EventsController with a list of Event models. We’ll then update our action methods to take advantage of the new model and its properties. Lastly, we refactor the view template to reflect the changes in the controller.

14.2.1. Create a Model Class - Video

Note

The starter code for this video is found at the models1-start branch of CodingEventsDemo. The final code presented in this video is found on the create-model branch. As always, code along to the videos on your own CodingEvents project.

14.2.2. Create a Model Class - Text

Like controllers, model classes are conventionally located in a Models folder. Model classes resemble the kinds of classes we practiced making at the start of this course. In other words, models are plain old C# objects, or POCOs.

To create a model, we’ll transform the information that we once stored in an Events dictionary into a class. This new Event class will include a property for Name, a constructor, and a ToString() override.

In Models/Event.cs:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
namespace CodingEventsDemo.Models
{
   public class Event
   {
      public string Name { get; set; }

      public Event(string name)
      {
         Name = name;
      }

      public override string ToString()
      {
         return Name;
      }
   }
}

We now need to update the POST handler that creates new events.

First, replace the Events dictionary with a list of Event objects.

15
static private List<Event> Events = new List<Event>();

Update the Add() method inside of NewEvent() to add a new Event instance to the list:

30
31
32
33
34
35
36
37
[HttpPost]
[Route("Events/Add")]
public IActionResult NewEvent(string name)
{
   Events.Add(new Event(name));

   return Redirect("/Events");
}

Back in Events/Index.cshtml, update the HTML to use the Event object’s fields, rather than strings.

22
23
24
25
26
27
@foreach (var evt in ViewBag.events)
{
   <tr>
      <td>@evt.Name</td>
   </tr>
}

Tip

Here’s a shorthand to create auto-implementing properties. In a class, type the word “prop” followed by hitting the Tab key twice. This swiftly supplies the property’s scaffolding:

public object MyProperty { get; set; }

14.2.3. Add a Model Property - Video

Note

The starter code for this video is found at the create-model branch of CodingEventsDemo. The final code presented in this video is found on the add-property branch.

14.2.4. Add a Model Property - Text

To round out the Event class, we’ll add a Description property to showcase what our events are all about.

Updates to Models/Event.cs:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
namespace CodingEventsDemo.Models
{
   public class Event
   {
      public string Name { get; set; }
      public string Description { get; set; }

      public Event(string name, string description)
      {
         Name = name;
         Description = description;
      }

      public override string ToString()
      {
         return Name;
      }
   }
}

Now that our data is object-oriented, it’s quick and easy to add a new property affiliated with an event. If we decide to add properties, such as Date or Location, we can follow the pattern established. Think about when we stored events as key-value pairs. At that stage, more significant changes were necessary to add fields.

In the Views folder, the Events/Add.cshtml template still uses a desc field so we don’t need to update this view. We do, however, need to go into Events/Index.cshtml to add the table data for an event’s description.

Events/Index.cshtml:

26
<td>@evt.Description</td>

Lastly, add a parameter to the NewEvent action method. This parameter passes the description value into the creation of the Event object.

EventController:

30
31
32
33
34
35
36
37
[HttpPost]
[Route("Events/Add")]
public IActionResult NewEvent(string name, string desc)
{
   Events.Add(new Event(name, desc));

   return Redirect("/Events");
}

14.2.5. Check Your Understanding

Question

True/False: Model code is framework independent.

  1. True

  2. False

Question

Say we do add a Date property to the Event class. Which line would we add to Events/Index.cshtml to also display that value in our table of events?

  1. <li>@evt.Date</li>

  2. <td>evt.Date</td>

  3. <td>@event.Date</td>

  4. <td>@evt.date</td>