ASP.Net Core MVC CRUD 弹出模态

Question

我刚刚开始使用 ASP.Net Core MVC。我在创建弹出模式时遇到困难。我尝试创建一个简单的页面。\xc2\xa0

\n\n

下面是我的模型：

\n\n

namespace CoreModal.Models\n{\n    public class Employee\n    {\n        public int Id { get; set; }\n        public string Name { get; set; }\n        public string Email { get; set; }\n        public string Address { get; set; }\n        public string Phone { get; set; }\n\n    }\n}\n

\n\n

下面是我的 EmployeeController：

\n\n

namespace CoreModal.Controllers\n{\n    public class EmployeeController : Controller\n    {\n        public static List<Employee> empList = new List<Employee>() {\n            new Employee {Id=1, Name="John", Email="john@gmail.com", Address="Campbell", Phone="1234"}\n        };\n\n        public IActionResult Index()\n        {\n            ViewBag.Employee = empList;\n            return View();\n        }\n\n        [HttpPost]\n        [Route("create")]\n        public IActionResult Create(string name, string email, string address, string phone)\n        {\n            var newEmployee = new Employee\n            {\n                Name = name,\n                Email = email,\n                Address = address,\n                Phone = phone\n            };\n\n            empList.Add(newEmployee);\n            ViewBag.Employee = empList;\n            return RedirectToAction("Index");\n        }\n    }\n}\n

\n\n

在我的索引视图中，我创建一个按钮来触发弹出模式来创建新的 Employee 对象，如下所示：

\n\n

<a href="#addEmployeeModal" class="btn btn-success" data-toggle="model"><i class="material-icons">&#xE147;</i><span>Add New Employee</span></a>\n\n\n\n\n\n\n<d id="addEmployeeModal" class="modal fade" name="addEmployeeModal">\n        <div class="modal-dialog">\n            <div class="modal-content">\n                <form method="post" asp-controller="employee" asp-action="create">\n                    <div class="modal-header">\n                        <h4 class="modal-title">Add Employee</h4>\n                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\n                    </div>\n                    <div class="modal-body">\n                        <div class="form-group">\n                            <label>Name</label>\n                            <input type="text" class="form-control" required="required" name="name"/>\n                        </div>\n                        <div class="form-group">\n                            <label>Email</label>\n                            <input type="text" class="form-control" required="required" name="email"/>\n                        </div>\n                        <div class="form-group">\n                            <label>Address</label>\n                            <input type="text" class="form-control" required="required" name="address"/>\n                        </div>\n                        <div class="form-group">\n                            <label>Phone</label>\n                            <input type="text" class="form-control" required="required" name="phone"/>\n                        </div>\n                    </div>\n                    <div class="modal-footer">\n                        <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel" />\n                        <input type="Submit" class="btn btn-success" value="Add" />\n                    </div>\n                </form>\n            </div>\n        </div>\n    </d>\n

\n\n

但它不是定向到弹出模式，而是将其定向到 url https://localhost:44330/#addEmployeeModal。

\n\n

我做错了什么？

\n\n

谢谢

\n

Answer 1

首先，您不应该将数据保存在控制器内，因为控制器每次被调用时都会重新运行，并且您的数据将会丢失。使用数据库以获得最佳结果。

您调用模态的语法略有错误。在此处检查正确的语法。它不是 href （这是你的错误！）你可以复制这段代码并用你拥有的内容替换内部部分。

https://getbootstrap.com/docs/4.0/components/modal/

*注意：您必须使用引导程序才能使其工作

祝你好运！

编辑：你可以尝试这个：（可能需要一些调整）

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

此外，最好将模型发送到控制器中。使用视图顶部的模型，将其链接到您的员工模型，然后将其发送到控制器中。