ASP.NET Core MVC: Working with dynamic lists inside of a Model

I am fairly new to ASP.NET and to MVC with Razor. Everything has been smooth so far except for working with dynamic lists that are inside models. The objective is to have a view dynamically add/remove fields for each of the objects that are in my list in my model. Below are the classes and page:

public class Candidate

{

public int ID { get; set; }

[DisplayName("First Name"), Required]

public string FirstName { get; set; }

[DisplayName("Last Name"), Required]

public string LastName { get; set; }

[DisplayName("Email Address"), Required, EmailAddress]

public string EmailAddress { get; set; }

[DisplayName("Phone Number"), Required, Phone]

public string PhoneNumber { get; set; }

[DisplayName("Zip Code"), Required, Range(10000, 99999)]

public int ZipCode { get; set; }

public List<Qualification> Qualifications { get; set; }

public Candidate()

{

Qualifications = new List<Qualification>();

}

}

public class Qualification

{

public int ID { get; set; }

[DisplayName("Qualification Type"), Required]

public QualificationType QualificationType { get; set; }

[Required]

public string Name { get; set; }

[DisplayName("Date Started"), DataType(DataType.Date), Required]

public DateTime DateStarted { get; set; }

[DisplayName("Date Completed (optional)"), DataType(DataType.Date)]

public DateTime DateCompleted { get; set; }

}

Here is the page that I am trying to implement the dynamic changes on

@model CandidateManagementApp.Models.Candidate

@{

ViewData["Title"] = "Add";

}

<h4>Candidate Information</h4>

<hr />

<div class="row">

<div class="col-md-4">

<form asp-action="Add">

<div asp-validation-summary="ModelOnly" class="text-danger"></div>

<div class="form-group">

<label asp-for="FirstName" class="control-label"></label>

<input asp-for="FirstName" class="form-control" />

<span asp-validation-for="FirstName" class="text-danger"></span>

</div>

<div class="form-group">

<label asp-for="LastName" class="control-label"></label>

<input asp-for="LastName" class="form-control" />

<span asp-validation-for="LastName" class="text-danger"></span>

</div>

<div class="form-group">

<label asp-for="EmailAddress" class="control-label"></label>

<input asp-for="EmailAddress" class="form-control" />

<span asp-validation-for="EmailAddress" class="text-danger"></span>

</div>

<div class="form-group">

<label asp-for="PhoneNumber" class="control-label"></label>

<input asp-for="PhoneNumber" class="form-control" />

<span asp-validation-for="PhoneNumber" class="text-danger"></span>

</div>

<div class="form-group">

<label asp-for="ZipCode" class="control-label"></label>

<input asp-for="ZipCode" class="form-control" />

<span asp-validation-for="ZipCode" class="text-danger"></span>

</div>

( I want to work with adding/removing to the dynamic list here!)

<div class="form-group">

<input type="submit" value="Add" class="btn btn-dark" />

</div>

</form>

</div>

</div>

<div>

<a asp-action="Index">Back to List</a>

</div>

I have been looking everywhere on how to do this, but most of the results are extremely outdated that offer no help. Any tips guys? I have tried using a button and running a jQuery script, but I can’t get it to reach the script when trying that way.

submitted by /u/SimpleSimon665
[link] [comments]

Leave a Reply