13.6. Razor Forms

Warning

Many changes have happened in the world of Visual Studio and ASP.NET since the original writing of this book. We reviewed the videos and instructions in the latest environment and framework and made notes to help you through any discrepancies. If you get stuck following along with a video, we suggest comparing the written instructions for the problematic area. Notes have been added to the reading that will help you locate or code what is needed to complete each chapter project.

Already we have seen that templates allow us to build generic forms. Using templates, you can reuse the structure by rendering the same form, but with different labels and data. Thus, a single form can serve different purposes, saving you extra effort.

Whenever possible, reuse existing templates!

13.6.1. Start a New Project

You will build a new project so you can practice with templates and forms. If you have not done so, commit and push any unsaved work from your HelloASPDotNET project.

Your new project will keep track of some coding events, such as meetups and conferences. To get started, follow the steps you took to create HelloASPDotNET, but call the project CodingEvents.

13.6.2. CodingEvents Setup - Video

Note

The final code presented in this video is found on the views-setup branch of the CodingEventsDemo repository.

Tip

Windows Users: You might need to change some solution settings if you pull down this demo repository and run it on your computer. Refer to Visual Studio Operational Tips for help.

13.6.3. CodingEvents Setup - Text

  1. In the Controllers directory, create a new controller named EventsController.

  2. In the new controller, create an action method for GET requests.

  3. Within the action method, create an empty List and add a few event names to it.

  4. Add the List to ViewBag. Then return the corresponding view.

  5. Within the Views directory, create a new directory named Events. Within this directory, create a new view named Index.cshtml.

  6. Within the new template, loop over the List and display the name of each event. Make sure your template can handle an empty List.

13.6.4. Create and Render a Form - Video

Note

The starter code presented in this video is found on the views-setup branch of the CodingEventsDemo repository. The final code presented in this video is found on the render-form branch of the CodingEventsDemo repository.

13.6.5. Create and Render a Form - Text

A Razor form can be made simply with a template that includes a <form> element. The method for the form should be of type post.

1
2
3
4
5
6
7
8
  <!-- Other HTML -->

  <form method="post">
     <input type="text" name="inputName">
     <input type="submit" value="submitButtonText">
  </form>

  <!-- Other HTML -->

You can include as many inputs as you need in the form, and these can be of different types (e.g. text, email, checkbox, etc.). However, each different piece of data you want to collect needs to have a unique name attribute.

To render the form in the view, add a method to the controller with an [HttpGet] annotation:

26
27
28
29
30
31
32
  [HttpGet]
  public IActionResult Add()
  {
     // Any additional method code here

     return View();
  }

Note

If the action attribute in the <form> tag leads to the same route as the form is being rendered at, you do not have to include an action attribute.

13.6.6. Handle Form Submission - Video

Now that you have created and rendered a form in your CodingEvents project, you need to add a method to the controller to handle its submission. Code along with the video below to add this functionality.

As usual, the following summary outlines the ideas from the clip.

Note

The starter code presented in this video is found on the render-form branch of the CodingEventsDemo repository. The final code presented in this video is found on the handle-form-submission branch of the CodingEventsDemo repository.

13.6.7. Handle Form Submission - Text

To process a form after the user clicks the Submit button, you need to add a method to the controller using the [HttpPost] annotation:

31
32
33
34
35
36
37
38
  [HttpPost]
  [Route("/Events/Add")]
  public IActionResult NewEvent(string name)
  {
     // Method code...

     return Redirect("/Events");
  }

Some points to note:

  1. Line 2: For each piece of data that needs to be retrieved from the form, declare a parameter of the appropriate type.

  2. The method code performs any data manipulation required after the information gets submitted.

  3. Line 6: We may want to send the user to a different page after they successfully submit a form. Instead of re-rendering the form, we want to use Redirect() to redirect the user to a different template.

Now that we have a form and can handle the form submission, we want to create a link to the form to add an event in our Index template. This way, after reviewing the list of events, users can click on the link to the form and add an event. To do this, we use anchor tag helpers. If we put in the following line in our template:

<a asp-controller="Events" asp-action="Add">Add Event</a>

Then when we build our application, the generated HTML of the page will look like:

<a href="/Events/Add">Add Event</a>

Users can now click on the link on our page at localhost:5001/Events and are directed to the form to add an event. Once they hit the button to submit the form, the data is passed to the NewEvent() method, the user’s event is added to the Events list, and the application redirects back to localhost:5001/Events where an updated Events list is displayed.