Así que estoy trabajando en una tienda web donde el usuario debería poder agregar un producto al carrito de compras haciendo clic en un icono. El problema es cómo agregaría el producto seleccionado a la base de datos (estoy usando EFCore). Además, como se dice en el título, no quiero que la página se vuelva a cargar ni nada similar.

Lo que he intentado hasta ahora:

Llamar a una solicitud HttpPost que volvería a cargar la página ya que estoy devolviendo la misma Vista en la que ya estoy.

1
Twenty 9 may. 2019 a las 16:49

3 respuestas

La mejor respuesta

Encuentre el fragmento de código (JS & C #) a continuación. Modifíquelo según sus requisitos y mencione en el cuadro de comentarios si tuvo algún problema. Gracias.

let _data = {
    id: 1,
    name: 'product name',
    count: 4
};
$.ajax({
    type: "POST",
    url: "shoppingcart/add", // "{Controller}/{ActionMethod}". If in same controller, then just use the action method name.
    data: _data,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) { 
        console.log(response); // In real time, read response object & use as required.
    },
    error: function (err) {
        handleError(err);
    }
});

function handleError(err) {
    console.log(`Sorry, an error occurred, details: ${err.error}`);
}

/* C# Controller */

[Route("api/shoppingcart")]
[ApiController]
public class ShoppingCart : ControllerBase
{

    [Route("add")]
    [HttpPost]
    public IActionResult AddProduct(Product product)
    {
        return Ok(product);
    }
}

/* C# model */
public class Product
{
    public int id { get; set; }
    public string name { get; set; }
    public int count { get; set; }
}
3
Prateek Kumar Dalbehera 9 may. 2019 a las 15:54

Debe hacer lo siguiente: 1) Enviar una solicitud GET o POST (según sus necesidades) a la acción / controlador relevante en su aplicación ASP.NET utilizando AJAX. 2) Asegúrese de que el método de acción devuelva lo que necesite cambiar en la página; la mayoría de las veces devuelvo una vista parcial o un json. 3) En la devolución de llamada de la solicitud AJAX que envió, utilice la vista json / parcial (html) que le fue devuelta en la respuesta por su método de acción para alterar el DOM de la página según lo necesite. Nota: La razón por la que está devolviendo una vista parcial y no una vista normal es para omitir el _layout en el HTML que recibe.

0
Teodor Peev 9 may. 2019 a las 14:09

Es posible que necesite más información para poder ayudar. Si está utilizando migraciones ef y ya tiene un Modelo, llamado Producto, por ejemplo, pero tenga en cuenta una base de datos, siga estos pasos:

  1. Agregue anotaciones de datos a su modelo. P.ej. [Clave] para el ProductID, [Display (Name = "Enter Product Code")] para Product Code, etc.
  2. Necesita tener un DbContext agregado. De lo contrario, debe elegir una base de datos, SQLite o SQL Server, agregar la conexión de la base de datos. Las siguientes dos líneas generarán la tabla usando la Terminal si está usando VSCode.
dotnet ef migrations add InitialCreated --output-dir Migrations --context YourDbContext
dotnet ef database update --context YourDbContext
  1. Luego debe crear un Control de Productos y Vistas (Crear e Indizar) La forma más sencilla de generar su controlador y vistas automáticamente es instalando dotnet-aspnet-codegenerator. use este comando para instalarlo: dotnet tool install dotnet-aspnet-codegenerator

Ahora asegúrese de agregar las siguientes líneas a su archivo csproj.

<ItemGroup>  
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />  
    <DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="2.0.0" />  
  </ItemGroup> 
  1. ejecuta el generador de código aspnet
dotnet aspnet-codegenerator controller -name ProductsController -m Product -dc YourDbContext --relativeFolderPath Controllers --useDefaultLayout --referenceScriptLibraries
  1. Vaya a ProductsController y busque el siguiente código:
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create(
  1. Para llamar al Create.cshtml desde cualquier lugar debería verse así:
<a asp-action="Create" asp-controller="Products" method="post" >Create New</a>

¡Nota! Los productos no tienen el controlador mundial después de él.

A continuación se muestra un ejemplo de la página web Create.cshtml

@model test_mvc_webapp.Models.Product

@{
    ViewData["Title"] = "Create";
}

<h1>Create</h1>

<h4>Product</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-controller="Products" asp-action="Create" method="post" enctype="multipart/form-data">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="ProductCode" class="control-label"></label>
                <input asp-for="ProductCode" class="form-control" />
                <span asp-validation-for="ProductCode" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ProductType" class="control-label"></label>
                <input asp-for="ProductType" class="form-control" />
                <span asp-validation-for="ProductType" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Description" class="control-label"></label>
                <input asp-for="Description" class="form-control" />
                <span asp-validation-for="Description" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

¿Hagame saber si esto fue de utilidad?

0
The Solution Architect 9 may. 2019 a las 16:00