Home / Questions / 21678
Accepted
Antonio
Asked: 2020-08-26 08:28:47 +0800 CST 2020-08-26 08:28:47 +0800 CST

list data in a partial view by passing it from a modal window

  • 772

I have a modal window with a form from which I want to return the data entered to a partial view and list them as they are added. I already have the modal window with an Ajax.BeginForm() and I pass the data to the partial view through a ViewBag but the bad thing is that only one is added at a time and what I want is to add more.

Example:

Like when you make a purchase in x super, n products are scanned but the ticket is not printed until you have all the products, I want to do the same thing but not save it in the database until you have n objects on the list.

How to keep the data in the list until you want to save it without removing the previous ones? Here my code example I hope you can help me:

Main view with modal window

@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

Controller

public ActionResult AddProduct(Object object) {

Object object = new Object(); object.feature=object.feature; ViewBag.objects = object; return PartialView("_PartialView"); }

Partial view

I have it like this:

<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>

enter image description here

It's something like that what I want to do

ajax

1 Answers

  1. Best Answer

    From what I could understand from the question, you are having trouble preserving the information that you add from your modal form.

    I have prepared a demo, which can serve as a starting point. It is programmed with pure JavaScript.

    The idea of ​​this demo is to show you that you can also retain the data as you add it, without it traveling to the server, to add to the list, so you no longer need to call your controller method AgregarProducto(). Everything is done at the client level with JavaScript.

    In the sample code, the "Add to List" button executes two functions agregarObjetos()and listarObjetos(id, data).

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

    AddObjects() function: In this function we capture the values ​​entered from the modal form.

    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);
}

    ListarObjetos(id, data) function: This function receives two parameters: the identifier of the div tag that will show the table with the objects that are added and the data array (list of objects).

    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.
}

    So, once you have the list of objects on the screen, you can send all the data, with the following code.

      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.");
        }
      }
    });
  });

    The above function sends the array of objects in JSON format to a url.

    JSON

    So you would need a method in an MVC5 controller that receives a list of objects.

    Something like the following:

    Model:

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

    The attribute names must match what is sent from the client with JavaScript.

    Method in a Controller:

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

    I leave you the complete example so you can review it.

    (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>

    • 3