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

您需要执行以下操作： 1）使用AJAX将GET或POST请求（取决于您的需求）发送到ASP.NET应用程序中的相关动作/控制器。 2）确保action方法返回您需要在页面上进行更改的所有内容-大多数情况下，我要么返回部分视图，要么返回json。 3）在您发送的AJAX请求的回调中，使用action方法在响应中返回给您的json / partial view（html）来根据需要更改页面的DOM。注意：返回部分视图而不是常规视图的原因是忽略了收到的HTML中的_layout。

Answer 3

我可能需要更多信息才能提供帮助。如果您正在使用ef迁移并且已经有一个Model（例如，称为Product）的模型，但要注意数据库，请执行以下步骤：

将数据注释添加到模型中。例如。产品ID的[Key]，产品代码的[Display（Name =“ Enter Product Code”）），等等。
您需要添加一个DbContext。如果没有，那么您需要选择一个数据库，SQLite或SQL Server，添加数据库连接。如果使用VSCode，则以下两行将使用终端生成表。

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

然后，您需要创建一个ProductsController和视图（创建和索引）自动生成控制器和视图的最简单方法是安装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>

运行aspnet-codegenerator

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

转到ProductsController并查找以下代码：

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

从任何地方调用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");}
}

让我知道这是否有帮助？

单击html元素时执行代码，而无需重定向或重新加载页面

到目前为止我尝试过的事情：

3 个答案: