在剃刀视图中添加/删除功能

Question

我在 mvc 中要求包含多个员工。所以有一个基本的员工表格，如下所示。 单击“添加员工”按钮应包括下一行的另一部分，以输入其他员工详细信息。 克隆对象将创建该部分的副本。我需要的是，添加/删除将绑定到视图模型列表的多个员工的能力，即在这种情况下 列表

    <form method="POST" enctype="multipart/form-data" id="employeeForm" novalidate>
        @Html.AntiForgeryToken()
        <div class="final-mile__step-employee">            
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="FirstName">First Name</label>
                        @Html.TextBoxFor(model => model.FirstName, new { @class = "form-control", required = "required", placeholder = "First Name" })
                        @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
                    </div>
                    <div class="form-group">
                        <label for="LastName">Last Name</label>
                        @Html.TextBoxFor(model => model.LastName, new { @class = "form-control", required = "required", placeholder = "Last Name" })
                        @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
                    </div>
                    <div class="form-group">
                        <label for="Dob">Date Of Birth</label>
                        @Html.TextBoxFor(model => model.Dob, new { @class = "form-control", required = "required", placeholder = "Date of Birth" })
                        @Html.ValidationMessageFor(model => model.Dob, "", new { @class = "text-danger" })
                    </div>
                </div>                                
            </div>
            <div class="row final-mile__step-control">
                <div class="col justify-content-center">                    
                    <button id="Add Employee">Add Employee</button>
                </div>
            </div>
        </div>
    </form>

任何输入都会有所帮助。

Answer 1

这是一个演示： 查看（TestEmployee.cshtml）：

<form enctype="multipart/form-data" id="employeeForm" novalidate>
@Html.AntiForgeryToken()
<div class="final-mile__step-employee">
    <table id="myTable">
        <thead>
            <tr>
                <th scope="col">FirstName</th>
                <th scope="col">LastName</th>
                <th scope="col">Dob</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var e in Model)
            {
                <tr>
                    <td>
                        <input  asp-for="@e.FirstName" name="FirstName" class = "form-control", required = "required", placeholder = "First Name"/>
                            <span class="field-validation-valid text-danger" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
                      
                    </td>
                    <td>
                        <input   asp-for="@e.LastName" name="LastName" class="form-control" , required="required" , placeholder="Last Name" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
                        
                    </td>
                    <td>
                        <input asp-for="@e.Dob" name="Dob" class="form-control" , required="required" , placeholder="Date of Birth" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="Dob" data-valmsg-replace="true"></span>
                        
                    </td>
                    <td>
                        <button type="button" class="delete">Delete</button>
                    </td>
                </tr>
            }
           
        </tbody>
    </table>
    

    <div class="row final-mile__step-control">
        <div class="col justify-content-center">
            <button type="button" onclick="Add()">Add Employee</button>
        </div>
    </div>
</div>
<button type="button" class="submit">Submit</button>

脚本：

<script>
function Add() {
    $('#myTable > tbody').append('<tr><td><input name="FirstName" class="form-control", required="required", placeholder="First Name" /><span class="field-validation-valid text-danger" data-valmsg-for="FirstName" data-valmsg-replace="true"></span></td>'+
        '<td> <input name="LastName" class="form-control" , required="required" , placeholder="Last Name" /><span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true"></span></td>' +
        '<td><input  name="Dob" class="form-control" , required="required" , placeholder="Date of Birth" /><span class= "field-validation-valid text-danger" data - valmsg -for= "Dob" data - valmsg - replace= "true" ></span ></td>' +
        '<td><button id="b" type = "button" class="delete" > Delete</button ></td ></tr > ');
    };
    $(".delete").on('click', function () {
        $(this).closest("tr").remove();
    });
    $(".submit").on('click', function () {
        var list = [];
        $('#myTable tbody tr').each(function () {
            var obj = {};
            obj.FirstName = $(this).find("td").find("input[name='FirstName']").val(); 
            obj.LastName = $(this).find("td").find("input[name='LastName']").val(); 
            obj.Dob = $(this).find("td").find("input[name='Dob']").val();
            list.push(obj);
        });
        $.ajax({
                type: "POST",
            url: '@Url.Action("TestEmployee", "Test1")',
            contentType: "application/json",
            headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
            data: JSON.stringify(list)
             }).done(function (data) {

            });
        
    })
</script>

Test1Controller：

[HttpGet]
        public IActionResult TestEmployee()
        {
            List<EmployeeViewModel> l = new List<EmployeeViewModel> { new EmployeeViewModel {  FirstName="f1", LastName="l1", Dob="d1"},
            new EmployeeViewModel {  FirstName="f2", LastName="l2", Dob="d2"},
            new EmployeeViewModel {  FirstName="f3", LastName="l3", Dob="d3"}};
            return View(l);
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult TestEmployee([FromBody]List<EmployeeViewModel> l)
        {
            return Ok();
        }

员工视图模型：

public class EmployeeViewModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }

        public string Dob { get; set; }

    }

结果：