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

通过从模式窗口传递数据，在部分视图中列出数据

  • 772

我有一个带有表单的模态窗口，我想将输入的数据返回到部分视图并在添加它们时列出它们。我已经有了带有 Ajax.BeginForm() 的模态窗口，我将数据传递给部分视图通过 ViewBag 查看，但不好的是一次只添加一个，而我想要添加更多。

例子：

就像您在 x super 中购买时，扫描了 n 个产品，但在您拥有所有产品之前不会打印票，我想做同样的事情，但在列表中有 n 个对象之前不将其保存在数据库中。

如何将数据保留在列表中，直到您想要保存它而不删除以前的数据？这是我的代码示例，希望您能帮助我：

带有模态窗口的主视图

@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

控制器

公共 ActionResult AddProduct(Object object) {

对象对象 = 新对象（）；对象.特征=对象.特征；ViewBag.objects = 对象；返回 PartialView("_PartialView"); }

局部视图

我有这样的：

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

在此处输入图像描述

这就是我想做的事情

ajax

1 Answers

  1. Best Answer

    从我从问题中可以理解的情况来看，您在保留从模态表单中添加的信息时遇到了麻烦。

    我准备了一个演示，可以作为一个起点。它是用纯 JavaScript 编写的。

    这个演示的想法是向您展示您也可以在添加数据时保留数据，而无需将其传输到服务器，以添加到列表中，因此您不再需要调用控制器方法AgregarProducto()。一切都使用 JavaScript 在客户端级别完成。

    在示例代码中，“添加到列表”按钮执行两个函数agregarObjetos()和listarObjetos(id, data).

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

    AddObjects() 函数：在这个函数中我们捕获从模态表单输入的值。

    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) 函数：此函数接收两个参数：将显示包含已添加对象的表的 div 标记的标识符和数据数组（对象列表）。

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

    因此，一旦您在屏幕上获得了对象列表，您就可以使用以下代码发送所有数据。

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

    上述函数将 JSON 格式的对象数组发送到 url。

    JSON

    因此，您需要一个 MVC5 控制器中的方法来接收对象列表。

    类似于以下内容：

    模型：

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

    属性名称必须与使用 JavaScript 从客户端发送的内容相匹配。

    控制器中的方法：

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

    我把完整的例子留给你，这样你就可以复习了。

    (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