asp.net - ASP.Net Core MVC CRUD 弹出模式

Question

我刚开始使用 ASP.Net Core MVC。我很难创建弹出模式。我试图创建一个简单的页面。 

下面是我的模型：

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; }

    }
}

下面是我的员工控制器：

namespace CoreModal.Controllers
{
    public class EmployeeController : Controller
    {
        public static List<Employee> empList = new List<Employee>() {
            new Employee {Id=1, Name="John", Email="[e-mail]", 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");
        }
    }
}

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

<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>

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

我做错了什么？

谢谢

标签： asp.netasp.net-coreasp.net-core-mvc

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>

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