Estoy tratando de crear una página en la que presionaría un botón, 'Agregar opción', y agregaría otro <input asp-for> al formulario durante el tiempo de ejecución, que luego agregaría el <input asp-for> recién agregado <input asp-for> 's value to Model's IEnumerable<PollOption> .
¿Cuál es la mejor manera de hacerlo con JavaScript, si es posible?
Esto es lo que tengo:
index.cshtml
<form method="post"> <div id="optionsContainer" class="col-8 pt-4"> <div class="form-group row"> <div class="col-6 text-center text-light"> Poll Title </div> <div class="col-6"> <input asp-for="PollTitle" class="form-control" /> </div> </div> <br /> <div class="form-group row"> <button id="addNewOptionBtn" class="btn btn-primary">Add New Option</button> <div class="col-6 text-center text-light"> Options: </div> </div> </div> <button type="submit" class="btn btn-success form-control">Create Poll</button> </form> PollModel
[BsonId] public ObjectId Id { get; set; } public int PollId { get; set; } public string? PollTitle { get; set; } public IEnumerable<PollOptionModel>? PollOptions { get; set; } public DateTime? CreatedAt { get; set; } public bool IsActive { get; set; } PollOptionModel
[BsonId] public ObjectId Id { get; set; } public int OptionId { get; set; } public string? Option { get; set; }Cualquier ayuda es apreciada.
Agrega un div con el nombre de la clase option-container .
<form method="post"> ... <div class="form-group row"> <button id="addNewOptionBtn" class="btn btn-primary">Add New Option</button> <div class="col-6 text-center text-light"> Options: <div class="option-container"> </div> </div> </div> ... </form>Luego agregue este script (jquery se incluye de forma predeterminada en .net mvc), esto agregará un evento de clic a su botón que agregará campos de entrada.
@section scripts { <script> $(document).ready(function(){ // click event $("#addNewOptionBtn").click(function(e){ e.preventDefault(); // this will be used as the index of the Ienumerable var count = $(".options").length; // new input fields to be inserted var newOption = "<input name='PollOptions["+count+"].OptionId' placeholder='Option ID' value='"+count+"' /><input name='PollOptions["+count+"].Option' placeholder='Option' /><br/><br/>"; // insert the new input fields $(newOption).appendTo(".option-container"); }) }); </script> }Presione enviar en su formulario, agregue un punto de interrupción en su código y verifique si las nuevas opciones de encuesta están vinculadas al modelo.