Exercises Solutions: Edit Model Classes

Line numbers are for reference. They may not match your code exactly.

  1. Add the necessary annotations to the SubmitEditEventForm() method for it to live at the path /Events/Edit. See Line 2.

    1
2
3
4
5
6
       [HttpPost]
   [Route("Events/Edit")]
   public IActionResult SubmitEditEventForm(int eventId, string name, string description)
   {
      // controller code will go here
   }

    Back to exercises

  1. You’ll need to configure the route for Edit() to include the path variable eventId, so that paths like /Events/Edit/3 will work. See Line 2.

    1
2
3
4
5
6
       [HttpPost]
   [Route("Events/Edit/{eventId}")]
   public IActionResult Edit(int eventId)
   {
      // controller code will go here
   }

    Back to exercises

  1. Copy the code from Add.cshtml into Edit.cshtml.

    1. You’ll want to update the text of the submit button and the heading to reflect the edit functionality.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
       <h1>Edit Event</h1>

   <form method="post">
      <div class="form-group">
         <label for="name">Name</label>
         <input name="name" type="text" />
      </div>
      <div class="form-group">
         <label for="description">Description</label>
         <input name="description" />
      </div>
      <input type="submit" value="Edit Event" />
   </form>

    Back to exercises

  1. Back in EventsController, round out the Edit() method.

    1
2
3
4
5
6
7
8
       [HttpGet]
   [Route("Events/Edit/{eventId}")]
   public IActionResult Edit(int eventId)
   {
      Event editingEvent = EventData.GetById(eventId);
      ViewBag.eventToEdit = editingEvent;
      return View();
   }

    Back to exercises

  1. Within the form fields in Edit.cshtml,

    1. Get the name and description from the event that was passed in via ViewBag and set them as the values of the form fields.

    2. Add action="/events/edit" to the form tag.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
       <h1>@ViewBag.title</h1>

   <form method="post" action="/events/edit">
      <div class="form-group">
         <label for="name">Name</label>
         <input name="name" type="text" value="@ViewBag.eventToEdit.Name"/>
      </div>
      <div class="form-group">
         <label for="description">Description</label>
         <input name="description" type="text" value="@ViewBag.eventToEdit.Description" />
      </div>
      <input type="submit" value="Edit Event" />

   </form>

    Back to exercises

  1. Add another input to hold the id of the event being edited. This should be hidden from the user:

    10
11
12
13
14
          <!-- description div code here -->
      </div>
      <input type="hidden" value="@ViewBag.eventToEdit.Id" name="eventId">
      <input type="submit" value="Edit Event" />
   </form>

    Back to exercises

  1. Back in the Edit() action method, add a title to ViewBag that reads “Edit Event NAME (id=ID)” where "NAME" and "ID" are replaced by the values for the given event.

    1
2
3
4
5
6
7
8
9
       [HttpGet]
   [Route("Events/Edit/{eventId}")]
   public IActionResult Edit(int eventId)
   {
      Event editingEvent = EventData.GetById(eventId);
      ViewBag.eventToEdit = editingEvent;
      ViewBag.title = "Edit Event " + editingEvent.Name + "(id = " + editingEvent.Id + ")";
      return View();
   }

    Back to exercises

  1. In SubmitEditEventForm(),

  1. Query EventData for the event being edited with the given id parameter.

  2. Update the name and description of the event.

  3. Redirect the user to /Events (the event listing page).

    1
2
3
4
5
6
7
8
9
       [HttpPost]
   [Route("Events/Edit")]
   public IActionResult SubmitEditEventForm(int eventId, string name, string description)
   {
      Event editingEvent = EventData.GetById(eventId);
      editingEvent.Name = name;
      editingEvent.Description = description;
      return Redirect("/Events");
   }

Back to exercises

  1. In Index.cshtml, add a link to edit the event as a column in the event table. See Line 38.

32
33
34
35
36
37
38
39
40
41
   @foreach (var evt in ViewBag.events)
      {
         <tr>
            <td>@evt.Id</td>
            <td>@evt.Name</td>
            <td>@evt.Description</td>
            <td><a asp-controller="Events" asp-action="Edit" asp-route-id="@evt.Id">Edit Event</a></td>
         </tr>
      }
   </table>

Back to exercises