Problem:
With Asp.Net corein the controller on an HttpPut and HttpPost method, never the /id ID of the calling URL
const response = await fetch('api/articles/33' , requestOptions); //*SEND DATA const data = await response.json(); |
In the Asp.Net core controller ma n seesthat the id as the first parameter here with int IDArticle is not found or not resolved from the URL
✅ solution:
You MUST name the first parameter with id, as in the HttpPut argument [HttpPut("id")]
// PUT: api/tbl_Articles/5 ============== [HttpPut("{id}")] //[ValidateAntiForgeryToken] //[Authorize] public async Task<ActionResult<ApiArticleModel>> PutArticle(int id, ApiArticleModel apiArticle) { int IDArticle = id; var test = Request.Path; // -------------< Edit_Postback() > ------------- if (IDArticle != apiArticle.IDArticle) { return BadRequest(); } |
Alternatively, you can also adjust the filter term in the controller argument
// PUT: api/tbl_Articles/5 ============== [HttpPut("{IDArticle}")] //[ValidateAntiForgeryToken] //[Authorize] public async Task<ActionResult<ApiArticleModel>> PutArticle(int IDArticle, ApiArticleModel apiArticle) { //int IDArticle = id; var test = Request.Path; // -------------< Edit_Postback() > ------------- if (IDArticle != apiArticle.IDArticle) { return BadRequest(); } |
In Debug Mode in the Asp.Net Core Controller
Code documentation:
Startup.cs
1. Router Resolution UseEndpoints in Asp.Net Core 5 for Web API Controller
>
app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "api", pattern: "/{controller}/{id?}");
//endpoints.MapControllerRoute( // name: "default", // pattern: "{controller}/{action=Index}/{id?}"); endpoints.MapRazorPages(); });
|
Edit.js (React Client File)
1. Calling the PUT method zto store data in the Asp.Net Core API Controller
Api call even with fixed URL as controller and ID: 'api/articles/58'
async send_Data_to_Api() { console.log(this.state); const requestOptions = { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify( { idarticle: this.state.idarticle, iduser: this.state.iduser, title: this.state.title, textcontent: this.state.textContent, htmlcontent: this.state.htmlContent, folder: this.state.folder, keywords: this.state.keywords,
}) }; const response = await fetch('api/articles/58' , requestOptions); //*SEND DATA const data = await response.json(); this.setState({ idarticle: data.idArticle, iduser: data.idUser, title: data.title, textcontent: data.textContent, htmlcontent: data.htmlContent, folder: data.folder, keywords: data.keywords, nimages: data.nImages, nvideos: data.nVideos, nfiles: data.nFiles, dtcreated: data.dtCreated, dtedit: data.dtEdit, loading: false, status: "data is send" });
alert('Data are send'); } |