Hi,
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:
<a href="#addEmployeeModal" class="btn btn-success" data-toggle="model"><i class="material-icons"></i><span>Add New Employee</span></a><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