ASP.Net Core MVC CRUD PopUp Modal - asp.net

Question

I am just starting to work with ASP.Net Core MVC. I have difficulty in creating a popup modal. I've tried to create a simple page. 
Below is my model:
namespace CoreModal.Models
{
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string Address { get; set; }
public string Phone { get; set; }
}
}
Below is my EmployeeController:
namespace CoreModal.Controllers
{
public class EmployeeController : Controller
{
public static List<Employee> empList = new List<Employee>() {
new Employee {Id=1, Name="John", Email="john#gmail.com", Address="Campbell", Phone="1234"}
};
public IActionResult Index()
{
ViewBag.Employee = empList;
return View();
}
[HttpPost]
[Route("create")]
public IActionResult Create(string name, string email, string address, string phone)
{
var newEmployee = new Employee
{
Name = name,
Email = email,
Address = address,
Phone = phone
};
empList.Add(newEmployee);
ViewBag.Employee = empList;
return RedirectToAction("Index");
}
}
}
In my Index View, I create a button to trigger a popup modal for creating a new Employee object as follow:
<i class="material-icons"></i><span>Add New Employee</span>
<d id="addEmployeeModal" class="modal fade" name="addEmployeeModal">
<div class="modal-dialog">
<div class="modal-content">
<form method="post" asp-controller="employee" asp-action="create">
<div class="modal-header">
<h4 class="modal-title">Add Employee</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" required="required" name="name"/>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" required="required" name="email"/>
</div>
<div class="form-group">
<label>Address</label>
<input type="text" class="form-control" required="required" name="address"/>
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" required="required" name="phone"/>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel" />
<input type="Submit" class="btn btn-success" value="Add" />
</div>
</form>
</div>
</div>
</d>
But instead of directing to a popup modal, it directs it to url https://localhost:44330/#addEmployeeModal.
What did I do wrong?
Thanks

Answer 1

First of all, you should not be keeping your data inside the controller because the controller runs anew each time it is called and your data will be lost. Use a database for best results.
Your syntax for calling the modal is slightly wrong.
Check here for the correct syntax. It's not href (that's your mistake!) You can mostly copy this code and replace the inner parts with what you have.
https://getbootstrap.com/docs/4.0/components/modal/
*Note: you must be using bootstrap for this to work
Good Luck!
Edit : You can try this: (may need some tweaking)
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Add Employee
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="post" asp-controller="employee" asp-action="create">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" required="required" name="name"/>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" required="required" name="email"/>
</div>
<div class="form-group">
<label>Address</label>
<input type="text" class="form-control" required="required" name="address"/>
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" required="required" name="phone"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary">Add Employee</button>
</div>
</form>
</div>
</div>
</div>
Additionally, It is better practice to send a model into the controller. Use a model on the top of your view, link it to your employee model, and send that into the controller instead.