javascript - 在 asp.not mvc 核心应用程序中动态添加/删除数组中的字段而不破坏它

Question

我正在使用 asp.net MVC 应用程序。我需要为一个部分添加动态字段。我可以添加这些。我还要从视图/UI 中删除动态文本字段。但是当删除文本时，我无法动态更改 ID/名称。

这就是我的观点：

@model AspDotNetAndAjax.ViewModels.AddDetails
<br />
<br />
<div class="container">
    <form  asp-action="Create" asp-controller="Home" method="post">
        <div class="row">
            <div class="col-4">
                <label asp-for="@Model.FirstName"></label>
                <input type="text" asp-for="@Model.FirstName" class="form-control" />
            </div>
            <div class="col-4">
                <label asp-for="@Model.MiddleName"></label>
                <input type="text" asp-for="@Model.MiddleName" class="form-control" />
            </div>
            <div class="col-4">
                <label asp-for="@Model.LastName"></label>
                <input type="text" asp-for="@Model.LastName" class="form-control" />
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <label asp-for="@Model.Email"></label>
                <input type="text" asp-for="@Model.Email" class="form-control" />
            </div>
        </div>
        <br />

        <div class="table-responsive">
            <span asp-validation-for="@Model.Education[0].School" class="text-danger"></span>

            <h2 class="content-caption mb-0 d-flex justify-content-between">
                Education
                <a class="btn-add add-recordEducation" data-added="0"><i class="la la-plus la-lg"></i></a>
            </h2>
            <table class="table table-bordered m-0" id="tbl_posts2">
                <thead>
                    <tr>
                        <th>School Name</th>
                        <th>Date of Completion</th>
                        <th>Interest</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="tbl_posts_body2">
                    <tr id="re-0">
                        <td><input asp-for="@Model.Education[0].School" type="text" placeholder="" class="form-control"></td>
                        <td><input asp-for="@Model.Education[0].CompletionDate" type="text" placeholder="" class="form-control"></td>
                        <td><input asp-for="@Model.Education[0].Interest" type="text" placeholder="" class="form-control"></td>
                        <td class="text-center"><a class="btn btn-xs delete-edurecord" edu-data-id="1"><i class="la la-trash la-lg text-danger"></i></a></td>
                    </tr>

                </tbody>
                <tbody id="Edu-2">
                </tbody>
            </table>
        </div>
    </form>
    <button class="btn btn-success btn-block">Submit</button>
</div>
@section Scripts{
    <script>
        $(document).ready(function () {
            alert("Page Load");

            //Education
            var j = 1;
            $('a.add-recordEducation').click(function () {
                $("#Edu-2").append('<tr><td><input name="Education[' + j + '].School" type="text" class="form-control"></td><td><input name="Education[' + j + '].Degree" type="text" placeholder="" class="form-control"></td><td><input name="Education[' + j + '].Interest" type="text" placeholder="" class="form-control" ></td><td class="text-center"><a class="btn btn-xs delete-edurecord" edu-data-id="1"><i class="la la-trash la-lg text-danger"></i></a></td></tr>');
                j++;
            });
            $('#Edu-2').on('click', '.delete-edurecord', function () {
                $(this).parent().parent().remove();

            });



        });
    </script>

}

视图模型：

using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace AspDotNetAndAjax.ViewModels
{
    public class AddDetails
    {
        public string FirstName { get; set; }
        public string MiddleName { get; set; }
        [Required]
        public string LastName { get; set; }

        [Required]
        public string Email { get; set; }

        [Required]
        public DateTime DOB { get; set; }


        public List<EmployeeEducationViewModel> Education { get; set; }
    }

    public class EmployeeEducationViewModel
    {
        [Required]
        public string School { get; set; }
        public DateTime? CompletionDate { get; set; }
        public string Interest { get; set; }

    }

}

当我从教育部分删除/删除一个“tr”时，它会从 UI 中删除，但数组的索引没有改变，因为当我提交表单时它没有得到数组/列表的所有元素（在控制器上的视图）模型。我收到，只列出最后一次删除或第一次删除的索引。

我没有得到我做错了什么。请帮忙。

标签： javascriptjqueryasp.netarraysasp.net-mvc

Answer 1

您可以创建一些函数，每次单击删除按钮重置您的array. 在此函数中，您需要遍历所有内容trs，然后使用.find() 获取需要重置名称的输入框，最后用于attr("name", "newvalue");更改值。

演示代码：

$(document).ready(function() {

  //Education
  var j = 1;
  //added class to inputs
  $('a.add-recordEducation').click(function() {
    $("#Edu-2").append('<tr><td><input name="Education[' + j + '].School" type="text" class="form-control school"></td><td><input name="Education[' + j + '].Degree" type="text" placeholder="" class="form-control degree"></td><td><input name="Education[' + j + '].Interest" type="text" placeholder="" class="form-control interest" ></td><td class="text-center"><a class="btn btn-xs delete-edurecord" edu-data-id="1"><i class="la la-trash la-lg text-danger">-</i></a></td></tr>');
    j++;
  });
  $('#Edu-2').on('click', '.delete-edurecord', function() {
    $(this).parent().parent().remove();
    j--; //decremnt count
    resetValues(); //call to reset values
  });

  function resetValues() {
    counter = 1; //initialze to 1
    //looping through tbody
    $("#Edu-2 tr").each(function() {
      //find .school class replace its name value
      $(this).find('.school').attr("name", "Education[" + counter + "].School");
      $(this).find('.degree').attr("name", "Education[" + counter + "].Degree");
      $(this).find('.interest').attr("name", "Education[" + counter + "].Interest");
      counter++; //increment count
    })
  }


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered m-0" id="tbl_posts2">
  <thead>
    <tr>
      <th>School Name</th>
      <th>Date of Completion</th>
      <th>Interest</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody id="tbl_posts_body2">
    <tr id="re-0">
      <td><input asp-for="@Model.Education[0].School" type="text" placeholder="" class="form-control"></td>
      <td><input asp-for="@Model.Education[0].CompletionDate" type="text" placeholder="" class="form-control"></td>
      <td><input asp-for="@Model.Education[0].Interest" type="text" placeholder="" class="form-control"></td>
      <td class="text-center"><a class="btn btn-xs delete-edurecord" edu-data-id="1"><i class="la la-trash la-lg text-danger">-</i></a></td>
    </tr>

  </tbody>
  <tbody id="Edu-2">
  </tbody>
</table>

<h2 class="content-caption mb-0 d-flex justify-content-between">
  Education
  <a class="btn-add add-recordEducation" data-added="0"><i class="la la-plus la-lg">+</i></a>
</h2>