Выполнить код при нажатии на элемент HTML без перенаправления или перезагрузки страницы

Question

Итак, я работаю над интернет-магазином, где пользователь должен иметь возможность добавить товар в корзину, нажав на иконку. Проблема в том, как мне добавить выбранный продукт в базу данных (я использую EFCore). Кроме того, как сказано в заголовке, я не хочу, чтобы страница была перезагружена или что-то подобное.

Что я пробовал до сих пор:

Вызов запроса HttpPost, который перезагрузил бы страницу, так как я возвращаю то же представление, что и я.

Answer 1

Ниже приведен фрагмент кода (JS & C #).Пожалуйста, измените его согласно вашему требованию и укажите в поле для комментариев, если вы столкнулись с какой-либо проблемой. Спасибо.

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

Answer 2

Возможно, мне понадобится дополнительная информация, чтобы помочь. Если вы используете ef-миграции и у вас уже есть Модель, например, под названием Product, но обратите внимание на базу данных, выполните следующие действия:

1. Добавить аннотации данных на вашу модель. Например. [Key] для ProductID, [Display (Name = "Введите код продукта")] для кода продукта и т. Д.
2. Вам необходимо добавить DbContext. Если нет, то вам нужно выбрать базу данных, SQLite или SQL Server, добавить соединение с базой данных. В следующих двух строках будет сгенерирована таблица с использованием терминала, если вы используете VSCode.

dotnet ef migrations add InitialCreated --output-dir Migrations --context YourDbContext
dotnet ef database update --context YourDbContext

3. Затем вам нужно создать ProductsController и Views (Create and Index) Самый простой способ автоматически сгенерировать ваш контроллер и представления - это установить dotnet-aspnet-codegenerator. используйте эту команду для установки: dotnet tool install dotnet-aspnet-codegenerator

Теперь убедитесь, что следующие строки добавлены в ваш файл csproj.

<ItemGroup>  
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />  
    <DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="2.0.0" />  
  </ItemGroup> 

3. запустить aspnet-кодогенератор

dotnet aspnet-codegenerator controller -name ProductsController -m Product -dc YourDbContext --relativeFolderPath Controllers --useDefaultLayout --referenceScriptLibraries

4. Перейдите в ProductsController и найдите следующий код:

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create(

5. Чтобы вызвать Create.cshtml из любого места, оно должно выглядеть примерно так:

<a asp-action="Create" asp-controller="Products" method="post" >Create New</a>

Внимание! Продукты не имеют рабочего контроллера после него.

Ниже приведен пример веб-страницы 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");}
}

Дайте мне знать, помогло ли это?

Answer 3

Вам необходимо сделать следующее: 1) Отправьте запрос GET или POST (в зависимости от ваших потребностей) соответствующему действию / контроллеру в вашем приложении ASP.NET с помощью AJAX. 2) Убедитесь, что метод действия возвращает все, что вам нужно изменить на странице - в большинстве случаев я возвращаю либо частичное представление, либо json. 3) В обратном вызове отправленного вами запроса AJAX используйте представление json / частичное (html), которое было возвращено вам в ответе вашим методом действия, чтобы изменить DOM страницы по мере необходимости. Примечание. Причина, по которой вы возвращаете частичное представление, а не обычное представление, состоит в том, что вы пропускаете _layout в полученном вами HTML.