Returning JSON with web api controller MVC - json

I am trying to convert a regular old controller I was using to an API controller and am having a little bit of difficulty. What these series of functions do is, in the jQuery, it iterates over a file containing all the usernames of employees and for each username it makes a call to the PopulateEmployee method in my webapi controller which should return JSON and then populate a results div.
When manually navigating to
..domain../staffinformation/populateemployee/employeeusername
I get the error
This XML file does not appear to have any style information associated with it. The
document tree is shown below.
<Error>
<Message>
The requested resource does not support http method 'GET'.
</Message>
</Error>
Please note that the div it will be populating is a partial view in an Umbraco CMS page and I don't think that is the problem but if you guys think differently please tell me.
There has to be something I am missing either with webAPI routing or something else.
Thanks for your help.
Here's the codez.
Please notice that this method has the HttpPost tag
public class StaffInformationController : ApiController
{
[System.Web.Http.ActionName("PopulateEmployee")]
[System.Web.Http.HttpPost]
public StaffListing PopulateEmployee(string id)
{
//do error checking on input
StaffListing staffListing = new StaffListing(id);
//populate other fields
return staffListing;
}
}
The routing set up for the api controller
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
The jQuery call specifying use of 'POST', please forgive the trickiness of the recursive call in this function.
function getEmployeeObjectByIndex() {
$.ajax({
url: $('#root').val() + '/api/StaffInformation/PopulateEmployee',
type: 'POST',
async: true,
contentType: 'application/json, charset=utf-8',
data: JSON.stringify({ 'username': lines[i] }),
success: function (staffObject) {
if (!(staffObject.Name == undefined)) {
buildHtmlStrings(staffObject);
}
i++;
getEmployeeObjectByIndex(); //recursive call
}
});
}

manually navigating to that address throws the error because, when manually navigating you are doing a GET (and your method only allows POSTs).
You should fire up Fiddler and watch the ajax POST request and response to see how the server is responding / your request is being made

Jquery ------> web api
Web API has one property i.e. CONTENT NEGOTIATION means you send any data and accept any data as you want.
$.ajax({
contentType: 'application/json, charset=utf-8',
// this is sending your data of datatype json to server, here you send any type of data
accept: 'application/json',
//this is receiving/getting data form server to client...
// SO HERE YOU GET JSON DATA AS YOU WANT only mention which data of datatype u want...
//if you sending xml and you want json so only write accept as json it get automatically converted into your required datatype..by MediaTypeFormatter
});

Related

How to: (a) send JSON data from the browser to the controller; and (b) send the transformed data to SQL Server within ASP.NET MVC?

I have a form which includes a variety of <input> elements and makes use of 1-to-n tabulator tables for data input. I have managed to successfully assemble data from these elements into a JSON string. I am now attempting to complete the following two steps:
Using Ajax, post the JSON object to my web server; and
In the ASP.NET MVC controller, upload the deserialized JSON data into a SQL Server 2016 table.
My client-side script to POST the JSON object is as follows:
var myJson = "the data from the form elements is programmatically inserted into the JSON string";
// use parseJSON() to test the syntax
try {
var obj = jQuery.parseJSON(myJson);
}
catch(error) {
console.log(error);
}
$.ajax({
type: "POST",
url: "/Dailies/UploadJson/",
dataType: 'json',
data: JSON.stringify(myJson),
contentType: 'application/json',
crossDomain: true,
cache: false,
success: function(data) { console.log(data); }
});
The method called within my ASP.NET MVC controller appears as follows:
[HttpPost]
public IActionResult UploadJson(Object jsonFile)
{
// insert data into SQL Server table
}
Note: I have already created the appropriate domain model within my ASP.NET MVC app and have also added a DbSet reference to the DbContext model. I have verified my ability to insert rows into the SQL Server table using mock data.
When I place a breakpoint inside the UploadJson() method, I find that the jsonFile object is null.
My quandry at this point is two-fold:
I can't seem to get JSON data from the client to the web server; and
I need to better understand how to transform the JSON data (once received) for upload into my database.
Any assistance is greatly appreciated.
Although there are plenty of questions related to this, the answers to those typically refer to binding to a model instead of just the json string. But those will also help you.
It looks like there are two things:
I would change the controller to receive a string instead of an object.
You'll need to update the json data you're passing to the controller to match the parameter name of the controller. So in this case, the controller would receive a parameter named jsonFile. So in the $.ajax method you'll want update the data to something like:
data: { jsonFile: JSON.stringify(myJson) }
UPDATE:
remove the Content-Type of application/json

Pass json data to ASP.Net core 2 web api

I know that this question has been asked several times, but none of the previous solutions helped me out with my problem (that seems a pretty simple one actually).
I just want to send a Json object to a Post method that I created in a controller class.
Here's the interesting portion of my controller class:
[Route("api/[controller]")]
public class CodeController : Controller
{
[HttpPost]
public void Post([FromBody] InfoNegozio value)
{
return;
}
}
I kept it simple as I just want the value to be set properly.
Here's the class InfoNegozio:
public class InfoNegozio
{
public int IdNegozio { get; set; }
public string NomeNegozio { get; set; }
public int AttesaStimata { get; set; }
public DateTime UltimoAggiornamento { get; set; }
}
This is the code used to send data to this API:
var myData = { "IdNegozio": idNegozio, "AttesaStimata": tempoAttesa };
$.ajax({
url: "api/Code",
type: "POST",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(myData)
});
The JQuery code just call the webapi controller, the value field is a not null InfoNegozio object, but the field IdNegozio and AttesaStimata are always 0.
I could ask that I'm using a controller in a Razor Page project, and I had to add this line of code in the Startup.Configure method in order to make it work (with "it" I meant the other webapi GET methods).
app.UseEndpoints(endpoints => { endpoints.MapControllers(); });
Any Idea?
Edited
Using postman I figured out what the difference is between a wroking call and a not working one.
The posting this json with postman is works:
{
"IdNegozio": 1,
"AttesaStimata": 36
}
Unfortunately, with jquery, using JSON.stringify, I get this (note the double quote on the values):
{
"IdNegozio": "1",
"AttesaStimata": "36"
}
And this don't work!
Are Json stringify incompatible with .net core Web Api? Is it possible there isn't a clean approach to make those 2 libraries work together?
Edited 2
I ended up building the json manually, forcing jquery to sent "my version", so my js code is now looking:
var myData = '{ "IdNegozio": '+idNegozio+', "AttesaStimata": '+tempoAttesa+' }';
$.ajax({
url: "api/Code",
type: "POST",
contentType: "application/json",
dataType: "json",
data: myData
});
Anyway I don't like this solution as it seems I'm not using the right way to build the json object, so any smarter solution would be much appreciated.
Creating an answer so we don't have a million comments on your post. This is a ASP.NET Core 3.1 Web API project, correct ? If so, try making these couple of changes and see if that fixes the issue.
Inherit from ControllerBase rather than the full Controller class. Also add the [ApiController] attribute to your CodeController class. Then for your Post action, remove the [FromBody] attribute from your InfoNegozio parameter. Like this :
[Route("api/[controller]")]
[ApiController]
public class CodeController : ControllerBase
{
[HttpPost]
public IActionResult Post(InfoNegozio value)
{
return Ok(value);
}
}
See if that fixes anything. Something is getting screwed up during model binding, which leads me to believe that your JSON Serialization configuration is messed up. If you can post your Startup.cs, then we can see if there may be a configuration error. I just opened up a .NET Core 3.1 Web API project and tested one of my controllers and it works as expected. So give that a shot and see if maybe that fixes it. These items will affect how the controller is configured, so if it is an API controller, handling standard API requests (application/json) then it should be configured as such. You can read the specifics on the ASP.NET Core 3.1 docs but having this setup properly as an API Controller is going to make sure your JSON requests are properly serialized. Right now you have it set up like an MVC controller which is likely why you're running into issues.
Edit: Also, consider returning an IActionResult from your controller action. Might make testing easier as you can actually receive a response that will help you find the error. Then simply just change return; to return Ok(); Updated code sample to reflect this.
If you want to write like the first way you provided, you can use parseInt to ensure that int type data is passed.
Try this code:
var myData = { "IdNegozio": parseInt(idNegozio), "AttesaStimata": parseInt(tempoAttesa) };
$.ajax({
url: "api/Code",
type: "POST",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(myData)
});
There is also another choice (if you used core 3.x version):
Install Microsoft.AspNetCore.Mvc.NewtonsoftJson -Version 3.x
library
Add services.AddControllersWithViews().AddNewtonsoftJson(); in
ConfigureServices in startup.cs.
After these two steps, you can use the json format you used at the beginning.
var myData = { "IdNegozio": idNegozio, "AttesaStimata": tempoAttesa };
$.ajax({
url: "api/ApiCode",
type: "POST",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(myData)
});

MVC - returning data via ajax call renders it as page

New to MVC.
Scenario is. Using a 3rd party upload library for images. When a form is submitted, I want to make a call via ajax to submit the data and return the inserted item id. I then use that id for the 3rd party upload library to build folders where the images will be uploaded to.
I have the ajax call working and inserting the data to the database and getting the inserted id. But when the debug returns from the controller, it renders the id as a whole page.
Missing something fundamental here to MVC I think.
cshtml file:
<div class="col-md-8">
<input type="submit" value="Add Item" id="submitItem" />
<script>
$(document).ready(function () {
$("#submitItem").submit(function () {
event.preventDefault();
insertData();
});
});
function insertData()
{
var requestData = {
userID: $("#hdnUserID").val(),
title: $("#title").val(),
typeID: $("#typeID").val(),
description: $("#description").val()
};
$.ajax({
url: '<%= Url.Action("ItemUserDashBoard", "Home") %>',
type: 'post',
data: JSON.stringify(requestData),
dataType: 'json',
success: function (data) {
// your data could be a View or Json or what ever you returned in your action method
// parse your data here
alert(data);
$("#fine-uploader-gallery").fineUploader("uploadStoredFiles");
},
processData: false
});
}
</script>
</div>
HomeController.cs
[HttpPost]
public JsonResult ItemUserDashBoard(ItemAppraise.Models.iaDashBoardModel objItemUserDashBoard)
{
if(ModelState.IsValid)
{
using (dbContext)
{
ia_items iaItem = new ia_items
{
userID = objItemUserDashBoard.iaItems.userID,
typeID = objItemUserDashBoard.iaItems.typeID,
title = objItemUserDashBoard.iaItems.title,
description = objItemUserDashBoard.iaItems.description,
lastUpdate = DateTime.Now
};
dbContext.ia_items.Add(iaItem);
dbContext.SaveChanges();
//objItemUserDashBoard.iaItems.itemID = iaItem.itemID;
return Json(iaItem.itemID.ToString());
}
}
else{
return null;
}
}
Fiddler shows it as having a header of Content-Type: application/json; charset=utf-8.
But the page renders under the control url 'http://localhost:55689/Home/ItemUserDashBoard' with just the item id showing.
How do I get the data back just to use in the success part of the ajax call and not be rendered? Is this Partial Views or something similar?
Any guidance is appreciated.
In standard MVC. Any call made to a controller is handled just like a web request. So if i understand you correctly - the result of your httpPost is being rendered instead of the desired View? This is because you are returning JSON, so the controller assumes that is what you are trying to render. If you want a View to be rendered instead (and somehow use that response data) you could try setting the return type to ActionResult and returning a View("nameofview"); You can pass your response data to that view in a number of ways.
As a side note I think the problem you are facing could be better solved with Web Api instead of MVC. It works well with MVC and could be a simpler way of implementing your desired functionality. Separating your post requests and database interactions from the logic which decides which View to return.

How can i pass an object and a string to webservice using post request using angularjs

Am very new to angularjs and i need to post data to a web service, the service accepts two parameters, one is List of object and the other is securityToken,
Here is my code,
$scope.saveCompany=function(){
// alert("Save Company!!!");
var Companies={
Code: 'testMartin',
Name: 'company1',
CompanyType : 'Tenant',
email : 'test#yaoo.com',
Fax : 4235353,
ParentID : 1
};
$http({
url:'http://localhost/masters/smstools.svc/json/SaveComapnies',
dataType: 'json',
method: 'POST',
data: $.param(Companies),
headers: {
"Content-Type": "text/json",
}
}).success(function(response){
alert ("Success");
}).error(function(error){
alert ("Save company!");
});
how can i pass the security token with the companies object as a separate paramenter. my service accepts the parameters like this,
public List<CompanyProfile> Save(List<CompanyProfile> CompanyList,string securityToken)
Since this is a rest call you only have 3 places were you can pass parameters data:
With Post and it will be part of the body, it seems this is what is your first parameter is occupying now.
With Get and you add the parameter to the URL /json/SaveComapnies/mySecParam or by queryString like /json/SaveComapnies?sec=mySecParam but this is not secure nor recommended for security settings.
With header from angular Post:
**headers: {
"Content-Type": "text/json",
"mySecVar": "mySecParamValue"
}**
Server side version:
public List<CompanyProfile> Save(List<CompanyProfile> CompanyList){
WebOperationContext current = WebOperationContext.Current;
WebHeaderCollection headers = current.IncomingRequest.Headers;
if (headers["mySecVar"] != null){
// do something
}
}
You can read more about it here:
How to read HTTP request headers in a WCF web service?
Can you share more information in your Backend?
If it is actually a REST Backend I would rather use an angular $resource
https://docs.angularjs.org/api/ngResource
If you want to pass json object and string as post Parameter you should stick to the $http docs
https://docs.angularjs.org/api/ng/service/$http
In the post example you can pass both params in:
$http.post('/yourEndpoint', {jsonObj:yourCompaniesObj, secKey:yourSecretToken})....(sucess etc)
Typing from my cell - if you need more code examples just tell

Handling a checkbox form in a dialog with Spring MVC

There are plenty of tutorials out there showing how to build a form with a simple POJO model object and the "command" property on the Spring taglib.
Examples: A tutorial
I seem to thrive on making my life hard, though and have my form running in a jQuery dialog box...whose checkbox statuses are pre-processed with a javascript function. I'm doing this through AJAX calls in that javascript function.
Sooo, my form init looks like this:
<form:form action="javascript:associateArtifacts()">
This invoked my javascript method:
function associateArtifacts(){
/* JSONIFY the list of checked boxes and send that data to the server here in an AJAX call */
var artifacts = [];
$('#artifacts_container input:checkbox').each( function(j,listitem) {
artifacts.push(listitem.name);
});
$.ajax({
type: "POST",
url: "associateArtifacts.html",
data:JSON.stringify(artifacts),
success: function(html){
alert( "Submitted");
}
});
return false;
}
The point of this is building a dialog with a list of checkboxes that are checked based on DB data that the user can modify then save back to the server.
My issue is, I'm getting the dialog up and populated with the checkboxes and loaded with the values, but I seem to have not thought it through as I have no idea how to intercept the data coming to the server as JSON and process it.
In the past I've done this with URL'd parameters, but in this case is a variably-sized large string of JSON data.
Am I going to be forced to define an object that just hold a single List in it for my Spring MVC container to assign this JSON data to? Seems kind of ridiculous...
Thoughts? Suggestions? Harsh criticisms for going at this entirely wrong?
Thanks for any of the above.
EDIT
Signature looks like this:
#RequestMapping(value = "/associateArtifacts.html", method = RequestMethod.POST, headers = {"content-type=application/json"})
public void associateArtifacts(#RequestBody List<String> checkboxData){
Client from data in Chrome Tools looks like this:
["checkboxTitle1","checkboxTitle2","checkboxTitle3"]:
Which is produced by my client when I take my array of checkBox names and do this to it:
JSON.stringify(arrayOfNames)
Current error is:
HTTPStatus 415 - The server refused this request because the request entity is in a format not supported by the requested resource for the requested method.
EDIT #2
It was the lack of contentType on my AJAX call, as you suggested. Thanks.
Assuming your JSON is something like this:
"[{checkbox1: 'true'}, {checkbox2: 'false'}]"
Firstly include jackson-mapper-asl on your classpath:
<dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-mapper-asl</artifactId>
    <version>1.9.13</version>
</dependency>
Post using JQuery ajax like this:
$.ajax({
type: "POST",
url: "associateArtifacts.html",
data: JSON.stringify(artifacts),
contentType: 'application/json',
success: function(html) {
alert("Submitted");
}
});
And define your Spring MVC controller handler method like this:
#RequestMapping(value = "/associateArtifacts.html", method = RequestMethod.POST, headers = {"Content-type=application/json"})
#ResponseBody
public MyResponse associateArtifacts(#RequestBody List<Map<String,String>> checkboxData) {
// .. process the data here
}
The JSON string will be automatically bound into a list of map (key value pair).
The #ResponseBody annotation will cause the returned MyResponse object to be serialized into JSON