Kendo & Web API using OData: ODataActionParameters is null - asp.net-web-api

Using OData v3, trying to bind Kendo Grid to OData Actions.
Problem
ODataActionParameters is always null...
Here are my actions:
[EnableQuery]
[HttpPost]
public virtual IQueryable<ComparitiveLocalizableString> GetComparitiveTable(ODataActionParameters parameters)
{
string cultureCode = (string)parameters["cultureCode"];
var query = Repository.Table
.Where(x => x.CultureCode == null || x.CultureCode == cultureCode)
.GroupBy(x => x.TextKey)
.Select(grp => new ComparitiveLocalizableString
{
Key = grp.Key,
InvariantValue = grp.FirstOrDefault(x => x.CultureCode == null).TextValue,
LocalizedValue = grp.FirstOrDefault(x => x.CultureCode == cultureCode) == null ? "" : grp.FirstOrDefault(x => x.CultureCode == cultureCode).TextValue
});
return query;
}
[HttpPost]
public virtual IHttpActionResult PutComparitive(ODataActionParameters parameters)
{
string cultureCode = (string)parameters["cultureCode"];
string key = (string)parameters["key"];
var entity = (ComparitiveLocalizableString)parameters["entity"];
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (!key.Equals(entity.Key))
{
return BadRequest();
}
var existing = Repository.Table.FirstOrDefault(x => x.CultureCode == cultureCode && x.TextKey == key);
if (existing == null)
{
return NotFound();
}
existing.TextValue = entity.LocalizedValue;
Repository.Update(existing);
return Updated(entity);
}
[HttpPost]
public virtual IHttpActionResult DeleteComparitive(ODataActionParameters parameters)
{
string cultureCode = (string)parameters["cultureCode"];
string key = (string)parameters["key"];
var entity = Repository.Table.FirstOrDefault(x => x.CultureCode == cultureCode && x.TextKey == key);
if (entity == null)
{
return NotFound();
}
Repository.Delete(entity);
return StatusCode(HttpStatusCode.NoContent);
}
My OData route configuration:
var getComparitiveTableAction = builder.Entity<LocalizableString>().Collection.Action("GetComparitiveTable");
getComparitiveTableAction.Parameter<string>("cultureCode");
getComparitiveTableAction.Returns<IQueryable<ComparitiveLocalizableString>>();
var putComparitiveAction = builder.Entity<LocalizableString>().Collection.Action("PutComparitive");
putComparitiveAction.Parameter<string>("cultureCode");
putComparitiveAction.Parameter<string>("key");
putComparitiveAction.Parameter<ComparitiveLocalizableString>("entity");
putComparitiveAction.Returns<IHttpActionResult>();
var deleteComparitiveAction = builder.Entity<LocalizableString>().Collection.Action("DeleteComparitive");
deleteComparitiveAction.Parameter<string>("cultureCode");
deleteComparitiveAction.Parameter<string>("key");
deleteComparitiveAction.Returns<IHttpActionResult>();
and the config for my Kendo Grid:
var odataBaseUrl = "/odata/cms/LocalizableStrings/";
$(document).ready(function () {
$("#Grid").kendoGrid({
data: null,
dataSource: {
type: "odata",
transport: {
read: {
url: odataBaseUrl + "GetComparitiveTable",
dataType: "json",
type: "POST"
},
update: {
url: odataBaseUrl + "PutComparitive",
dataType: "json",
type: "POST"
},
destroy: {
url: odataBaseUrl + "DeleteComparitive",
dataType: "json",
type: "POST"
},
parameterMap: function (options, operation) {
if (operation === "read") {
alert(cultureCode);
return JSON.stringify({
cultureCode: cultureCode
});
}
else if (operation === "update") {
var model = models[0];
return {
cultureCode: cultureCode,
key: model.Key,
entity: model
};
}
else if (operation === "destroy") {
var model = models[0];
return {
cultureCode: cultureCode,
key: model.Key
};
}
}
},
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
return data["odata.count"];
},
model: {
fields: {
Key: { type: "string", editable: false },
InvariantValue: { type: "string", editable: false },
LocalizedValue: { type: "string" }
}
}
},
batch: true,
//etc......
Where am I going wrong? How can I fix this?

It seems I just needed to add, contentType: "application/json" as per the following:
read: {
url: odataBaseUrl + "GetComparitiveTable",
dataType: "json",
contentType: "application/json",
type: "POST"
},
update: {
url: odataBaseUrl + "PutComparitive",
dataType: "json",
contentType: "application/json",
type: "POST"
},
destroy: {
url: odataBaseUrl + "DeleteComparitive",
dataType: "json",
contentType: "application/json",
type: "POST"
}

Related

Kendo treeview HierarchicalDataSource not showing child nodes

I have a kendo Treeview which is showing the parent nodes but the child nodes are not seen. Can anyone tell me where am i going wrong. I am new to this concept. I followed the below link but its not working.
http://demos.telerik.com/kendo-ui/treeview/remote-data-binding
function treeView() {
var treeM = new kendo.data.HierarchicalDataSource({
schema: {
data: function (response) {
console.log("response" + JSON.stringify(response));
var rdata = {};
if (response.d) {
rdata = JSON.parse(response.d);
}
else {
rdata = response;
}
return rdata; // ASMX services return JSON in the following format { "d": <result> }.
},
model: {
hasChildren: true,
id: "ID",
expanded: true,
fields: {
ID: { editable: false, nullable: false, type: "string" },
LINK: { editable: true, nullable: true, type: "string" },
},
},
},
transport: {
read: {
url: "/getParent",
contentType: "application/json; charset=utf-8",
type: "POST",
datatype: "json"
},
parameterMap: function (data, type) {
if ((type == "update") || (type == "create") || (type == "destroy")) {
console.log('parameterMap:');
return JSON.stringify({ "LinksJson": data });
console.log(JSON.stringify(data));
} else {
return data;
}
}
}
});
$("#treeview1").kendoTreeView({
dataSource: treeM,
dataValueField: "ID",
dataTextField: ["LINK","Name"]
});
}
$("#treeview").on("click", ".k-in", function (e) {
var tree = $("#treeview").data('kendoTreeView');
tree.toggle($(e.target).closest(".k-item"));
});
$(document).ready(function () {
treeView();
});
Service:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string getParent()
{
using (var context = new Data.Entities())
{
IQueryable<ERPv2.Data.Links> dataQuery = from x in context.Links
where x.ParentID == 68
select x;
var newQry = dataQuery.AsEnumerable().Select(c => new
{
ID = c.ID,
Name = c.Name,
Children = HasChildren(231)
});
JavaScriptSerializer JSON = new JavaScriptSerializer();
return JSON.Serialize(newQry);
}
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public bool HasChildren(int ID)
{
using (var context = new Data.Entities())
{
IQueryable<ERPv2.Data.Links> dataQuery = from x in contextLinks
where x.ParentID == ID
select x;
return dataQuery.AsEnumerable().Any();
}
}
Even when you try to view the child nodes, it will try to call getLinks and not the getreports.
From what i have seen , you should have only one method for getting parent and children. Can be an array inside each parent node.
Can you combine the data from GetReports method inside getlinks itsself and give it a shot.
You should try and get this working here with hardcoded values and then do configure with services.
http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#configuration-dataSource

Semantic UI custom form validation with Ajax

I am trying to implement custom form validation rules for my username field, which should check the database for duplicated or not.
After Searching on the internet, I had write out some code, and it successful getting the response "true / false" from my server. But the fields in the form doesn't update as it should. Below was my javascript code.
$.fn.form.settings.rules.checkUsername = function(value) {
var res = true;
$.ajax({
async : false,
url: '<?= Yii::app()->createAbsoluteUrl('home/doCheckUsername') ?>',
type : "POST",
data : {
username : value
},
dataType: "json",
success: function(data) {
if (data.result == true) {
console.log(data.result);
return false;
} else {
console.log(data.result);
return true;
}
}
});
};
$('.ui.form').form({
username: {
identifier : 'username',
rules: [{
type : 'checkUsername',
prompt : 'Username Already Exists'
}]
}
// some other rules
}, {
inline : true,
on : 'blur',
onSuccess : function(){
//post to controller
}
});
The console.log showing me the correct result as I want, but I keep getting "Username Is Exist" as show at the picture
Semantic UI form Validation result
May I know where are the place I doing it wrong ?
Somehow, Added Async at the ajax solve the problem.
$.ajax({
async : false,
url: '<?= Yii::app()->createAbsoluteUrl('home/doCheckUsername') ?>',
type : "POST",
async: false,
data : {
username : value
},
dataType: "json",
success: function(data) {
if (data.result == true) {
console.log(data.result);
res = false;
}
}
});
Put result in the res variable and return the res variable after the ajax call !
Work for me :
$.fn.form.settings.rules.checkemail = function(value) {
var res = true;
$.ajax({
async : false,
url: '../php/email_exist.php',
type : "POST",
async: false,
data : {
email : value
},
success: function(data) {
console.log(data);
if (data == "0") {
console.log("OK");
res = true;
} else {
console.log("KO");
res = false;
}
}
});
return res;
};
$.fn.form.settings.rules.checkUsername = function(value) {
var res = true;
$.ajax({
async : false,
url: '<?= Yii::app()->createAbsoluteUrl('home/doCheckUsername') ?>',
type : "POST",
data : {
username : value
},
dataType: "json",
success: function(data) {
if (data.result == true) {
//console.log(data.result);
//return false;
**value = 0;**
} else {
//console.log(data.result);
//return true;
**value = 1;**
}
}
});
**return (value == 1 )? true : false;**
};
$('.ui.form').form({
username: {
identifier : 'username',
rules: [{
type : '**checkUsername[value]**',
prompt : 'Username Already Exists'
}]
}
// some other rules
}, {
inline : true,
on : 'blur',
onSuccess : function(){
//post to controller
}
});

webapi 2 key delta patch update

Using le framework here
http://blog.longle.net/2014/03/04/harness-the-power-of-asp-net-mvc-web-api-odata-kendo-ui-requirejs-to-build-an-easy-maintainable-spa-for-the-net-developer-published/
and here
Web API + OData - PATCH request 400 error
how to send key delta in patch update of WebAPI 2 odata where kendo datasource "batch: true"
AcceptVerbs("PATCH", "MERGE")]
public async Task<IHttpActionResult> Patch([FromODataUri] int key, Delta<Company> patch)
The key is always empty!!!
Does WebAPI odata supported by kendo?
Since it is a very specific task, I have only one tweak that is working for Repository Pattern provided by Le framework shown in the above mentioned link.
define(['kendo', 'testModel'],
function (kendo, testModel) {
var svcUrl = '/odata/modelURL';
var ds_test = new kendo.data.DataSource({
type: 'odata',
transport: {
read: {
//async: false,
url: svcUrl,
dataType: 'json'
},
update: {
url: function (data) {
return svcUrl + '(' + data.models[0].ID + ')';
},
dataType: 'json',
type: 'PATCH'
},
create: {
url: function (data) {
return svcUrl + '(' + data.models[0].ID + ')';
},
dataType: 'json',
type: 'PATCH'
},
destroy: {
url: function (data) {
return svcUrl + '(' + data.models[0].ID + ')';
},
dataType: 'json',
type: 'PATCH'
},
parameterMap: function(data, operation) {
if (operation != 'read') {
var model = kendo.stringify(data.models[0]);
return model;
};
return data.models;
}
},
batch: true,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
schema: {
data: function (data) { return data['value']; }, //{ return data.value; },
total: function (data) { return data['odata.count']; },
model: testModel
//parse: function(response) {
// var f = ds_appl_home.options.schema.model.fields;
// $.each(response, function (key, value) {
// if (!(key.toString() in f)) {
// delete response[key];
// }
// });
// return response;
//}
},
error: function (e) {
...
}
});
return ds_test;
});

Passing AJAX request in MVC3 environment

I was using MVC3 with AJAX. I was using AJAX within another AJAX. For the first AJAX request, it properly sends to the controller with data. But after returning from the AJAX request, I again posting the same data to another action. But second time the data comes null when coming to the controller. Please help me to fix this issue.
Code
$(document).ready(function () {
$('.deleteitems').live('click', function (e) {
var items = [];
$('.checkall').each(function () {
if ($(this).is(':checked'))
items.push($(this).attr("Id"));
});
var json = JSON.stringify(items);
var perm = $("#Permission").val();
if (items.length != 0) {
if (perm == "True") {
$.ajax({
url: '/ItemControl/ItemControl/Catalogue_Check',
type: 'POST',
dataType: 'json',
data: json,
contentType: 'application/json; charset=utf-8',
success: function (data) {
if (data == "S") {
DelBibsAlso();
}
else {
DelItemsonly();
}
}
});
}
else {
$("#divMes").removeClass("Success");
$("#divMes").addClass("Error");
showError("Sorry you dont have Permission!");
}
}
else {
alert("Select any Items to delete");
e.preventDefault();
}
});
});
function DelItemsonly() {
var items2 = [];
$('.checkall').each(function () {
if ($(this).is(':checked'))
items2.push($(this).attr("Id"));
});
var itemjson = JSON.stringify(items2);
var val = confirm("Are you sure you want to delete these records?");
if (val) {
$.ajax({
url: '/ItemControl/ItemControl/DeleteItems',
type: 'POST',
dataType: 'json',
data: { "id": itemjson, "DelBib": 0 },
contentType: 'application/json; charset=utf-8',
success: function (data) {
e.preventDefault();
$(".t-grid .t-refresh").trigger('click');
$("#divMes").removeClass("Error");
$("#divMes").addClass("Success");
showError("Data Successfully Deleted");
}
});
}
else {
e.preventDefault();
}
}
function DelBibsAlso() {
var items1 = [];
$('.checkall').each(function () {
if ($(this).is(':checked'))
items1.push($(this).attr("Id"));
});
var bibjson = JSON.stringify(items1);
var value = confirm("Do you also want to delete the catalogue record?");
var cond = 0;
if (value) {
var cond = 1;
}
else {
cond = 0;
}
var val = confirm("Are you sure you want to delete these records?");
if (val) {
$.ajax({
url: '/ItemControl/ItemControl/DeleteItems',
type: 'POST',
dataType: 'json',
data: { "id": bibjson, "DelBib": cond },
contentType: 'application/json; charset=utf-8',
success: function (data) {
e.preventDefault();
$(".t-grid .t-refresh").trigger('click');
$("#divMes").removeClass("Error");
$("#divMes").addClass("Success");
showError("Data Successfully Deleted");
}
});
}
else {
e.preventDefault();
}
}
Controller Code
public ActionResult Catalogue_Check(string[] id)
{
DeleteItem weed = new DeleteItem();
int[] ints = id.Select(x => int.Parse(x)).ToArray();
var Matched_BibID = (from asd in Db.Items
where ints.Contains(asd.Id)
select asd.BibId).ToList();
foreach (var idd in ints)
{
var bibid = (from bib in Db.Items where bib.Id == idd select bib.BibId).Single();
var checkbib = (from bibchk in Db.Items where bibchk.BibId == bibid && !ints.Contains(bibchk.Id) select bibchk.Id).Count();
if (checkbib == 0)
{
return Json("S", JsonRequestBehavior.AllowGet);
}
}
return Json("N", JsonRequestBehavior.AllowGet);
}
public JsonResult DeleteItems(string[] id, int? DelBib)
{
//var newid = id.Split(',');
DeleteItem weed = new DeleteItem();
int[] ints = id.Select(x => int.Parse(x)).ToArray();
foreach (var a in id)
{
int sel = Convert.ToInt32(a);
Item item = Db.Items.Single(i => i.Id == sel);
int Sess = Convert.ToInt16(Session["AccId"]);
string AdminName = User.Identity.Name;
bool Exist = Db.RouteOuts.Any(itm => itm.ItemId == item.Id);
if (!Exist)
{
weed.DeleteIt(item, Sess, AdminName);
var bibid = (from bib in Db.Items where bib.Id == item.Id select bib.BibId).Single();
var checkbib = (from bibchk in Db.Items where bibchk.BibId == bibid && !ints.Contains(bibchk.Id) select bibchk.Id).Count();
if (checkbib == 0)
{
Db.ExecuteStoreCommand("update Bibs set Status= 'D' where Id={0}", item.BibId);
Db.SaveChanges();
}
}
}
return Json("S", JsonRequestBehavior.AllowGet);
}
function Test() {
var items1 = [];
$('.checkall').each(function () {
if ($(this).is(':checked'))
items1.push($(this).attr("Id"));
});
//var bibjson = JSON.stringify(items1); **** Loose this line ****
var value = confirm("Do you also want to delete the catalogue record?");
var cond = 0;
if (value) {
var cond = 1;
}
else {
cond = 0;
}
var val = confirm("Are you sure you want to delete these records?");
if (val) {
$.ajax({
url: '/ItemControl/ItemControl/DeleteItems',
type: 'POST',
dataType: 'json',
data: JSON.stringify({ "id": items1, "DelBib": cond }), // **** Items are stringified before posting ****
contentType: 'application/json; charset=utf-8',
success: function (data) {
e.preventDefault();
$(".t-grid .t-refresh").trigger('click');
$("#divMes").removeClass("Error");
$("#divMes").addClass("Success");
showError("Data Successfully Deleted");
}
});enter code here
}
else {
e.preventDefault();
}

asp.net mvc 3 json does not work

This is my jquery with json
$('#btnVerificationOk').click(function () {
var verId = $('#trans_verification_id').val();
var verCode = $('#trans_verification_code').val();
$.ajax({
url: '/Profile/CompleteTransactions',
type: 'POST',
data: { },
dataType: 'json',
success: function (result) {
alert(result);
},
error: function () {
alert('ERROR ERROR !!!!!!!!!!!!');
}
});
});
And My C# method:
[Authorize]
[HttpPost]
private JsonResult CompleteTransactions()
{
return Json("Done");
}
Its always alerts 'ERROR ERROR !!!!!!!!!!!!' i tried debugging but CompleteTransactions method is not firing
And this is my second json which is bellow and works good
$('#btnTransfareOk').click(function () {
var userName = $('#transfare_username').val();
var amount = $('#transfare_amount').val();
if (userName == '' || amount == '') {
$('#transfare_error_list').html('Please fill boxes.');
} else {
$.ajax({
url: '/Profile/TranfareMoney',
type: 'POST',
data: { ToUsername: userName, Amount: amount },
dataType: 'json',
success: function (result) {
$('#transfare_error_list').html(result.text);
$('#trans_verification_id').val(result.id);
$('#transfare_username').val("");
$('#transfare_amount').val("");
},
error: function () {
$('#transfare_error_list').html('Oops... Error.');
}
});
}
});
I'm not 100% sure, but shouldn't you controller action handler be public ?

Resources