How to Have Multiple Forms in a Single ASP.NET MVC View

First the folder structure:

1. Right-click on the project name (Multi_Form_View in this case).
2. Click/hover on "Add".
3. Then click on "New Folder" (name the new folder "Models").

Repeat the above steps 2 more times, name these folders "Views" and "Controllers" respectively. And again, do this 2 more times in the "Views" folder and call the new folders "Form" and "Shared" respectively.
If done correctly, your folder structure should look something like this:

Now we'll be adding our files. First, the easier one to find, the Model which is basically a class.

Model

Controller

View

_ViewImports

_ViewStart

_Layuot

Open your "LoginModel.cs" and add the following lines of code to the public class LoginModel class:

1. public string UserName { get; set; }
2. public string Password { get; set; }

Next open your "RegisterModel.cs" and add the following lines of code to the public class RegisterModel class:

1. public string FirstName { get; set; }
2. public string LastName { get; set; }
3. public string EmailAddress { get; set; }
4. public string Password { get; set; }

We're gonna create our two forms in our View. Our Login form will take in our UserName and our Password values from the user. Our Register form will take in our FirstName, LastName, Password and our EmailAddress which would act as our UserName in our Login form, we however won't be focusing on validation so we'll just be looking at how to post our data for our respective forms to their respective Actions. Our forms should basically mimic our Models so if you added more properties above and wish to assign values to them, you should add form fields for each property.

Add these lines of code to your "Index.cshtml":

1. @using (Html.BeginForm("Login", "Form", FormMethod.Post))
2. {
3.  <label asp-for="UserName">User Name</label>
4.  <br />
5.  <input asp-for="UserName" type="text" name="UserName" />
6.  <br />
7.  <label asp-for="Password">Password</label>
8.  <br />
9.  <input asp-for="Password" type="text" name="Password" />
10.  <br />
11.  <button type="submit">Login</button>
12. }
14. @using (Html.BeginForm("Register", "Form", FormMethod.Post))
15. {
16.  <label asp-for="FirstName">First Name</label>
17.  <br />
18.  <input asp-for="FirstName" type="text" name="FirstName" />
19.  <br />
20.  <label asp-for="LastName">Last Name</label>
21.  <br />
22.  <input asp-for="LastName" type="text" name="LastName" />
23.  <br />
24.  <label asp-for="EmailAddress">Email Address</label>
25.  <br />
26.  <input asp-for="EmailAddress" type="text" name="EmailAddress" />
27.  <br />
28.  <label asp-for="Password">Password</label>
29.  <br />
30.  <input asp-for="Password" type="password" name="Password" />
31.  <br />
32.  <button type="submit">Register</button>
33. }

At lines 1 and 14 is where the magic happens. Here we're specifying to which Action and Controller the form contents should be sent to, "Login" and "Form" for our Login and "Register" and "Form" respectively.

In the controller we will process our data returned by our View upon submission. We will be doing some very basic email formating as well as sending the email, duh.
In your "EmailController.cs" add the following code:

1. [HttpGet]
2. public IActionResult Index()
3. {
4.  return View();
5. }
7. [HttpPost]
8. public IActionResult Login(LoginModel loginModel)
9. {
10.  return View();
11. }
13. [HttpPost]
14. public IActionResult Register(RegisterModel registerModel)
15. {
16.  return View();
17. }

• In line 1 we want to request the Index page so we decorate our Index method with an [HttpGet] method. This requests our form contents and displays it as opposed to an [HttpPost] method that would rather send data which we used later on in lines 7 and 13. More on HTTP methods at w3schools.com.
• Lines 8 and 14 we parameterize our methods with our LoginModel and RegisterModel respectively. Our Models are populated by our forms depending on the form we choose to submit.

Let's run our app and see what results we come up with:

To inspect that data that's being send to our Controller from a specific form, we will want to add Breakpoints like this:

by clicking in the furthest left column.

Now we can add data to any specific form and submit, I'll start by filling in the Register form and then inspecting the data that was posted to our Controller:

There are a few ways to inspect data that I know of; you're able to hover over the variable you want to inspect, registerModel in this case until it displays a contextual dropdown that you're able to drilldown in or, you're able to inspect the data in the Locals window.

As you can see the data we posted from our form has been successfully posted to our Controller and was even processed by the correct Action or method, our Register Action.

Click on Continue to continue with our debugging.

We should be greeted with a lovely execption message in our browser that will either say:

1. InvalidOperationException: The view 'Register' was not found. The following locations were searched:
2. /Views/Form/Register.cshtml
3. /Views/Shared/Register.cshtml
4. /Pages/Shared/Register.cshtml

or

1. InvalidOperationException: The view 'Register' was not found. The following locations were searched:
2. /Views/Form/Login.cshtml
3. /Views/Shared/Login.cshtml
4. /Pages/Shared/Login.cshtml

depending on the form you decide to post.

We see this exception because when we had returned our View in our Login and Register methods, our methods assume that we have a corresponding View for those specific methods.
To rectify this problem we need to direct the method to the Index View instead of a Register or Login View that does not exist. To do this, open the FormController.cs file and replace return View(); with return View("Index");. Your code should look like this:

1. [HttpGet]
2. public IActionResult Index()
3. {
4.  return View();
5. }
7. [HttpPost]
8. public IActionResult Login(LoginModel loginModel)
9. {
10.  return View("Index");
11. }
13. [HttpPost]
14. public IActionResult Register(RegisterModel registerModel)
15. {
16.  return View("Index");
17. }

Try resubmitting either form and you should be redirected to the Index View with no errors.