如何解决动态添加/删除数组中的字段而不会在asp.not mvc核心应用程序中破坏字段
我正在使用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>
}
viewmodel：
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中删除，但是数组的索引没有改变，因为当我提交表单时，它没有获取数组的所有元素/ list（在视图上）模型在控制器上。我收到，仅列出直到最后删除或首次删除的索引。
我没有弄错我在做什么。 请帮忙。
解决方法
您可以创建一些函数，该函数将在您每次单击删除按钮以重置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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
