locked
ASP.NET Core MVC CRUD Modal PopUp RRS feed

  • Question

  • User1571947144 posted

    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

    Sunday, March 15, 2020 12:13 AM

All replies

  • User-1519014291 posted

    Hi purbabernand,

    Thank you for posting here,

    Please just remove this ( href="#addEmployeeModal" ) from add new employee  it should be like below

    <a class="btn btn-success" data-toggle="modal" data-target="#addEmployeeModal"><i class="material-icons">&#xE147;</i><span>Add New Employee</span></a>
    
    
    <a class="btn btn-success" data-toggle="modal" data-target="#addEmployeeModal" name="addEmployeeModal"><i class="material-icons">&#xE147;</i><span>Add New Employee</span></a>
    
     
    
    
    <div id="addEmployeeModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
    
    
    
                <form method="post" asp-controller="Home" 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>
    </div>
    
    



    Sunday, March 15, 2020 5:37 PM