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

Question

So I am working on a webshop where the user should be able to add a product to the shopping cart by clicking an icon. The problem being is how would I add the selected product to the database (I am using EFCore). Also, as said in the title, I do no want the page to get reloaded or anything similar.

What I tried so far:

Calling an HttpPost request which would reload the page since I am returning the same View as I am already in.

Answer 1

Please find the code snippet (JS & C#) below. Please modify it as per your requirement & mention in the comments box if you faced any issue.. Thanks.

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

You need to do the following: 1) Send either a GET or POST request(depending on your needs) to the relevant action/controller in your ASP.NET application by using AJAX. 2) Make sure the action method returns whatever you need to change on the page - most of the times I either return a partial view or a json. 3) In the callback of the AJAX request that you sent, use the json/partial view(html) that was returned to you in the response by your action method to alter the DOM of the page as you need. Note: The reason you are returning a partial view and not a regular view is to omit the _layout in the HTML that you receive.

Answer 3

I might need more information to be able to help. If you are using ef migrations and have a Model already, called Product for example, but note a database, do the following steps:

1. Add Data Annotations onto your model. Eg [Key] for the ProductID, [Display(Name = "Enter Product Code")] for Product Code, etc.
2. You need to have a DbContext added. If not, then you need to choose a database, SQLite or SQL Server, add the database connection. The following two lines will generate the table using the Terminal if you are using VSCode.

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

3. Then you need to create a ProductsController and Views (Create and Index) The simplest way to generate your controller and views automatically is by installing the dotnet-aspnet-codegenerator. use this command to install it: dotnet tool install dotnet-aspnet-codegenerator

Now make sure the following lines are added to your csproj file.

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

3. run the aspnet-codegenerator

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

4. Go to the ProductsController and look for the following code:

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

5. To call the Create.cshtml from anywhere should look somthing like this:

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

Note! Products does not have the workd Controller after it.

Below is an example of the Create.cshtml web page

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

Let me know if this helped?