I am working with asp.net MVC application. I needed to add dynamic fields for a section. I am able to add those. I am also to remove dynamic text fields from the view/UI. But I am not able to dynamically change Id/name when a text is removed.
This is how my view looks like:
@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; }
}
}
When I remove/delete a ‘tr’ from the education section it is getting removed from UI but the index of the array is not changing, because of that when I submit the form it don’t get all the elements of array/list (on the view) model on the controller. I receive, list only till the index which was last removed or first removed.
I am not getting what I am doing wrong.
Please help.
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
You can create some function which will get called everytime you clicked on remove button to reset your array . In this function you need to loop through all trs then using .find() get the input-box where you need to reset name and finally use attr("name", "newvalue"); to change value.
Demo Code :
$(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>All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0