Send information to the server using the POST method

Trying to send data on button click using Angular 1.x.

Client-side debug shows object set correctly:

https://i.sstatic.net/Emjpk.png

Server-side debug reveals lost values:

https://i.sstatic.net/50l4G.png

Here is my POCO:

[Serializable]
public class Item
{
    public int Id { get; set; }
    public string Key { get; set; }
    public int Value { get; set; }
    public string Description { get; set; }
}

UPDATE:

The current solution works but appears messy...

https://i.sstatic.net/mwzFn.png

Is it possible to eliminate the conversion and directly use the Item type as a parameter instead of a JObject?

javascriptc#angularjsajaxasp.net-web-api

Answer №1

If you need to change a JavaScript value into a JSON string, you can achieve this by using the JSON.stringfy() method.

$httpost.post("...", JSON.stringify($scope.newItem))

Answer №2

Ensure to utilize the [FromBody] annotation:

public Post([FromBody] Data information) { ... }

In situations where dealing with intricate data structures, Web API will attempt to retrieve the values from the message body by employing a media-type formatter. This method encompasses [FromBody], [FromUri], and [ModelBinder], as well as bespoke attributes.

Answer №3

To make your class accessible, remember to include the access modifier public in the class declaration.

public class Product
{
    public int ID { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    public int Quantity { get; set; }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React doesn't have file upload configured to update the state

I am working on integrating a file upload button that sends data to an API. To ensure only the button triggers the upload dialog and not the input field, I have set it up this way. Issue: The File is not being saved to state, preventing me from using a ...

javascriptreactjstypescriptfile-upload

When using the mui joy library, obtaining the input value upon submission may result in the retrieval of an "unidentified" response

Struggling to fetch user input for 2FA authentication using the mui JoyUI library. Attempted using e.target and searching for input value with no success. Clearly missing something in the documentation. Also gave 'useRef' a shot, but the code sni ...

javascriptreactjsmaterial-uimui-x

Typescript Interface: Only one optional parameter is mandatory

Is there a way in TypeScript to create an interface where you can only supply either content OR content_object, but not both? It would be beneficial for the code structure if this restriction could be implemented. Any suggestions on the simplest approach ...

javascripttypescripttypescript-typings

Embedding an Iframe in Angular 2 directly from the database

Looking for assistance with iframes in Angular 2. Initially, embedding an iframe directly into a component's template functions correctly. <iframe src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl' allowtransp ...

javascriptangular

Modify the background of a div and an image

My goal is to add a background to both the image and the div itself, similar to what I've seen on Amazon. However, I'm struggling to achieve this effect where the white background of the image doesn't show when applied onto the div: Image w ...

javascripthtmlcss

What causes the excessive memory usage of (JS)Strings when loading complex .obj files in AFrame and Three.js?

Our webscene is quite complex, with dynamically loaded .obj and .mtl files. When comparing the scene without any objects to one with multiple objects, we noticed a strange issue: In Firefox's memory heap, most of the memory (>100MB for 5 objects) ...

javascriptwebmemorythree.jsaframe

Adding a custom JavaScript library to a react-boilerplate can be done by following these simple steps

I'm currently utilizing the react-boilerplate framework for my React application development. However, I am facing some challenges when it comes to integrating a custom JavaScript file that is not sourced from npm, yarn, or bower. Specifically, I am ...

javascriptreactjsreact-boilerplate

Avoid putting the URL in the browsing history

After reviewing the browser history information, I realize that access to the array of history objects is restricted, making it impossible for me to delete them. However, my current objective is to prevent parameterized URLs from being added to the history ...

javascriptreactjsbrowser-historynext.js

Minimize the quantity of files processed by Vue

Here is the content of my vue.config.js file: css: { extract: false, }, configureWebpack: { devtool: 'source-map', optimization: { splitChunks: false, }, }, productionSourceMap: false, I'm facing an issue where running npm run b ...

javascriptvue.jswebpack

Imitation of three-dimensional camera rotation

I've been exploring the realm of creating 3D games using JavaScript and HTML's 2D canvas. I recently came across a helpful tutorial that guided me in setting up a basic interactive scene. Now, I'm facing a challenge in implementing the func ...

javascriptcanvas3dcamera2.5d

Function being called from TypeScript in HTML is not functioning as expected

Hello, I am currently using Django and looking to implement TypeScript for a specific function within my application. Below is the content of my TypeScript file: testselector.ts: getSelectionText() { var text = ""; if (window.getSelection) { ...

javascripthtmldjangotypescript

Using JQuery to obtain an array of the widths of the td elements in a specific row

I am attempting to retrieve an array containing the width of all td's in a row. To start, I fetch the array of all the td's: datas = $('.totals').prev().find("tr").last().find("td"); Next, in order to confirm that I am using the $.map ...

javascriptjquerydom

Having trouble retrieving JSON data from an external URL in AngularJS when making a $http.get call and using the success method?

Code in the Controller.js file: let myApp=angular.module('myApp',[]); myApp.controller('myController', function($scope,$http){ $http.get('data.json').success(function(data){ $scope.art=data; }); }); ...

javascriptangularjsjsonmodel-view-controller

The method to obtain a result array using the getJson function in CodeIgniter

Here is the code snippet I am working with: function retrieveAllProcessingTransactions() { $resultSet = $this->db->query("SELECT a.id_transaksi, ETC"); return $resultSet; } In my controller file: public function fetchTransac ...

phpjqueryajaxcodeigniter

Encountering errors preventing the utilization of helpers in fancybox2-rails gem

I've been struggling to implement fancybox2 in my RoR app. I've attempted using the gem and manually adding the files to my assets directory, but I'm having issues with the helpers. Currently, the thumb images generated by the helper are no ...

javascriptjqueryruby-on-railsfancyboxfancybox-2

Designing a JSON array

How can I format my JSON list into Material Cards? Here is my JSON/JavaScript code: $(document).ready(function(){ var url="getjson.php"; $.getJSON(url,function(data){ console.log(data); $.each(data.bananas, function(i,post){ ...

javascripthtmljsonajax

What is preventing the use of this promise syntax for sending expressions?

Typically, when using Promise syntax, the following code snippets will result in the same outcome: // This is Syntax A - it works properly getUser(id).then((user) => console.log(user) // Syntax B - also works fine getUser(id).then(console.log) However ...

javascriptnode.jsexpresspromise

When using Next JS with StoryBook, an error may occur if styles are written in a module.scss file

Every time I try to add some styles to my ButtonWidget.scss file, I encounter an error in the console when running the command yarn storybook Error Code: ERROR in ./src/components/ButtonWidget/ButtonWidget.module.scss 1:0 Module parse failed: Unexpected ...

javascriptreactjssassnext.jsstorybook

unable to locate the PHP file on the server

Struggling to make an API call via POST method to retrieve data from a PHP file. Surprisingly, the code functions properly on another device without any hiccups. However, every time I attempt to initiate the call, I encounter this inconvenient error messag ...

javascriptphpjqueryajaxxampp

Passing a list of objects containing lists in MVC3

Is it possible for me to send an array of objects, each containing arrays, from JavaScript to a MVC action result method? Essentially, I have a KeyValuePair with keys as arrays of strings and I need to return a list of these KeyValuePairs. In my code, I ha ...

c#javascriptajaxasp.net-mvc