Tengo una aplicación en la que publico algunos datos JSON en mi servidor y luego creo un objeto que luego se agregará a una base de datos. Esto se hace mediante el método "Guardar" en mi "SendItemsController":

 [Route("SendItems/Save")]
    [ApiController]
    public class SendItemsController : Controller
    {
        private AppDbContext _db;

      
        public SendItemsController(AppDbContext db)
        {
            _db = db;
        }
        [HttpPost]
        [Consumes("application/json")]
        public async Task<IActionResult> Save([FromBody] ShoppingCart s)
        {
           await _db.ShoppingCarts.AddAsync(s);
           await _db.SaveChangesAsync();
            return RedirectToAction("Index");
        }
        [HttpGet("~/ThankYou/Index")]
        public IActionResult Index()
        {
            return View();
        }
        
    }

Después de agregar el objeto a la base de datos, trato de redirigir al cliente a una página de "Gracias".
Cuando se inicia por primera vez cuando presiono el botón de mi pedido en la página "Carrito", se redirige al cliente a la página "Gracias" sin activar el método "Guardar", pero si vuelvo de la página "Gracias" a la página "Carrito" y presionar el botón nuevamente, el método se dispara, el objeto se agrega a la base de datos y el cliente es redirigido a la página "Gracias", como debería. Mi pregunta es qué debo cambiar a mi código para hacerlo dispara desde la primera vez, no después de regresar y presionar el botón de pedido nuevamente.
Proporcionaré el código que he escrito.

Aquí está el javascript que uso para formar mi objeto JSON y luego PUBLICARLO en mi servidor:

 var orderB = document.getElementById("orderB");
        orderB.addEventListener("click", function () {
          
            var inputName = document.getElementById("inputName").value;
            var inputAddress = document.getElementById("inputAddress").value;
            var inputMail = document.getElementById("inputMail").value;
            var auxArray = [];
            for (var i = 0; i < productsAux.length; i++) {
                if (productsAux[i]!="") {
                auxArray[i-1] = { "productName": productsAux[i].titlu, "productPrice": productsAux[i].pret, "quantity": localStorage.getItem(productsAux[i].titlu) };
                }
            }
            var shoppingCart = {
                productList: auxArray,
                clientName: inputName,
                clientAddress: inputAddress,
                clientMail: inputMail
            };
            
            $.ajax({
                type: "POST",
                data: JSON.stringify(shoppingCart),
                url: "senditems/save",
                contentType: "application/json;charset=utf-8",
                
            })
            
        })
      

Y aquí está el html de mi formulario que utilizo para recopilar el nombre, la dirección y el correo electrónico del cliente:

    <div class="form-group row">
        <div class="col-4">
            <label id="clientName"></label>
        </div>
        <div class="col-6">
            <input  id="inputName" type="text" />
        </div>
    </div>

    <div class="form-group row">
        <div class="col-4">
            <label id="clientAddress"></label>
        </div>
        <div class="col-6">
            <input  id="inputAddress" type="text" />
        </div>

    </div>

    <div class="form-group row">
        <div class="col-4">
            <label id="clientMail"></label>
        </div>
        <div class="col-6">
            <input  id="inputMail" type="text" />
        </div>
    </div>

   

    <div class="form-group row">
        <div class="col-3 offset-4">
            <button  class="btn btn-primary " id="orderB" asp-controller="SendItems" action="Save">ORDER</button>
        </div>
    </div>
</form>
0
ballonDor 29 ago. 2020 a las 19:41

1 respuesta

La mejor respuesta

En primer lugar, no estoy seguro de si ha proporcionado todo el ajax, porque una acción solicitada por ajax no le permitirá redirigir en el backend. Solo puede redirigirlo en su función ajax.

En segundo lugar, ha agregado el evento onclick, no es necesario agregar el asistente de etiqueta asp-controller, ya que generaría una formación incorrecta.

En tercer lugar, el elemento i comienza con 0 pero el índice de auxArray comienza con -1, es posible que la matriz de productos no pase al backend correctamente.

Por fin, la URL de ajax debería ser: /senditems/save.

Aquí hay una demostración funcional como la siguiente:

Modelo:

public class ShoppingCart
{
    public string clientName { get; set; }
    public string clientAddress { get; set; }
    public string clientMail { get; set; }
    public List<Product> productList { get; set; }
}
public class Product
{
    public string productName { get; set; }
    public int productPrice { get; set; }
    public int quantity { get; set; }
}

Vista:

<form>
    //....  
    <div class="form-group row">
        <div class="col-3 offset-4">
            <button class="btn btn-primary" id="orderB" type="button">ORDER</button>
        </div>
    </div>
</form>
@section Scripts
{
    <script>
        var orderB = document.getElementById("orderB");
        orderB.addEventListener("click", function () {    
            var inputName = document.getElementById("inputName").value;
            var inputAddress = document.getElementById("inputAddress").value;
            var inputMail = document.getElementById("inputMail").value;
            var auxArray = [];
            for (var i = 0; i < 1; i++) {
                auxArray[i] = { "productName": "aaaa", "productPrice": 34, "quantity": 3 };
            }
            var shoppingCart = {
                productList: auxArray,
                clientName: inputName,
                clientAddress: inputAddress,
                clientMail: inputMail
            };
            $.ajax({
                type: "POST",
                data: JSON.stringify(shoppingCart),
                url: "/senditems/save",  //add `/`
                contentType: "application/json;charset=utf-8",
                success: function (res) {
                    window.location.href = res; //redirect like this
                }
            })

        })
    </script>
}

Controlador:

[Route("SendItems/Save")]
[ApiController]
public class SendItemsController : Controller
{
    [HttpPost]
    [Consumes("application/json")]
    public async Task<IActionResult> Save([FromBody] ShoppingCart s)
    {
        return Json("YourRedirectUrl");
    }
}

Resultado:

enter image description here

0
Rena 31 ago. 2020 a las 03:57