How to send static html data over a web api in asp.net?

Question

I have a product page developed in ASP.NET which I hard coded the values of the products and at the moment is just frontend. On this page, I have product information like Product name and price and a Add to cart button below these items on the page. I have a web api which I would like to send this product information over. For test purposes, it works when I am using an input form but I will like to know how to send these static info like name and the price when I click the button. Below is my html page


    
        
        
            Samsung note 10 plus
            € 1071.28
            
                Available 
            
            New

And In my HomeController, I have the following. Like I said earlier, this works with forms but is there any way i can send this product info when I click on the Add to cart button?

 [HttpPost]
        public ActionResult AddToCart(Product product)
        {
            using (var client =  new HttpClient())
            {
                client.BaseAddress = new Uri("http://localhost:60036/");
                var content = new StringContent(
                    JsonConvert.SerializeObject(product),
                    Encoding.UTF8,
                    MediaTypeNames.Application.Json);
                var postTask = client.PostAsync("api/Product", content);
                var result = postTask.Result;
                if (result.IsSuccessStatusCode)
                {
                    return this.RedirectToAction("Home");
                }
            }

            this.ModelState.AddModelError(string.Empty, "Server error. Please contact your administrator");

            return RedirectToAction("Privacy", "Home");
        }

user_8673618 · Answer

Use some JS library (like jQuery) to do AJAX.

For example:

$.ajax({
    url: 'http://yourdomain/Home/AddToCart',
    data: {'ProductName': 'Samsung', 'Price': 1071.28},
    type: "POST",
    dataType: "json",
    contentType: "application/json;charset=utf-8",
    success: function(returnData){
        console.log(returnData);
    },
    error: function(xhr, ajaxOptions, thrownError){
        console.log(xhr.status);
        console.log(thrownError);
    }
});

user_7062291 · Answer

You could use JQuery to find the

and

elements and get the product information, and then use Ajax method to submit the data to the action method:

Sample code as below:


    
        
        
            Samsung note 10 plus
            € 1071.28
            
                Available 
            
            New

Then, the debugger screenshot like this:

Edit:

The Product model:

public class Product
{
    public string ProductName { get; set; }
    public string Price { get; set; }
}

How to send static html data over a web api in asp.net?

2 Answers