Quantcast
Channel: ASP.NET Core
Viewing all articles
Browse latest Browse all 9386

ASP.NET Core MVC CRUD Modal PopUp

$
0
0

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">&#xE147;</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">&times;</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


Viewing all articles
Browse latest Browse all 9386

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>