1

Tengo una ventana modal con un formulario del cual quiero retornar los datos ingresados a una vista parcial y ponerlos en lista como se vallan agregando Ya tengo la ventana modal con un Ajax.BeginForm() y paso los datos a la vista parcial mediante un ViewBag pero lo malo es que solo se agrega uno a la vez y lo que yo quiero es agregar mas.

Ejemplo:

Como cuando realizas una compra en x super , se escanean n productos pero no se imprime el ticket hasta ya tener todos los productos , lo mismo quiero hacer pero que no se guarde en la base de datos hasta tener n objetos en la lista.

¿Como mantener los datos en la lista hasta que se desee guardarlos sin quitar los anteriores? Aquí mi ejemplo de código espero puedan ayudarme:

Vista principal con ventana modal

@model Proyecto.Models.Objeto
<div class="row">
     <div class="col-md-12">
          <input type="text" class="form-control" name="Cantidad" >
     </div>
</div>

<div class="panel-body" id="Objetos">
</div>
<div id="myModal" class="modal fade" role="dialog">
@using (Ajax.BeginForm("AgregarObjeto", new AjaxOptions {UpdateTargetId = "Objetos" }))
  {
  <div class="col-md-12">
    <input type="text" class="form-control" name="Carecteristica1"/>
  </div>
  }
</div

Controlador

public ActionResult AgregarProducto(Onjeto objeto) {

Objeto objeto = new Objeto(); objeto.caracteristica=objeto.caracteristica; ViewBag.objetos = objeto; return PartialView("_VistaParcial"); }

Vista Parcial

lo tengo asi :

<div class="col-md-4">
ViewBag.Objeto.NombreObjeto
</div>
<div class="col-md-4">
ViewBag.Objeto.Caracteristica1
</div>
<div class="col-md-4">
ViewBag.Objeto.Caracteristica2
</div>

introducir la descripción de la imagen aquí

es algo asi lo que quiero hacer

3
  • no entendi, si el modal permite ingresar un dato esta claro que al confirmar vas a registra solo uno, no entendi como buscas agregar mas Commented el 25 ago. 2016 a las 17:02
  • @LeandroTuttini agregue una imagen que encontré ahorita buscando espero aclare mas mi pregunta
    – Antonio
    Commented el 25 ago. 2016 a las 17:12
  • 1
    bien, entiendo que el boton "+" abre el popup para crear o seleccionar una ciudad, si es asi entonces agregas de a uno, sigo sin entender que seria el "agregar mas" Commented el 25 ago. 2016 a las 17:14

1 respuesta 1

3

Por lo que pude entender de la pregunta, tienes problemas para preservar la información que vayas añadiendo desde tu formulario modal.

He preparado una demostración, que puede servirte como punto de partida. Está programado con JavaScript puro.

La idea de esta demostración es mostrarte que también puedes retener los datos a medida que vayas añadiendo, sin que viaje hacia el servidor, para ir añadiendo a la lista, por lo que ya no necesitarías ejecutar el método de tu controlador AgregarProducto(). Todo se realiza a nivel de cliente con JavaScript.

En el código de ejemplo, el botón «Añadir a la lista», ejecuta dos funciones agregarObjetos() y listarObjetos(id, data).

var btnAdd = document.getElementById("btnAdd");
btnAdd.addEventListener("click", function() {
    agregarObjetos();
    listarObjetos("Objetos", objetos);
});

Función agregarObjetos(): En esta función capturamos los valores ingresados desde el formulario modal.

function agregarObjetos() {
    var objeto, nombre, c1, c2;

    nombre = document.getElementById("nombre"); // Se obtiene acceso a la caja de texto «nombre».
    c1 = document.getElementById("c1");
    c2 = document.getElementById("c2");

    // El objeto «objeto» contendrá los datos del formulario.
    objeto = {}; // Se inicializa el objeto «objeto».
    objeto.nombre = nombre.value; // Se añade el contenido de la caja de texto «nombre» en el atributo «objeto.nombre».
    objeto.c1 = c1.value;
    objeto.c2 = c2.value;

    // Se añade un objeto al array «objetos».
    objetos.push(objeto);
}

Función listarObjetos(id, data): Esta función recibe dos parámetros: el identificador de la etiqueta div que mostrará la tabla con los objetos que se vayan añadiendo y el array de datos (lista de objetos).

function listarObjetos(id, data) {
    var divData, contenido, i; // Declaración de variables.
    divData = document.getElementById(id); // Obtienes acceso a la etiqueta div que imprimirá la tabla de datos.
    contenido = "<table class=\"table table-bordered\"><thead><tr><th>Nombre</th><th>Característica 1</th><th>Característica 2</th></tr></thead>";
    contenido += "<tbody>";
    for (i = 0; i < data.length; i++) {
      contenido += "<tr><td>" + data[i].nombre + "</td><td>" + data[i].c1 + "</td><td>" + data[i].c2 + "</td></tr>";
    }
    contenido += "</tbody></table>";
    divData.innerHTML = contenido; // La tabla resultante se añade al div.
}

Entonces, una vez que tienes la lista de objetos en pantalla, puedes enviar todos los datos, con el siguiente código.

  var btnGuardar = document.getElementById("btnGuardar");
  btnGuardar.addEventListener("click", function() {
    enviarServidor({
      type: "POST",
      url: "http://httpbin.org/post", // Aquí debes añadir la url hacia un método de tu controlador que reciba una lista de objetos. (List<Object>).
      data: JSON.stringify(objetos),
      contentType: "application/json; charset=utf-8",
      callback: function(xhr) {
        if (xhr.target.readyState === 4 && xhr.target.status === 200) {
          alert("Se envió la lista de objetos al servidor.");
        }
      }
    });
  });

La función de arriba, envía a una url, el array de objetos en formato JSON.

JSON

Entonces, necesitarías un método en un controlador MVC5 que reciba una lista de objetos.

Algo como lo siguiente:

Modelo:

public class Objetos
{
   public string nombre {get; set;}
   public string c1 {get; set;}
   public string c2 {get; set;}
}

Los nombres de los atributos deben coincidir con lo que se envía desde el cliente con JavaScript.

Método en un Controlador:

public JsonResult Guardar(List<Objetos> obj)
{
   Console.Write(obj[0].nombre); // Debe contener el valor «Objeto 1».
   // Otras operaciones.
   return Json("Correcto");
}

Te dejo el ejemplo completo para que lo puedas revisar.

(function() {
  var objetos = []; // Contenedor de objetos.
  var btnAdd = document.getElementById("btnAdd");
  var btnGuardar = document.getElementById("btnGuardar");

  btnAdd.addEventListener("click", function() {
    agregarObjetos();
    listarObjetos("Objetos", objetos);
  });

  /* Guardar todos los datos. */
  btnGuardar.addEventListener("click", function() {
    enviarServidor({
      type: "POST",
      url: "http://httpbin.org/post",
      data: JSON.stringify(objetos),
      contentType: "application/json; charset=utf-8",
      callback: function(xhr) {
        if (xhr.target.readyState === 4 && xhr.target.status === 200) {
          alert("Se envió la lista de objetos al servidor.");
        }
      }
    });
  });

  function agregarObjetos() {
    var objeto, nombre, c1, c2;

    nombre = document.getElementById("nombre");
    c1 = document.getElementById("c1");
    c2 = document.getElementById("c2");

    // El objeto «objeto» contendrá los datos del formulario.
    objeto = {};
    objeto.nombre = nombre.value;
    objeto.c1 = c1.value;
    objeto.c2 = c2.value;

    // Se añade un objeto al array «objetos».
    objetos.push(objeto);
  }

  function listarObjetos(id, data) {
    var divData, contenido, i;
    divData = document.getElementById(id);
    contenido = "<table class=\"table table-bordered\"><thead><tr><th>Nombre</th><th>Característica 1</th><th>Característica 2</th></tr></thead>";
    contenido += "<tbody>";
    for (i = 0; i < data.length; i++) {
      contenido += "<tr><td>" + data[i].nombre + "</td><td>" + data[i].c1 + "</td><td>" + data[i].c2 + "</td></tr>";
    }
    contenido += "</tbody></table>";
    divData.innerHTML = contenido;
  }

  // Helper genérico para peticiones AJAX.
  function enviarServidor(options) {
    var newXHR = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
    options.async = true;
    options.contentType = options.contentType || "application/x-www-form-urlencoded";
    newXHR.open(options.type, options.url, options.async || true);
    newXHR.setRequestHeader("Content-Type", options.contentType);
    newXHR.send((options.type == "POST") ? options.data : null);
    newXHR.onreadystatechange = options.callback;
    return newXHR;
  }
})();
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Demo</h2>

  <div class="panel-body" id="Objetos">
  </div>
  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Añadir</button>
  <button id="btnGuardar" type="button" class="btn btn-primary">
    Guardar todos los datos
  </button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Añadir Objetos</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="nombre">Nombre:</label>
              <input type="text" class="form-control" id="nombre">
            </div>
            <div class="form-group">
              <label for="c1">Característica 1:</label>
              <input type="text" class="form-control" id="c1">
            </div>
            <div class="form-group">
              <label for="c2">Característica 2:</label>
              <input type="text" class="form-control" id="c2">
            </div>

            <button id="btnAdd" type="button" class="btn btn-default" data-dismiss="modal">Añadir a la lista</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        </div>
      </div>

    </div>
  </div>

</div>

2
  • En esta versión de código, no se necesita; recuerda que es JavaScript puro. La demo funciona sin problemas, porque el código JavaScript se encuentra dentro de las etiquetas <body>. Commented el 26 ago. 2016 a las 19:07
  • Sí. Un detalle adicional también, es que si este código lo quieres ejecutar dentro de las etiquetas <head></head>, deberás añadir al principio del código: window.onload = function() { /* Programación en JavaScript.*/ };. Commented el 26 ago. 2016 a las 19:11

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.