Styjun

I'm trying to implement dropboxes that can appear prefilled, and can grow dynamically when you press a button. I started with a basic dropdown box implementation that doesn't grow dynamically. This is my controller+DTO code snippet:

public class TaskDTO

 public string TaskTemplateName get; set;


public IActionResult Create()

 ViewData["TaskTemplateId"] = new SelectList(_context.TaskTemplates, "Id", "Name");
 return View();


public async Task<IActionResult> Create([Bind("Id,TaskTemplateName")] TaskDTO task)
 
 if (ModelState.IsValid)
 
 //Do some stuff
 
 ViewData["TaskTemplateId"] = new SelectList(_context.TaskTemplates, "Id", "Name", task.TaskTemplateName);
 return View(task);
 

This is my create.cshtml razor code:

<h2>Create</h2>

<h4>TemplateTask</h4>
<hr />
<div class="row">
 <div class="col-md-4">
 <form asp-action="Create">
 <div asp-validation-summary="ModelOnly" class="text-danger"></div>
 <div class="form-group">
 <label asp-for="TaskTemplateName" class="control-label"></label>
 ` `<select asp-for="TaskTemplateName" class="form-control" asp-items="ViewBag.TaskTemplateId"></select>
 </div>

Then I looked around and found this link that shows how to create dynamic forms that can grow. I tried to combine that idea with dropdown boxes. Based on that tutorial, here's my new DTO+controller code:

public class TaskTemplateDTO

 public string TaskTemplateName get; set; 


public class TaskDTO

 public List<TaskTemplateDTO> TaskTemplateNames get; set; 



public IActionResult Create()
 
 var vm = new TaskDTO() ;
 ViewData["TaskTemplateId"] = new SelectList(_context.TaskTemplates, "Id", "Name");
 return View(vm);
 

public async Task<IActionResult> Create([Bind("Id,TaskName,TaskTemplateNames,ParentTasks,IsBasicTask,EstimatedTime,RequiredResources")] TaskDTO task)
 
 if (ModelState.IsValid)
 
 //Do some stuff
 

 ViewData["TaskTemplateId"] = new SelectList(_context.TaskTemplates, "Id", "Name", task.TaskTemplateNames);
 return View(task);
 

here's my extra EditorTemplates razor, TaskTemplateDTO.cshtml:

@model Namespace.TaskTemplateDTO

<select asp-for="TaskTemplateName" class="TaskTemplate" asp-items="ViewBag.TaskTemplateId"></select>

This is my create.cshtml razor code:

<h2>Create</h2>

<h4>TemplateTask</h4>
<hr />
<div class="row">
 <div class="col-md-4">
 <form asp-action="Create">
 <div asp-validation-summary="ModelOnly" class="text-danger"></div>
 <div class="form-group">
 <table class="table table-bordered" id="TaskTemplateTable">
 <tr>
 <th>Task Templates</th>
 <th><button type="button" name="add" id="btn_AddTaskTemplate" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
 @Html.EditorFor(f => f.TaskTemplateNames)
 </tr>
 </table>
 </div>
 </form>
 </div>
</div>



@section Scripts 
 @await Html.RenderPartialAsync("_ValidationScriptsPartial");

 <script>

 $("#btn_AddTaskTemplate").click(function () 
 var i = $(".TaskTemplate").length;
 var html = '';
 html += '<tr>';
 html += '<td><select type="text" name="TaskTemplateNames[' + i + '].TaskTemplateName" class="TaskTemplate" /></td>';
 html += '<td></td></tr>';
 );

$('#TaskTemplateTable').append(html);
 </script>

The code above adds the new dropdowns on click, but the dropdowns aren't prefilled with data, what have I done wrong?

You will need to have the select options that you want in the new controls to be available to your javascript method. There are a few ways to do it, the most straightforward would be to hide it in your html page in a hidden select control.

Your CSHTML:

<h2>Create</h2>

//Added the hidden HTML control here
 @Html.DropDownList("hidden-select", 
 new SelectList((IEnumerable) ViewData["TaskTemplateId"]), 
 null, new Dictionary<string, object>
 
 "id", "task-template-names" ,
 "style", "display: none" 
 )
<h4>TemplateTask</h4>
<hr />
<div class="row">
 <div class="col-md-4">
////other things you were doing

This will render in your html as a prepopulated hidden template from which you can build new dropdowns with options on button click.

 $("#btn_AddTaskTemplate").click(function () 
 var i = $(".TaskTemplate").length;
 var html = '';
 html += '<tr>';
 html += '<td><select type="text" name="TaskTemplateNames[' + i + '].TaskTemplateName" class="TaskTemplate">';
 html += document.querySelector("#task-template-names").innerHTML;
 html += '</select></td>';
 html += '<td></td></tr>';
 ); 

I wasn't able to test this code because the setup is beyond my scope here, so you might need to tweak it a little bit. If you encounter any difficult errors, let me know.