0

Estoy creando una aplicación donde creo una lista ul y agregando elementos li con javaScript :

<div class="col-md-6">
  <div class="form-group">
    <label>Selecciona las fechas</label>
    <div class="d-flex flex-row">
        <input type="date" id="myInput" class="form-control" />
        <span onclick="newElement()" class="btn btn-primary btn-sm pr-2" >Agregar</span>
    </div>
 </div>
Aqui se almacenan:
<div class="col-md-4">
  <ul id="myUL" class="todo-list ui-sortable"></ul>
</div>

Este es mi código de JS:

function newElement() {
 var li = document.createElement("li");
 var inputValue = document.getElementById("myInput").value;
 var t = document.createTextNode(inputValue);
 li.appendChild(t);
 if (inputValue === '') {
   alert("Debes ingresar una fecha!");
 } else {
  document.getElementById("myUL").appendChild(li);
 }
 document.getElementById("myInput").value = "";

 var span = document.createElement("SPAN");
 var txt = document.createTextNode("\u00D7");
 span.className = "close";
 span.appendChild(txt);
 li.appendChild(span);

 for (i = 0; i < close.length; i++) {
   close[i].onclick = function() {
   var div = this.parentElement;
   div.style.display = "none";
    }
  }
}

Y asi es como se ve:

introducir la descripción de la imagen aquí

Lo que busco es insertar esos elementos a una lista de mi modelo creado:

public class FechasM
{
   public List<VacacionesFechasM> Fechas{ get; set; }
}

He estado intentando implementando un asp-for="Fechas"

<div class="col-md-4">
  <ul id="myUL" class="todo-list ui-sortable" asp-for="Fechas"></ul>
</div>

pero cuando mando el formulario me llega en null y tambien trate de hacerlo con un select pero sigue llegando en null, alguien me podria ayudar en que estoy haciendo mal u orientarme.

1 respuesta 1

0

Cuando envías un formulario al servidor, lo que se envía son los valores de los elementos de formulario que estén dentro del <form>, como los input, select, textarea y button. NO se envía toda la página, por eso al agregar los datos dentro de <li> nunca se enviarán.

Luego esos inputs deben tener un name y como estas enviando una lista ese name debe estar en formato de array, es decir tener []

Por ejemplo:

Tengo esta vista

<form asp-action="Guardar">
    <input name="listaFechas[]" type="hidden" value="2023-01-01"   />
    <input name="listaFechas[]" type="hidden" value="2023-01-02" />
    <input name="listaFechas[]" type="hidden" value="2023-01-03" />
    <button type="submit">aaaaaaaaa</button>
</form>

introducir la descripción de la imagen aquí

Si te fijas en el action del controller el name listaFechas es el mismo que aplique en la vista

Entonces, lo que puedes hacer es agregar un input[type=hidden] a tu lista, con los valores a enviar, algo así:

function newElement() {
 var li = document.createElement("li");
 var inputValue = document.getElementById("myInput").value;
 var t = document.createTextNode(inputValue);

 //creamos el input
 const input = document.createElement("input");
 input.type="hidden";
 input.value=inputValue;
 input.name="listaFechas[]"; //cambiar al nombre que tu uses en el controlador
 li.appendChild(input);


 li.appendChild(t);
 if (inputValue === '') {
   alert("Debes ingresar una fecha!");
 } else {
  document.getElementById("myUL").appendChild(li);
 }
 document.getElementById("myInput").value = "";

 var span = document.createElement("SPAN");
 var txt = document.createTextNode("\u00D7");
 span.className = "close";
 span.appendChild(txt);
 li.appendChild(span);

 for (i = 0; i < close.length; i++) {
   close[i].onclick = function() {
   var div = this.parentElement;
   div.style.display = "none";
    }
  }
}
3
  • Hola Yussef, no me obtiene ninguna lista cuando mando el formulario, me sale un Count = 0. Veo que en el Value sale [object HTMLInputElement], me imagino que eso afecta al envio, no?¿
    – Hectorepg
    Commented el 2 ene. a las 19:38
  • @Hectorepg Si te refieres a que este value <input name="listaFechas[]" type="hidden" value="[object HTMLInputElement]" /> te aparece de esa manera. Entonces si, claramente tienes un error, no estarías sesteando correctamente el input, el input al no tener un formato valido para un Datetime no lo tomaría en el controller y por eso te aparece una lista vacía
    – Yussef
    Commented el 2 ene. a las 22:59
  • Si, muchas Gracias! ya lo unico que hice es enviar el input.value para cada uno de los li ingresados.
    – Hectorepg
    Commented el 3 ene. a las 0:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.