title: ASP.Net Core MVC CRUD PopUp Modal
body: <p>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. </p>
  
  <p>Below is my model:</p>
  
  <pre><code>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; }
  
      }
  }
  </code></pre>
  
  <p>Below is my EmployeeController:</p>
  
  <pre><code>namespace CoreModal.Controllers
  {
      public class EmployeeController : Controller
      {
          public static List&lt;Employee&gt; empList = new List&lt;Employee&gt;() {
              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");
          }
      }
  }
  </code></pre>
  
  <p>In my Index View, I create a button to trigger a popup modal for creating a new Employee object as follow:</p>
  
  <pre><code>&lt;a href="#addEmployeeModal" class="btn btn-success" data-toggle="model"&gt;&lt;i class="material-icons"&gt;&amp;#xE147;&lt;/i&gt;&lt;span&gt;Add New Employee&lt;/span&gt;&lt;/a&gt;
  
  
  
  
  
  
  &lt;d id="addEmployeeModal" class="modal fade" name="addEmployeeModal"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;form method="post" asp-controller="employee" asp-action="create"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;h4 class="modal-title"&gt;Add Employee&lt;/h4&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label&gt;Name&lt;/label&gt;
                              &lt;input type="text" class="form-control" required="required" name="name"/&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label&gt;Email&lt;/label&gt;
                              &lt;input type="text" class="form-control" required="required" name="email"/&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label&gt;Address&lt;/label&gt;
                              &lt;input type="text" class="form-control" required="required" name="address"/&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label&gt;Phone&lt;/label&gt;
                              &lt;input type="text" class="form-control" required="required" name="phone"/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel" /&gt;
                          &lt;input type="Submit" class="btn btn-success" value="Add" /&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/d&gt;
  </code></pre>
  
  <p>But instead of directing to a popup modal, it directs it to url <a href="https://localhost:44330/#addEmployeeModal" rel="nofollow noreferrer">https://localhost:44330/#addEmployeeModal</a>.</p>
  
  <p>What did I do wrong?</p>
  
  <p>Thanks</p>