Hello, I am making put request using axios and vue.js to ASP.NET Core controller at backend but it is passing null

Question

I am making put request for updating product in vue.js but it is passing null to my controller action method.

The vue.js code for updating product is:

updateProduct() {
     this.loading = true;
     axios.put('/Admin/products', this.productModel)
         .then(res => {
             console.log(res.data);
             this.products.splice(this.objectIndex, 1, res.data);
         })
         .catch(err => { console.log(err); })
         .then(() => {
             this.loading = false;
         });
 }

My index.cshtml file is:

@page
@model Shop.Ui.Pages.Admin.IndexModel
@{
}
@section scripts
    {
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

    <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
    <script src="~/js/admin/main.js"></script>

}
<div id="app">
 <button v-on:click="getProducts">Get Products</button>
    <div>
        <p v-for="(product,index) in products">
            {{product.id}} - {{product.name}} - {{product.description}}
            <a @@click="editProduct(product,index)">Edit</a>
            <a @@click="deleteProduct(product.id)">Remove</a>
        </p>
    </div>
    
    <div>
        
        <input v-model="productModel.name"/> 
        <input v-model="productModel.description" />
        <input v-model.number="productModel.value" />
        <button @@click="createProduct" v-if="!productModel.id">Create Product</button>
        <button @@click="updateProduct" v-else>Update Product</button>
        
    </div>
</div>

I am making put request to this action method but the request object is null

[HttpPut("products")]
```c#
public async Task<IActionResult> UpdateProduct([FromBody] UpdateProduct.Request request)
    => Ok(await new UpdateProduct(_ctx).Do(request));

Here is my code for UpdateProduct.cs and request class. public class UpdateProduct { private ApplicationDbContext _context;

public UpdateProduct(ApplicationDbContext context)
{
    _context = context;
}


public async Task<Response> Do(Request request)
{
    try
    {
        var product = _context.Products.Where(x => x.Id == request.Id).FirstOrDefault();

        product.Name = request.Name;
        product.Description = request.Description;
        product.Value = request.Value;

        await _context.SaveChangesAsync();
        return new Response
        {
            Id = product.Id,
            Name = product.Name,
            Description = product.Description,
            Value = product.Value
        };
    }
    catch (Exception ex)
    {
        // Handle the exception here, you can log it or throw a custom exception.
        // For example, you can log the exception and then throw a custom exception.
        // Logging should be done using a proper logging library like Serilog or NLog.

        // Log the exception
        Console.WriteLine($"An error occurred: {ex.Message}");

        // You can re-throw a custom exception if needed.
        throw new ApplicationException("An error occurred while updating the product.");
    }
}



[Serializable]
public class Request
{
    public int Id {  get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public decimal Value { get; set; }
}
[Serializable]
public class Response
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public decimal Value { get; set; }

}

}

Please can anyone help me?

Answer 1

You didn't post your UpdateProduct.Request definition, but I encountered similar before. It's at CS API side, make sure your request model class match exactly as what you posting, give default values if some fields are optional. Pay attention to null and non-null declaration in CS.

For example:

public class product
{
  [Required]
  public string name {get; set;} // this is required, non-null
  public string name {get; set;} = ""; // this is optional
  ...
}