Exercises: Razor Views

In this chapter, we started working on an application for tracking various coding events around town.

Getting Started

Open up your CodingEvents project in Visual Studio. Create and checkout a new branch to complete these exercises.

The code you start with should roughly resemble this branch . If you have been coding along with the video lessons, you’re probably in good shape.

If you need a git refresher check out the resources in this chapter’s Next Steps

As always, give the branch a useful name, like view-exercises.

Now, let’s add descriptions to our events.

Expanding our Events Schedule

1. In this lessons, we learned how to use templates to display the elements in a static list called Events. Let’s convert our Events list to a Dictionary. The structure of a dictionary enables us to add descriptions to our events. You’ll need to think about what data types the event name and description will be.

   Tip

   If you need to refresh your memory on dictionaries, refer to this page .

   Check your solution

    static private Dictionary<string, string> Events = new Dictionary<string, string>();
   

2. Update the Events/Add.cshtml template with a new field for a user to submit an event description.

   Tip

   You’ll want to also add some label tags to your form to let the user know what data they are entering.

   Check your solution

   <h1>Add Event</h1>
   
   <form method="post">
      <label for="name">Name</label>
      <input name="name" type="text" />
      <label for="desc">Description</label>
      <input name="desc" />
      <input type="submit" value="Add Event" />
   </form>
   

3. Back in EventsController.cs, add the description parameter to the NewEvent action method and within the method, add the new event key/value pair to the Events dictionary.

   Tip

   Whatever value you provided in the name attribute of your new description field is the name of the parameter.

   Check your solution

   [HttpPost]
   [Route("Events/Add")]
   public IActionResult NewEvent(string name, string desc)
   {
      Events.Add(name, desc);
   
      return Redirect("/Events");
   }
   

4. Now to Events/Index.cshtml. Replace the ul with a table to display event names and descriptions.

   Check your solution

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   // inside the "else" block <table> <tr> <th> Name </th> <th> Description </th> </tr> @foreach (KeyValuePair<string, string> evt in ViewBag.events) { <tr> <td>@evt.Key</td> <td>@evt.Value</td> </tr> } </table>

5. Lastly, modify _Layout.cshtml to display links for the Coding Events app (only Events/Index and Events/Add for now).

   Check your solution

   1 2 3 4 5 6 7 8 9 10 11

   <header> <!-- html code --> <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"> <ul class="navbar-nav flex-grow-1"> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Events" asp-action="Add">Add Event</a> </li> </ul> </div> <!-- more html --> </header>