Martin.D Posted February 19, 2020 Share Posted February 19, 2020 Hi, Im having an issue i passing the selected items from a grid to method on a controller. My View looks like this; <script type="text/javascript" language="javascript"> function ClearInterfaceState() { var items = {}; var grid = $('#Visits').data('kendoGrid'); var selectedElements = grid.select(); for (var j = 0; j < selectedElements.length; j++) { var item = grid.dataItem(selectedElements[j]); items[j] = item.VisitId; } var MyAppUrlSettings = { MyUsefulUrl : '@Url.Action("ClearInterfaceState","QuickFixes")' } $.ajax({ url: MyAppUrlSettings.MyUsefulUrl, data: items, type: "post", dataType: "json", contextType: "application/json", traditional: true, success: function (result) { alert("Successfully changed"); }, error: function (_err) { alert(_err); } }); }; </script> The data in the items variable is there as I put an alert in to double check. The issue seems to be with the controller as the items is null? [Authorize] [HttpPost] public JsonResult ClearInterfaceState(int[] items) { return Json(new { success = true }, JsonRequestBehavior.AllowGet); // Some Code } Any help with this would be great as I've only been developing for a year now and javascript is still a mystery to me Link to comment Share on other sites More sharing options...
0 adrynalyne Posted February 19, 2020 Share Posted February 19, 2020 1 hour ago, Martin.D said: Hi, Im having an issue i passing the selected items from a grid to method on a controller. My View looks like this; <script type="text/javascript" language="javascript"> function ClearInterfaceState() { var items = {}; var grid = $('#Visits').data('kendoGrid'); var selectedElements = grid.select(); for (var j = 0; j < selectedElements.length; j++) { var item = grid.dataItem(selectedElements[j]); items[j] = item.VisitId; } var MyAppUrlSettings = { MyUsefulUrl : '@Url.Action("ClearInterfaceState","QuickFixes")' } $.ajax({ url: MyAppUrlSettings.MyUsefulUrl, data: items, type: "post", dataType: "json", contextType: "application/json", traditional: true, success: function (result) { alert("Successfully changed"); }, error: function (_err) { alert(_err); } }); }; </script> The data in the items variable is there as I put an alert in to double check. The issue seems to be with the controller as the items is null? [Authorize] [HttpPost] public JsonResult ClearInterfaceState(int[] items) { return Json(new { success = true }, JsonRequestBehavior.AllowGet); // Some Code } Any help with this would be great as I've only been developing for a year now and javascript is still a mystery to me A couple things. 1. Kendo is garbage. 2. You need to convert your data to a json string. Use JSON.stringify. Link to comment Share on other sites More sharing options...
0 ZakO Posted February 19, 2020 Share Posted February 19, 2020 (edited) You don't need to stringify it yourself, jQuery $.ajax handles that for you. The problem is you're sending an array but the ASP.NET model binder is expecting an object (well, string representation of one) to know which parameter to bind to even though you only have one. Change it to: $.ajax({ ... data: { items: items }, ... }); Link to comment Share on other sites More sharing options...
0 adrynalyne Posted February 22, 2020 Share Posted February 22, 2020 (edited) On 2/19/2020 at 12:03 PM, ZakO said: You don't need to stringify it yourself, jQuery $.ajax handles that for you. The problem is you're sending an array but the ASP.NET model binder is expecting an object (well, string representation of one) to know which parameter to bind to even though you only have one. Change it to: $.ajax({ ... data: { items: items }, ... }); Forgive me if I do not agree. Here is a working example solution that I threw together real quick. It requires .net core 3.1. Things of note: I simply return the POST data that comes in. Using jquery ajax without stringifying the data does not work. Using jquery ajax with stringifying the data does work. Using your data structure of sending it as a named JSON object also does not work. https://1drv.ms/u/s!AiOH5gkEn6Zfj8FMW-5PTou4SUEeaQ?e=l1ocdq Edited February 22, 2020 by adrynalyne Fixed link Link to comment Share on other sites More sharing options...
0 ZakO Posted February 23, 2020 Share Posted February 23, 2020 (edited) editing example Edited February 23, 2020 by ZakO Link to comment Share on other sites More sharing options...
0 ZakO Posted February 23, 2020 Share Posted February 23, 2020 (edited) 6 hours ago, adrynalyne said: Forgive me if I do not agree. Here is a working example solution that I threw together real quick. It requires .net core 3.1. Things of note: I simply return the POST data that comes in. Using jquery ajax without stringifying the data does not work. Using jquery ajax with stringifying the data does work. Using your data structure of sending it as a named JSON object also does not work. https://1drv.ms/u/s!AiOH5gkEn6Zfj8FMW-5PTou4SUEeaQ?e=l1ocdq My bad, you're right, for proper JSON requests it does need that, the OPs example threw me off. There's another bug in the OPs code they have contextType instead of contentType as the option so when I was testing (hadn't used jQuery for a long time) the model binder was checking encoded form fields instead of JSON. Edited February 23, 2020 by ZakO adrynalyne 1 Share Link to comment Share on other sites More sharing options...
0 adrynalyne Posted February 23, 2020 Share Posted February 23, 2020 (edited) 4 minutes ago, ZakO said: My bad, you're right, for proper JSON requests it does need that, the OPs example threw me off. There'a another bug in the OPs code they have contextType instead of contentType as the option so when I was testing (hadn't used jQuery for a long time) the model binder was checking encoded form fields instead of JSON. Ah yup. Good catch. Admittedly, I have tried to move away from JQuery as much as possible so I’m a little rusty with it. I usually end up having to write vanilla JS for space constraints (iot devices). ZakO 1 Share Link to comment Share on other sites More sharing options...
Question
Martin.D
Hi,
Im having an issue i passing the selected items from a grid to method on a controller.
My View looks like this;
<script type="text/javascript" language="javascript">
function ClearInterfaceState() {
var items = {};
var grid = $('#Visits').data('kendoGrid');
var selectedElements = grid.select();
for (var j = 0; j < selectedElements.length; j++) {
var item = grid.dataItem(selectedElements[j]);
items[j] = item.VisitId;
}
var MyAppUrlSettings = {
MyUsefulUrl : '@Url.Action("ClearInterfaceState","QuickFixes")'
}
$.ajax({
url: MyAppUrlSettings.MyUsefulUrl,
data: items,
type: "post",
dataType: "json",
contextType: "application/json",
traditional: true,
success: function (result) {
alert("Successfully changed");
},
error: function (_err) {
alert(_err);
}
});
};
</script>
The data in the items variable is there as I put an alert in to double check. The issue seems to be with the controller as the items is null?
[Authorize]
[HttpPost]
public JsonResult ClearInterfaceState(int[] items)
{
return Json(new { success = true }, JsonRequestBehavior.AllowGet);
// Some Code
}
Any help with this would be great as I've only been developing for a year now and javascript is still a mystery to me
Link to comment
Share on other sites
6 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now