We Keep Coding

How to create a nested ajax requests?

I have a WEB API that is working fine. I want to call an action that is a part of my API via Ajax request. It seems that it is easy and I had it working for simple requests. However, I tried to put nested calls and for some reason the data that is passed to the second request gets lost. I was wondering if it is a scope problem or something I did wrong in my code.
Here is the javascript code:
$("#submit_request").click(function () {
var firstName = $("#first_name").val();
var lastName = $("#last_name").val();
var faciltiy = $("#facility").val();
// Collecting all the documents into an array of JSON
var documents = [];
var request = JSON.stringify({
"PatientFirstName": firstName,
"PatientLastName": lastName,
"Facility": faciltiy
});
//the first request is working fine and it has a success state
$.ajax({
url: "http://localhost:64611/api/requests/createRequest",
type: "POST",
dataType: 'json',
contentType: 'application/json',
data: request,
success: function (request_id, state) {
for (var i = 0; i < 5; i++) {
var RequestDocument = {
"RequestID": i,
"DocumentID": i+1,
"StartDate": Date(),
"EndDate": Date()
};
documents.push(RequestDocument);
}
console.log(documents); // it is returning a correct object
console.log(typeof (documents)); // type object
$.ajax({
url: "http://localhost:64611/api/requests/addDocumentsOfARequest/",
type: "post",
datatype: 'json',
contenttype: 'application/json',
data: JSON.stringify(documents), ---> this object should be passed to the api action
success: function (response, state) {
},
error: function (err) {
if (err) {
}
}
});
},
error: function (err) {
if (err) {
}
}
});
});
The definition of my api action is like the following
public async Task<IHttpActionResult> addDocumentsOfARequest(RequestDocument[] documents)
The class RequestDocument is like the following:
public class RequestDocument
{
[Required]
public int RequestID { get; set; }
[Required]
public int DocumentID { get; set; }
[Required]
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
}
My WebApiConfig is like the following:
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "defaultApiRoutes",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional },
constraints: new { id = #"\d+" } // Only matches if "id" is one or more digits.
);
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
}
}
the parameter 'documents' is empty. Any idea?
Thanks!

Here's my exact working code :
Server
public class GamesController : ApiController
{
// GET api/<controller>
[HttpPost]
public async Task<IHttpActionResult> Post(RequestDocument[] document)
{
var req = await Request.Content.ReadAsStringAsync();
return Ok();
}
}
public class RequestDocument
{
[Required]
public int RequestID { get; set; }
[Required]
public int DocumentID { get; set; }
[Required]
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
}
JavaScript
var documents = [];
for (var i = 0; i < 5; i++) {
var RequestDocument = {
"RequestID": i,
"DocumentID": i+1,
"StartDate": Date(),
"EndDate": Date()
};
documents.push(RequestDocument);
}
$.ajax({
url: "http://localhost:1757/api/games",
type: "POST",
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify(documents),
success: function(a, b) {
alert("Done");
}
});
Result

try this,
$.ajax({
url: "http://localhost:1757/api/games",
type: "POST",
dataType: 'json',
contentType: 'application/json',
data: {
document: documents
},
success: function(a, b) {
alert("Done");
}
});

Why is my posted data null in the Controller target of this AJAX call?

I have modeled (no pun intended) my AJAX call on the answer here from logan filley, which seems sensible and likely to work. This is the jquery I have in the View:
$("#btnSaveConfig").click(function () {
var saveConfigModel = {
unit: $('#unitsselect').val(),
scheduleProduceUsage: $('#ckbx_produceusage').checked,
scheduleDeliveryPerformance: $('#ckbx_deliveryperformance').checked,
scheduleFillRate: $('#ckbx_fillratebycustomer_location').checked,
schedulePriceCompliance: $('#ckbx_pricecompliance').checked,
// TODO: Finish this by storing add'l emails in an array along with the three on the page;
recipients: $('#email1').val(),
generationDayOfMonth: $('#dayofmonthselect').val(),
generationOrdinal: $('#ordinalselect').val(),
generationDayOfWeek: $('#dayofweekselect').val(),
generationWeekOrMonth: $('#weekormonthselect').val(),
daterangeFromProduceUsage: $('#produsagefrom').val(),
daterangeToProduceUsage: $('#produsageto').val(),
daterangeFromDeliveryPerformance: $('#delperffrom').val(),
daterangeToDeliveryPerformance: $('#delperfto').val(),
daterangeFromFillRate: $('#fillratefrom').val(),
daterangeToFillRate: $('#fillrateto').val(),
daterangeFromPriceCompliance: $('#pricecompliancefrom').val(),
daterangeToPriceCompliance: $('#pricecomplianceto').val()
}
$.ajax({
type:"POST",
url:'#Url.Action("PostUnitConfig", "SaveConfig")',
async:true,
contentType: 'application/json',
dataType:"json",
data: JSON.stringify(saveConfigModel)
});
}); // $("#btnSaveConfig").click()
...and this is my Model:
public class SaveConfigModel
{
public UnitConfigVals unitConfigVals { get; set; }
public class UnitConfigVals
{
public string unit { get; set; }
public bool scheduleProduceUsage { get; set; }
public bool scheduleDeliveryPerformance { get; set; }
public bool scheduleFillRate { get; set; }
public bool schedulePriceCompliance { get; set; }
public List<string> recipients { get; set; }
public int generationDayOfMonth { get; set; }
public string generationOrdinal { get; set; }
public string generationDayOfWeek { get; set; }
public string generationWeekOrMonth { get; set; }
public int daterangeFromProduceUsage { get; set; }
public int daterangeToProduceUsage { get; set; }
public int daterangeFromDeliveryPerformance { get; set; }
public int daterangeToDeliveryPerformance { get; set; }
public int daterangeFromFillRate { get; set; }
public int daterangeToFillRate { get; set; }
public int daterangeFromPriceCompliance { get; set; }
public int daterangeToPriceCompliance { get; set; }
}
}
...and Controller (obviously ultra-spartan at the moment):
public class SaveConfigController : Controller
{
public ActionResult PostUnitConfig(SaveConfigModel model)
{
try
{
string s = model.unitConfigVals.unit;
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}
return Json(new { success = true });
}
}
I am reaching the breakpoint in my Controller (on the "string s = model.unitConfigVals.unit;" line), but it throws an exception because the value of "model" is null. Why? Have I got something in my AJAX call wrong, or...?!?
UPDATE
I changed my jquery to this (changed boolean assignments and appended a semicolon):
$("#btnSaveConfig").click(function() {
var saveConfigModel = {
unit: $('#unitsselect').val(),
scheduleProduceUsage: $('#ckbx_produceusage').attr('checked'),
scheduleDeliveryPerformance:
. . .
};
$.ajax({
type: "POST",
url: '#Url.Action("PostUnitConfig", "SaveConfig")',
async: true,
//contentType: 'application/json',
dataType: "json",
data: JSON.stringify({ data: saveConfigModel })
});
});
...but the Controller is still passed a null model.
UPDATE 2
Now I changed "attr('checked')" to "is('checked')" but no difference...
UPDATE 3
"model" is null here in the Controller:
public class SaveConfigController : Controller
{
public ActionResult PostUnitConfig(SaveConfigModel model)
...when the AJAX call is like this:
$.ajax({
type: "POST",
url: '#Url.Action("PostUnitConfig", "SaveConfig")',
async: true,
dataType: "json",
data: saveConfigModel
});
...and also when the AJAX call is like this:
$.ajax({
type: "POST",
url: '#Url.Action("PostUnitConfig", "SaveConfig")',
async: true,
data: saveConfigModel
});
...and this:
$.ajax({
type: "POST",
url: '#Url.Action("PostUnitConfig", "SaveConfig")',
async: true,
contentType: 'application/json',
dataType: "json",
data: JSON.stringify({ model: saveConfigModel })
});
Do I need the "async: true"? I don't use that in my (working) GET AJAX calls. Similarly, do I need "cache: false"? I do use that in those working GET AJAX calls...
UPDATE 4
Even when I provide just some bogus vals:
var saveConfigModel = {
unit: 'Buford', //$('#unitsselect').val(),
scheduleProduceUsage: true, //$('#ckbx_produceusage').is(':checked'),
scheduleDeliveryPerformance: false, // $('#ckbx_deliveryperformance').is(':checked'),
scheduleFillRate: false, //$('#ckbx_fillratebycustomer_location').is('checked'),
schedulePriceCompliance: false, //$('#ckbx_pricecompliance').is('checked'),
// TODO: Finish this by storing add'l emails in an array along with the three on the page; might be as easy as declaring an array like this one, and adding to it as necessary
recipients: 'platypus#whatever.com', // $('#email1').val(),
generationDayOfMonth: '2nd', //$('#dayofmonthselect').val(),
generationOrdinal: 'First', //$('#ordinalselect').val(),
generationDayOfWeek: 'Thursday', // $('#dayofweekselect').val(),
generationWeekOrMonth: 'month', // $('#weekormonthselect').val(),
daterangeFromProduceUsage: $('#produsagefrom').val(),
daterangeToProduceUsage: $('#produsageto').val(),
daterangeFromDeliveryPerformance: '1', // $('#delperffrom').val(),
daterangeToDeliveryPerformance: '1', //$('#delperfto').val(),
daterangeFromFillRate: '1', //$('#fillratefrom').val(),
daterangeToFillRate: '1', //$('#fillrateto').val(),
daterangeFromPriceCompliance: '1', //$('#pricecompliancefrom').val(),
daterangeToPriceCompliance: '1' //$('#pricecomplianceto').val()
};
...it still winds up at the Controller null like forevermore before.
And then, grasping at straws, I even encased the boolean values in single quotes ('true' and 'false'), but that also (probably predictably) made no difference either.
UPDATE 5
For future generations, this is the AJAX that works:
$.ajax({
type: "POST",
url: '#Url.Action("PostUnitConfig", "SaveConfig")',
async: true,
contentType: 'application/json',
dataType: "json",
data: JSON.stringify({ model: saveConfigModel })
});

Since the values you posting back are for your nested UnitConfigVals class (not SaveConfigModel, then you controller method should be
public ActionResult PostUnitConfig(SaveConfigModel.UnitConfigVals model)
and the ajax data option needs to be
data: JSON.stringify({ model: saveConfigModel })
Alternatively you could keep the current controller method and use
data: JSON.stringify({ model: { unitConfigVals: saveConfigModel }})
although it seems a little odd that you using a nested class here.
A few other issues with your initial code
$('#ckbx_produceusage').checked will return undefined, and it
needs to be $('#ckbx_produceusage').is(':checked') which will
return true or false
Since recipients is List<string>, it will need to be
recipients: [ 'someValue', 'anotherValue', etc ]
However all this code to build you json data not really necessary, and if your view is generated correctly using the strongly typed HtmlHelper methods, then your ajax call can be as simple as
$.ajax({
type:"POST",
url:'#Url.Action("PostUnitConfig", "SaveConfig")',
dataType: "json",
data: $('form').serialize(),
success: function(data) {
// do something
}
});

MVC5 controller action not called from JSON AJAX Post

I am sending data from from a javascript app to a MVC5 controller, however when data is submitted to the Submit controller action, it is never called. I have some very simple mappers which create the following JSON object:
function mapContactDto(vm)
{
var contactDto = {};
contactDto.firstName = vm.firstName();
contactDto.lastName = vm.lastName();
contactDto.companyName = vm.companyName();
contactDto.emailAddress = vm.emailAddress();
contactDto.phonePrimary = vm.phonePrimary();
contactDto.phoneSecondary = vm.phoneSecondary();
contactDto.address1 = vm.address1();
contactDto.address2 = vm.address2();
contactDto.city = vm.city();
contactDto.postalCode = vm.postalCode();
contactDto.country = vm.country();
return contactDto;
}
function mapCartItems(vm)
{
var cartItemsDto = new Array();
$.each(vm.selectedOptions(), function (index, step, array) {
var sku = step.selection().sku;
if (sku !== "0") {
cartItemsDto.push(sku);
}
});
return cartItemsDto;
}
/* if i dump the object that is sent to the server with `console.log(JSON.stringify(item))` I get:
{
"skus": ["1001","8GB","201"],
"contact": {
"firstName":"Jon",
"lastName":"Doe",
"companyName":"Yup my company",
"emailAddress":"contact#me.com",
"phonePrimary":"012111 231",
"phoneSecondary":"",
"address1":"1 Billing Way",
"address2":"Navigation House",
"city":"London",
"postalCode":"112211",
"country":"GB"
}
}
*/
I then send the data with the following code:
var contactDto = mapContactDto(self.billingVm());
var cartItemsDto = mapCartItems(self.configurationVm());
var req = new XMLHttpRequest();
req.open('HEAD', document.location, false);
req.send(null);
var item = {
skus: mapCartItems(cartItemsVm()),
contact: mapContactDto(billingVm())
};
var url = '/Knockout/Submit';
$.ajax({
cache: false,
url: url,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: item,
type: 'POST',
success: function (data, textStatus, jqXHR) {
},
error: function (data, textStatus, jqXHR) {
}
});
My controller code is below:
public JsonResult Submit(string[] Skus, ContactDto Contact)
{
return Json(new { success = true, message = "Some message" });
}
/* and MVC models are: */
public class ContactDto
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string CompanyName { get; set; }
public string EmailAddress { get; set; }
public string PhonePrimary { get; set; }
public string PhoneSecondary { get; set; }
public string Address1 { get; set; }
public string Address2 { get; set; }
public string City { get; set; }
public string PostalCode { get; set; }
public string Country { get; set; }
}
I have the following questions please:
Submit is never called however, if I comment out the controller parameters so it becomes Submit() then it is called, why is this?
From the above, it seems like the controller framework cannot match up the parameters - any idea what I am doing wrong please?
How to enable debugging on the MVC controller so I can see what's going on?

Four things you must check using ajax calls,
1. If using javascript object you must stringify the object before passing.
2. The Action verb for the action method should be same as the type of your ajax call if POST then the action method should be decorated by action verb [HttpPost].
3. Always use the relative path for url's in ajax as #Url.Action("action", "controller").
4. The input parameters of your action method method should match the json object parameters (exactly i.e. case sensitive).
For debugging you may use firebug addon in your browser so that you can see what is sent over the network or press F12 for debugging tool in that check in network tab.

You will have to make two changes:
Stringify your Json as below:
$.ajax({
cache: false,
url: url,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: JSON.stringify(item),
type: 'POST',
success: function (data, textStatus, jqXHR) {
},
error: function (data, textStatus, jqXHR) {
}
});
Second, Just Annotate your Method with [HttpPost] as below:
[HttpPost]
public JsonResult Submit(string[] Skus, ContactDto Contact)
{
return Json(new { success = true, message = "Some message" });
}

MVC [HttpPost] Method receives null parameter

I'm sending a value through JQuery to an MVC HttpPost action method, but instead it is getting a null value. When I send a plain string it works fine, but when I send an array it gets the null value. Here is the code.
code to send the value
function Submit() {
var QSTR = {
name: "Jhon Smith",
Address: "123 main st.",
OtherData: []
};
QSTR.OtherData.push('Value 1');
QSTR.OtherData.push('Value 2');
$.ajax({
type: 'POST',
url: '/Omni/DoRoutine',
data: JSON.stringify({ obj: 'Reynor here!' }),
// this acctually works
// and at the action method I get the object[]
// with object[0] = 'Reynor here!'
// but when I use the object I really need to send I get null
data: JSON.stringify({ obj: QSTR }), //I get null
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function (msg) {
alert('ok');
},
error: function (xhr, status) {
alert(status);
}
});
}
this is the action method code:
[HttpPost]
public ActionResult DoRoutine(object[] obj)
{
return Json(null);
}
What is the solution for this and why is this happening?
thanks

QSTR is a complex type, so you need complex data in your post method.
public class QSTR
{
public string name { get; set; }
public string Address { get; set; }
public object[] OtherData { get; set; }
}
[HttpPost]
public ActionResult DoRoutine(QSTR obj)
{
return Json(null);
}
But if you want receive only array of otherdata you should send only in in your ajax:
$.ajax({
data: JSON.stringify({ obj: QSTR.OtherData }),
// other properties
});

Jquery UI autocomplete and webservice

I have a ASP textbox of class clsArtistList placed inside a usercontrol
<asp:TextBox CssClass="clsArtistList" ID="txtArtistList" runat="server"></asp:TextBox>
Then I use jquery-ui-1.8.16 to create the autocomplete feature for my textbox. I copied it from http://www.dotnetcurry.com/ShowArticle.aspx?ID=515 but I don't really know how it works
$(".clsArtistList").autocomplete({
source: function(request, response) {
$.ajax({
url: "../ArtistWS.asmx/GetAllArtists",
data: "{ 'ARTIST_NAME': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return data; },
success: function(data) {
response($.map(data.d, function(item) {
return {
value: item.ARTIST_NAME
}
}))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
},
minLength: 1
});
and this is my web service
[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public List<Artist> GetAllArtists(string ARTIST_NAME) {
ArtistCollection coll = ArtistManager.GetAllArtists();
return coll.FindAll(a => a.ARTIST_NAME.ToLower().StartsWith(ARTIST_NAME.ToLower()));
}
For your interests, my ArtistCollection is a List of artist. And an Artist class looks like this:
public class Artist {
public string ARTIST_ID { get; set; }
public string ARTIST_NAME { get; set; }
public string ARTIST_NATIONALITY { get; set; }
public string ARTIST_INFO { get; set; }
}
But the code does not work. Each time i type, I recieve a message alert Internal Server Error
Thank you in advance. I need you helps

If you receiver a server error message, I would assume the problem is not in the javascript, but somewhere on your server.
Did you try to debug your ASP webservice code?

I think the problem may be the value you are setting url to.
Try removing the ".." from the call
$.ajax({
url: "/ArtistWS.asmx/GetAllArtists",