Develop Reference

Error "Invalid JSON primitive: models." on Kendo Grid datasource while passing model to controller

Getting error while implementing Kendo Grid inline edit CRUD. When I add a new record and update it, I receive response code 500 with error:
I believe the problem is coming from parameterMap. What is the correct way to pass the model to the controller in Kendo?
Invalid JSON primitive: models.
What are the models?
Source Code:
$(document).ready(function () {
var baseUrl = "/SomeUrl",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: baseUrl + "/GetAccolades?profileId=" + #profileId,
type: "GET",
dataType: "json"
},
create: {
url: baseUrl + "/AddAccolade",
type: "POST",
dataType: "json",
contentType: "application/json",
},
update: {
url: baseUrl + "/UpdateAccolade",
type: "PUT",
dataType: "json",
contentType: "application/json",
},
delete: {
url: baseUrl + "/DeleteAccolade",
type: "DELETE",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
alert(kendo.stringify(options.models));
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
schema: {
model: {
id: "ProfileAccoladeID",
fields: {
ProfileAccoladeID: { editable: false, nullable: false },
ProfileID: { editable: false, nullable: false, defaultValue: #profileId },
Years: { type: "string" },
Name: { type: "string" },
Level: { type: "string" },
Event: { type: "string" },
}
}
}
});
$("#accolades-grid").kendoGrid({
dataSource: dataSource,
pageable: false,
height: 550,
toolbar: ["create"],
columns: [
{ field: "Years", width: "150px" },
{ field: "Name", title: "Name", width: "150px" },
{ field: "Level", title: "Level", width: "150px" },
{ field: "Event", title: "Event", width: "450px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline"
});
});
</script>
Controller method:
[HttpPost]
public JsonResult AddAccolade(ProfileAccolade accolade)
{
using (var db = new XXXEntities())
{
if (accolade != null)
{
var newAccolade = new ProfileAccolade()
{
ProfileID = accolade.ProfileID,
Years = accolade.Years,
Name = accolade.Name,
Level = accolade.Level,
Event = accolade.Event
};
db.ProfileAccolades.Add(newAccolade);
db.SaveChanges();
return Json(new { Success = true });
}
else
{
return Json(new { Success = false, Message = "Error occured" });
}
}
}
How do I fix this error?
Update:
By removing contentType: "application/json", the error Invalid JSON primitive: models. is gone. However, the controller does not get the model.
Any ideas to fix this?

The problem originated by usage of contentType: "application/json" inside both transport.create and transport.update part of kendo.data.DataSource. Since both operations use AJAX call (i.e. jQuery.ajax() method), the contentType setting affects how type of request body will send.
By setting "application/json" content type, the request body will treated as JSON content, but actually transport.parameterMap returns URL encoded version containing models and formatted JSON string as key-value pair (KVP). This is why "Invalid JSON primitive" error occurs, because URL encoded format is not same as JSON format.
If you wish to keep "application/json" setting for AJAX call, add JSON.stringify method to convert URL encoded format of models as JSON data:
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return JSON.stringify({ models: kendo.stringify(options.models) });
}
}
However if you want to send parameterMap as default content type (application/x-www-form-urlencoded), just remove all contentType definitions to set it back:
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: baseUrl + "/GetAccolades?profileId=" + #profileId,
type: "GET",
dataType: "json"
},
create: {
url: baseUrl + "/AddAccolade",
type: "POST",
dataType: "json"
},
update: {
url: baseUrl + "/UpdateAccolade",
type: "PUT",
dataType: "json"
},
delete: {
url: baseUrl + "/DeleteAccolade",
type: "DELETE",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
alert(kendo.stringify(options.models));
return { models: kendo.stringify(options.models) };
}
}
},
// other DataSource definitions
});
Reference:
kendo.data.DataSource (Kendo UI Documentation)

File upload in server using ajax

I am working web form (.aspx) application.
I need to file upload in server using ajax
I can't send file.
any one help me(with details).
var files = $("#bodyContentPlaceHolder_fileProfilePhoto")[0].files[0];
$.ajax({
type: "POST",
url: "User.aspx/AjaxSaveUser",
//contentType: false,
data: JSON.stringify({ model: model, inputFile: files }),
dataType: "json",
contentType: "application/json; charset=utf-8",
processData: false,
success: function (data) {
AlertMessage(model.UserID, "success");
GridDataBind(data);
$('#myModal').modal('toggle');
},

Javascript client side code:
function upload() {
var formData = new FormData();
var totalFiles = document.getElementById("FileUpload").files.length;
for (var i = 0; i < totalFiles; i++) {
var file = document.getElementById("FileUpload").files[i];
formData.append("FileUpload", file);
formData.append("guid", theGuid);
}
$.ajax({
type: 'post',
url: '/myController/Upload',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function (response) {
alert('succes!!');
},
error: function (error) {
alert("errror");
}
});
}
on server side:
Request.Form["guid"];
Request.Files["FileUpload"];

How to send multiple data in single FormData object in Ajax?

My application has multiple data like Text-box value, label value, Drop-Down value,File Data and send same data at server side and store in database
To achieve this, i have used below method but now i want to use Formdata and append each value and send it to server side
How to achieve this scenario using Formdata with specific object type.
Below is the code
var selectedText = $('#Commentinput').text();
$('#actioncomments').text(selectedText);
var debitEntityValue = $('#DrAccount option:selected').text();
var creditEntityValue = $('#CrAccount option:selected').text();
var amount = $("#Amountinput").val();
var paymentActionReason = $('#action').text();
var paymentCommentReason = $('#Commentinput').val();
var prepayAccountId =#Model.prepaidBranchList.PrepaidID;
var transactionDate = '#DateTime.Today';
var transactionExtensions = "1";
var fileBase64Data = $("#fileUpload").text();
if ($('#Commentinput').val() == "") {
paymentCommentReason = "No Comment";
}
else {
paymentCommentReason = $('#Commentinput').val();
}
var adjustmentTransactioninfo =
{
PaymentReasonMasterId: paymentReasonMasterId,
DebitEntityValue: debitEntityValue,
CreditEntityValue: creditEntityValue,
Amount: amount,
PaymentActionReason: paymentActionReason,
PaymentCommentReason: paymentCommentReason,
PrepayAccountId: prepayAccountId,
TransactionDate: transactionDate,
TransactionExtensions: transactionExtensions
};
var data = JSON.stringify({
'adjustmentTransactioninfo': adjustmentTransactioninfo,
'fileData': 0
});
var url = "#Html.Raw(Url.Action("AdjustmentTransaction",
"PrepaidActivity"))";
url += '?branchCode=' + '#Model.prepaidBranchList.IASBranchCode'
$.ajax({
url: url,
traditional: true,
data: data,
enctype:"multipart/form-data",
contentType: "application/json charset=utf-8",
dataType: "json",
type: 'POST',
success: function (data) {
$("#ajaxLoader").show();
if (data != null) {
var ProductActionID = data.SuccessMessage.split(':');
uploadFile.append('ProductActionID' , ProductActionID[1]);
FileUpload(uploadFile);
var dialog = document.querySelector('#Finaldialog');
var ConfirmationScreen = $("<p></p>").text(data.SuccessMessage);
$("#finalmdl-dialog").append(ConfirmationScreen);
dialog.showModal();
dialog.querySelector('button:not([disabled])').addEventListener('click', function() {
dialog.close();
location.reload();
});
}
}
});`
Controller code
public JsonResult AdjustmentTransaction(TraxAdjustmentTransactionInfo adjustmentTransactioninfo, string fileData, string branchCode)
{
PrepaidAdminService.PrepaidAdminDashBoardServiceClient _PrepaidAdminService = new PrepaidAdminService.PrepaidAdminDashBoardServiceClient();
TraxAdjustmentTransactionResult result;
adjustmentTransactioninfo.ProductActionMasterId = Convert.ToInt16(System.Configuration.ConfigurationManager.AppSettings["ProductActionMasterId"]);
adjustmentTransactioninfo.ProductCode = Convert.ToString(System.Configuration.ConfigurationManager.AppSettings["ProductCode"]);
adjustmentTransactioninfo.DebitEntityMasterId = TraxEntityType.GPLedgerAccount;
adjustmentTransactioninfo.CreditEntityMasterId = TraxEntityType.GPLedgerAccount;
adjustmentTransactioninfo.UserId = Utility.UserID;
adjustmentTransactioninfo.RetailerId = _PrepaidAdminService.GetBranchRetailerId(branchCode);

use serializeArray and can be add the additional data:
var data = $('form').serializeArray();
data.push({name: 'Amit', value: 'love'});
$.ajax({
type: "POST",
url: "url",
data: data,
success: function(data) {
// do what ever you want with the server response
},
error: function() {
alert('error handing here');
}
});

Remove the #Html.Raw(Url.Action()), contentType and JSON.stringify() and leave that to the ModelBinder. Change your ajax to this:
$.ajax({
url: '#Url.Action("AdjustmentTransaction", "PrepaidActivity")',
traditional: true,
data: {
adjustmentTransactioninfo: adjustmentTransactioninfo,
fileData: "0",
branchCode: '#Model.prepaidBranchList.IASBranchCode'
},
enctype: "multipart/form-data",
type: 'POST',
success: function (data) {
alert("success");
}
});

var params = { param1: value, param2: value2}
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: '../aspxPage.aspx/methodName',
data: JSON.stringify(params),
datatype: 'json',
success: function (data) {
var MethodReturnValue = data.d
},
error: function (xmlhttprequest, textstatus, errorthrown) {
alert(" conection to the server failed ");
}
});
// Param1 and param2 name should be same as method argument

alert() in AJAX success handler not shown

The code is:
$.ajax({
type: "POST",
url: '#Url.Action("getFilterActiveData")',
dataType: "json",
mtype: "post",
traditional: true,
data: {
values: arg
},
async: true,
beforeSend: function () {
$("#filter tr").live('click', function () {
document.getElementById('filter_btn').style.pointerEvents = 'none';
});
$('#filter_loading').fadeIn();
},
success: function (data) {
$('#filter_loading').fadeOut();
$("#filter tr").live('click', function () {
alert("does not shown");
if (isSection == false) {
$('#filter_btn').click().promise().done(function () {
document.getElementById('filter_btn').style.pointerEvents = 'auto';
});
}
});
}
});
The alert is not shown, but if I write out side of the AJAX directly like:
$("#filter tr").click(function () {
alert("clicked " + isSection);
Then it will show. Any suggestions please? I can make a function that will be called in success but I don't know about what to do in beforeSend()

Try this one , live method is depreciated long ago. Instead of live you can use the $.on() , $.bind() or something like that..
$.ajax({
type: "POST",
url: 'file url',
dataType: "json",
method : "post",
data: { values: arg },
async: true,
beforeSend: function(){
$("#filter tr").on('click', function () {
document.getElementById('filter_btn').style.pointerEvents = 'none';
});
$('#filter_loading').fadeIn();
},
success: function (data) {
$('#filter_loading').fadeOut();
$("#filter tr").click(function () {
alert("does not shown");
if (isSection == false) {
$('#filter_btn').click().promise().done(function () {
document.getElementById('filter_btn').style.pointerEvents = 'auto';
}
});
}
});

Unable to call aspx page web method using jquery ajax call?

Here is my ajax call
$(document).ready(function () {
$("#btnSubmit").click(function () {
alert("I am in ?");
$.ajax({
type: "POST",
url: "TestNew2.aspx/DisplayData",
data: "{}",
contentType: "application/x-www-form-urlencoded",
dataType: "text",
//success: function (msg) {
// // Replace the div's content with the page method's return.
// $("#btnSubmit").text(msg.d);
// alert(msg.d);
//}
success: function (result, status, xhr) {
document.getElementById("lblOutput").innerHTML = xhr.responseText
},
error: function (xhr, status, error) {
alert(xhr.error);
}
});
});
});
and my Web method[WebMethod]
public static string DisplayData()
{
return DateTime.Now.ToString();
}
Getting aspx page when trying to call web method on aspx page.Here is the jQuery code
Can any one point out what may be wrong.Because the web method is not getting called.

Try Like
$.ajax
({
url: " URL",
data: "{ 'name' : 'DATA'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
async: true,
dataFilter: function (data) { return data; },
success: function (data)
{
alert(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error");
}
});
OR
jQuery.ajax({
type: "POST",
url: "Login.aspx/checkUserNameAvail",
contentType: "application/json; charset=utf-8",
data: "{'iuser':'" + userid + "'}",
dataType: "xml",
success: function (msg) {
$(msg).find("Table").each(function () {
var username = $(this).find('UserName').text();
if (username != '') {
//window.location.replace('/iCalendar.aspx');
alert('This username already taken..');
$("#reguser").val('');
$("#reguser").focus();
}
else {
}
});
},
error: function (d) {
}
});
.CS
[WebMethod(enableSession: true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
public static string checkUserNameAvail(string iuser)
{
try
{
iCalendarClass iC = new iCalendarClass();
DataSet ds = iC.checkUserNameAvail(iuser);
return (ds.GetXml());
}
catch
{
return null;
}
}