使用模态对话框modal 实现CURD新添 修改 删除 Ajax提交

 

 

namespace MvcMovie.Models
{
    public class Employee
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; }

    }
}

　

 public class EmployeeViewModel
    {
        public List<Employee>? Employees { get; set; }
        public Employee Employee { get; set; }=new Employee();
    }

　

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using MvcMovie.Data;
using MvcMovie.Models;
using MvcMovie.ViewModels;

namespace MvcMovie.Controllers
{
    public class EmployeeController : Controller
    {
        MvcMovieContext _dbContext;
        public EmployeeController(MvcMovieContext dbContext)
        {
            _dbContext = dbContext;
        }
        public async Task<IActionResult> Index()
        {
            return View(await GetViewModel());
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create(EmployeeViewModel viewModel)
        {
            if (!ModelState.IsValid)
            {
                return View("Index", await GetViewModel());
            }
            Employee newModel = new Employee();
            newModel.Name = viewModel.Employee.Name;
            _dbContext.Employees.Add(newModel);
            _dbContext.SaveChanges();
            return RedirectToAction("Index");
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Update(EmployeeViewModel viewModel)
        {
            var empfromDb = _dbContext.Employees.Find(viewModel.Employee.Id);
            empfromDb.Name = viewModel.Employee.Name;
            _dbContext.Employees.Update(empfromDb);
            _dbContext.SaveChanges();
            return RedirectToAction("Index");
        }
        [HttpPost]
        public JsonResult Delete(int id)
        {
            bool result = false;
            var model = _dbContext.Employees.Find(id);
            if (model != null)
            {
                result = true;
                _dbContext.Employees.Remove(model);
                _dbContext.SaveChanges();
            }
            return Json(result);
        }
        public JsonResult GetEmployee(int id)
        {
            var model = _dbContext.Employees.Find(id);
            return Json(model);
        }

        private async Task<EmployeeViewModel> GetViewModel()
        {
            EmployeeViewModel viewModel = new EmployeeViewModel();
            viewModel.Employees = await _dbContext.Employees.ToListAsync();
            return viewModel;
        }
       
    }
}

@model EmployeeViewModel

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    新添员工
</button>

<!-- 新添员工 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div id="saveForm" class="modal-content" >
            <form id="saveForm" asp-action="Create" method="post">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">新添员工</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label asp-for="Employee.Name" class="control-lable"></label>
                        <input asp-for="Employee.Name" class="form-control" />
                        <span asp-validation-for="Employee.Name" class="text-danger"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btnCancel" data-bs-dismiss="modal">Close</button>
                    <button id="btnSave" type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--删除员工-->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="saveForm"  method="post">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">删除员工</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h2>你真的想删除这个员工吗？</h2>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btnCancel" data-bs-dismiss="modal">Close</button>
                    <button id="btnDelete" type="button" class="btn btn-primary">删除</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--编辑-->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form asp-action="Update" id="EditForm" method="post">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input class="updateId" type="hidden" asp-for="Employee.Id" />
                        <label asp-for="Employee.Name" class="control-lable"></label>
                        <input id="empName" asp-for="Employee.Name" class="form-control" />
                        <span asp-validation-for="Employee.Name" class="text-danger"></span>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btnCancel" data-bs-dismiss="modal">Close</button>
                    <button id="btnSave" type="submit" class="btn btn-primary">修改</button>
                </div>
            </form>
        </div>
    </div>
</div>

<input type="hidden" id="EmpId" />

<table class="table">
    <thead class="thead-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Employees)
        {
            <tr>
                <th scope="row">@item.Id</th>
                <td>@item.Name</td>
                <td>
                    <a class="btn btn-danger" onclick="EditForm(@item.Id)" id="EditForm">编辑</a>|
                    <a class="btn btn-danger" onclick="DeleteForm(@item.Id)" id="showModal" >删除</a>
                </td>
            </tr>
        }
    </tbody>
</table>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
     <script>
        //保存当前Id到 EmpId 文本控件
        var DeleteForm = function (id) {
            $("#EmpId").val(id);
            $("#deleteModal").modal('show');
        }
        //打开对话框并初始化控件
        var EditForm = function (id) {
            $.ajax({
                type: "GET",
                url: "/Employee/GetEmployee",
                data: { id: id},
                success: function (employee) {
                    $("#editModal").modal('show');
                    $("#empName").val(employee.name);
                    $(".updateId").val(employee.id);
                }
            })
        }
         $(document).ready(function()
         {
             //$("#btnSave").click(function()
             //{
             //    var empForm=$("#saveForm").serialize();
             //    $.ajax({
             //        type:"POST",
             //        url:"/Employee/Create",
             //        data:empForm,
             //        success:function(){
             //            window.location.href="/Employee/Index";
             //        }
             //    })
             //})
             //当点取消按钮时，导航到首页
             $(".btnCancel").click(function(){
                 window.location.href="/Employee/Index";
             })
          
             $("#btnDelete").click(function(){
                 var currentId=$("#EmpId").val();
                 $.ajax({
                     type:"POST",
                     url:"/Employee/Delete",
                    data: { id: currentId },
                     success:function(result){
                         if(result){
                             $("#EmpId").val(null);
                             window.location.href="/Employee/Index";
                         }
                         else{
                             alert("删除失败");
                         }
                     }
                 })
             })
            
             
         })
     </script>
}