We Keep Coding

Trouble sending JSON data to another action in asp.net MVC controller

I have this controller action:
[HttpPost]
public ActionResult OrderData(Order order)
{
var result = new { redirectToUrl = Url.Action("SeatSelection", "Orders", new { id = order.ScreeningId }), order };
return Json(result);
}
and I'm trying to pass the order object to another action:
public ActionResult SeatSelection(int id, Order order)
{
var screeningInDb = _context.Screenings.Include(s => s.Seats).Single(s => s.Id == order.ScreeningId);
var viewModel = new SeatSelectionViewModel
{
Seats = screeningInDb.Seats,
NumberOfTicketsOrdered = order.NumberOfTicketsOrdered
};
return View("SeatSelection", viewModel);
}
The problem is - the only parameter I'm receiving in SeatSelection Action is the id parameter, although the order object in OrderData Action is valid. I'm pretty sure the problem is within the way I'm trying to pass the order object, maybe something with the syntax?
Here is the way I'm posting my form data to the OrderData Action:
$.ajax({
type: "POST",
url: '#Url.Action("OrderData", "Orders")',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(orderData),
dataType: "json",
success: function (res) {
alert("Success!");
window.location.href = res.redirectToUrl;
},
error: function (xhr, status, error) {
alert(status);
}
});
Bottom line - What I'm eventually trying to do is to pass the form to a Controller Action where the data will be processed, and then pass the new data to "SeatSelection" view. I had trouble doing this as my post method sends JSON data, so if there is a better way to do what I'm trying to do, I would be happy to learn!

Your model doesn't match SeatSelection parameter signature.
Try:
$.ajax({
type: "POST",
url: '#Url.Action("OrderData", "Orders")',
contentType: "application/json; charset=utf-8",
data: `{"order": ${JSON.stringify(orderData)}}`,
dataType: "json",
success: function (res) {
alert("Success!");
window.location.href = res.redirectToUrl;
},
error: function (xhr, status, error) {
alert(status);
}
});
or (this one just creates a javascript object, which has the two signature properties in):
const sendObj = { id: 0, order: orderData };
$.ajax({
type: "POST",
url: '#Url.Action("OrderData", "Orders")',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(sendObj),
dataType: "json",
success: function (res) {
alert("Success!");
window.location.href = res.redirectToUrl;
},
error: function (xhr, status, error) {
alert(status);
}
});

you can't use
window.location.href = ...
because in this case browser always calls a GET method that can only keep data in a query string with primitives parameters and it doesn't convert Order to a qusery string parameters. This is why you can get only id.
in your case it would be much easier to redirect directly in the action
public ActionResult OrderData(Order order)
{
return RedirectToAction( ( "SeatSelection", "Orders", new { id = order.ScreeningId }), order });
}
or when it is the same controller I usually do this
public ActionResult OrderData(Order order)
{
return SeatSelection (order.ScreeningId, order };
}
but since you are using ajax it will redirect, but will not update your view. For ajax you need a partial view that should be updated on success. So instead of ajax you can only submit form using button. In this case everything will be working ok.
Another way you can use ajax is you can try to split the order in properties and create a query string.

Posting AJAX string to MVC Controller

I am trying to post a string (the name of the href the user clicked on) using AJAX to my MVC controller (which it will then use to filter my table results according to the string).
Whilst I have managed to get it to post (at-least according to the alerts) on the AJAX side, it doesn't seem to arrive properly on the controller side and is seen as null in my quick error capture (the if statement).
Please excuse the useless naming conventions for the moment. I've been going through countless methods to try and fix this, so will name properly when I've got a proper solution :).
I've been at work for this for a long while now and can't seem to solve the conundrum so any help is appreciated please! I'm very new to AJAX and MVC in general so I'm hoping it's a minor mistake. :) (FYI I have tried both post and get and both seem to yield the same result?)
Controller:
[Authorize]
[HttpGet]
public ActionResult GetSafeItems(string yarp)
{
using (CBREntities2 dc = new CBREntities2())
{
if (yarp == null)
{
ViewBag.safeselected = yarp;
}
var safeItem = dc.Items.Where(a => a.Safe_ID == yarp).Select(s => new {
Serial_Number = s.Serial_Number,
Safe_ID = s.Safe_ID,
Date_of_Entry = s.Date_of_Entry,
Title_subject = s.Title_subject,
Document_Type = s.Document_Type,
Sender_of_Originator = s.Sender_of_Originator,
Reference_Number = s.Reference_Number,
Protective_Marking = s.Protective_Marking,
Number_recieved_produced = s.Number_recieved_produced,
copy_number = s.copy_number,
Status = s.Status,
Same_day_Loan = s.Same_day_Loan
}).ToList();
// var safeItems = dc.Items.Where(a => a.Safe_ID).Select(s => new { Safe_ID = s.Safe_ID, Department_ID = s.Department_ID, User_ID = s.User_ID }).ToList();
return Json(new { data = safeItem }, JsonRequestBehavior.AllowGet);
}
}
AJAX function (on View page):
$('.tablecontainer').on('click', 'a.safeLink', function (e) {
e.preventDefault();
var yarp = $(this).attr('safesel');
var selectedSafeZZ = JSON.stringify("SEC-1000");
$.ajax({
url: '/Home/GetSafeItems',
data: { 'yarp': JSON.stringify(yarp) },
type: "GET",
success: function (data) {
alert(yarp);
console.log("We WIN " + data)
},
error: function (xhr) {
alert("Boohooo");
}
});
})
** The Alert reveals the correct type: "SEC-1000"
But the console Log shows: WE WIN [Object object]??

I have tried something basic in a new mvc dummy project :
View page basic textbox and a button :
<input type="text" id="txt_test" value="test"/>
<button type="button" class="btn" onclick="test()">Test</button>
<script type="text/javascript">
function test()
{
var text = $("#txt_test")[0].value;
$.ajax({
url: '#Url.RouteUrl(new{ action="GetSafeItems", controller="Home"})',
// edit
// data: {yarp: JSON.stringify(text)},
data: {yarp: text},
type: 'GET',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function(data) {
// edit
// alert(JSON.stringify(data));
alert(data.data);
}});
}
</script>
Controller :
[HttpGet]
public ActionResult GetSafeItems(string yarp)
{
return Json(new {data = string.Format("Back end return : {0}",yarp)}
, JsonRequestBehavior.AllowGet);
}
Alert result => {"data":"Back end return : \"test\""}
It's a simple ajax call to a web method. You don't return a view, so I don't understand the use of
if (yarp == null)
{
ViewBag.safeselected = yarp;
}
Also I see an [Authorize] attribute, you perhaps use some authentication and I don't see any authentication header on your ajax call

Try this:
$.each(data, function (i) { console.log("We WIN " + data[i].Serial_Number )});

Updating database call without having to refresh page

A list of images (treasures) are displayed to the user, here the user will choose a single image which will be stored in the Learner_treauser table:
List<The_Factory_Chante.Models.Treasure> tresh;
using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext())
{
string imageSource = "";
tresh = db2.Treasures.ToList();
foreach (var item in tresh)
{
if (item.itemImage != null)
{
string imageBase = Convert.ToBase64String(item.itemImage);
imageSource = string.Format("data:image/gif;base64,{0}", imageBase);
}
<img id="#item.treasureID" src="#imageSource" onclick="return MakeSure(#item.treasureID)" />
}
}
The function called when an image is chosen. In this function the image is sent over to a webservice method to be saved to the database, and the page is reload for an update to take place:
function MakeSure(treshID) {
var id = treshID
$.ajax({
url: "../../WebService.asmx/MakeSure",
data: "{ 'id': '" + id + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
window.location.reload();
};
However this is not very pleasant on the user's point of you. A better way would be to update without refreshing the page.
Here is the Webservice method that receives the chosen image id and stores it in the Learner_Treasure table.
public void MakeSure(int id)
{
using (The_FactoryDBContext db = new The_FactoryDBContext())
{
Learner_Treasure learnTreasure = new Learner_Treasure();
learnTreasure.dateCompleted = DateTime.Today;
learnTreasure.learnerID = UserInfo.ID;
learnTreasure.treasureID = id;
db.Learner_Treasure.Add(learnTreasure);
db.SaveChanges();
}
Code to call Learner_Treasure table.
List<The_Factory_Chante.Models.Learner_Treasure> lern;
using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext())
{
string imageSource = "";
lern = db2.Learner_Treasure.ToList();
if (lern != null)
{
foreach (var item in lern)
{
if (item.learnerID == UserInfo.ID)
{
byte[] bytes = db2.Treasures.FirstOrDefault(au => au.treasureID == item.treasureID).itemImage;
string imageBase = Convert.ToBase64String(bytes);
imageSource = string.Format("data:image/gif;base64,{0}", imageBase);
<img id="#item.treasureID" src="#imageSource"/>
}
}
This code will show the user all the images they have chosen, however in if I take away window.location.reload(); this code is only updated when the page reloads. Meaning that the user will not see their chosen image immediately after they have chosen it.
What I want to do is update the code that calls the Learner_Table without refreshing the page.

There is another way to approach this problem, you could use the SignalR library.
This is what you would need to do:
View
// Include the SignalR Script
<script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
// Provide a dynamic proxy for SignalR
<script src="~/signalr/hubs"></script>
// Define hub connection(see below)
var hub = $.connection.yourHub;
// This is what the Hub will call (Clients.All.getImage(imageSource);)
hub.client.getImage = function (img) {
var image = '<img id="' + img.treasureId + '" src="data:image/jpg;base64,' + img.image + '"';
$(image).appendTo("body");
};
// Start the connection to the hub
// Once we have a connection then call the getLearnerTreasureItem on the Hub
$.connection.hub.start().done(function () {
var id = // whatever
hub.server.getLearnerTreasureItem(id);
};
Hub
public class YourHub : Hub
{
public void GetLearnerTreasureItem()
{
// All your code
List<The_Factory_Chante.Models.Learner_Treasure> lern;
using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext())
{
string imageSource = "";
lern = db2.Learner_Treasure.ToList();
if (lern != null)
{
foreach (var item in lern)
{
if (item.learnerID == UserInfo.ID)
{
byte[] bytes = db2.Treasures.FirstOrDefault(au => au.treasureID == item.treasureID).itemImage;
string imageBase = Convert.ToBase64String(bytes);
imageSource = string.Format("data:image/gif;base64,{0}", imageBase);
}
}
// This will now call the getImage function on your view.
Clients.All.getImage(imageSource);
}
}
Information on the dynamic proxy

The way I approach this is by making a partial View for the code that needs to be refreshed
public PartialViewResult UserImages(your paramaters here)
{
your code here
}
And then after successful $.ajax I refresh it
var id = treshID
$.ajax({
url: "../../WebService.asmx/MakeSure",
data: "{ 'id': '" + id + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
$.ajax({
url: "/UserImages",
data: your data model here,
success(function(html)){
$("#yourPartialViewWrapperHere").html(html));
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});

Your problem is the onclick event handler here:
<img id="#item.treasureID" src="#imageSource" onclick="return MakeSure(#item.treasureID)" />
In the MakeSure() function you don't return anything. So you have two options, change your MakeSure() function to return false at the end, or change the onclick event to return false after the first function call in the image element, like this onclick="MakeSure(#item.TreasureID); return false;"
Also you will have to remove the window.location.reload(); from the MakeSure() function.
Side note, it seems you are mixing up your DbContext in your view, if that's the case, this is very bad practice. You should put your data access behind some sort of service layer that serves as a mediator between the view and your data.
Update
Ok after reading your question a few times I understand your problem
The problem is your second piece of code.
List<The_Factory_Chante.Models.Learner_Treasure> lern;
using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext())
{
string imageSource = "";
lern = db2.Learner_Treasure.ToList();
if (lern != null)
{
foreach (var item in lern)
{
if (item.learnerID == UserInfo.ID)
{
byte[] bytes = db2.Treasures.FirstOrDefault(au => au.treasureID == item.treasureID).itemImage;
string imageBase = Convert.ToBase64String(bytes);
imageSource = string.Format("data:image/gif;base64,{0}", imageBase);
<img id="#item.treasureID" src="#imageSource"/>
}
}
}
}
This calls the DB and gets a list of Learner_Treasure objects which you use to output on view. Server side code gets executed once every page request, this is exactly what is happening. It will not asynchronously update without a request to the server.
You need to implement an ajax request to pull the latest Learner_Treasure list into the view. Again this comes down to the first side note I gave, the reason is because you are mixing your dbcontext with your view and expecting it to update on the fly. If you implement a layer which serves your view with the data (controller), you could call this asynchronously and have the page update without it reloading.
For instance you could write a call in your controller to get a single LearnerTreasure item in json.
[HttpGet]
public ActionResult GetLearnerTreasureItem(int Id)
{
using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext()) {
learnerTreasureItem = db2.Learner_Treasure.FirstOrDefault(x => x.Id == Id);
return Json(new { image = Convert.ToBase64String(learnerTreasureItem.itemImage), treasureId = learnerTreasureItem.TreasureID }, JsonRequestBehavior.AllowGet);
}
}
And then call it with ajax in your view, like you did with the update.
$.ajax({
cache: false,
type: "GET",
url: '/YOURCONTROLLERNAME/GetLearnerTreasureItem?id=1',
contentType: 'application/json',
dataType: "json",
success: function (data) {
//build image element
var image = '<img id="' + data.treasureId + '" src="data:image/jpg;base64,' + data.image + '"';
//add the image to where you need it.
$(image).appendTo("body");
},
error: function (xhr) {
alert("Error occurred while loading the image.");
}
});
I hope this helps.

Update in treasures images list
<img id="#item.treasureID" src="#imageSource" onclick="return MakeSure(this, #item.treasureID)" />
read that param in MakeSure method. also I just assume Learner_Treasure images listed in ul named 'ulLearnerTreasure'.
function MakeSure(sender,treshID) {
var id = treshID;
var imgSrc = $(sender).attr("src");
$.ajax({
url: "../../WebService.asmx/MakeSure",
data: "{ 'id': '" + id + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
var li = '<li><img id ="'+ treshID +'"src="'+ imgSrc +'" /></li>';
$("#ulLearnerTreasure").append(li);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
};

I would implement it using HtmlHelpers, like so: (as someone suggested, using db code directly is not a good practice, you need to change that.)
public static class HTMLHelpers
{
public static IHtmlString TreasureImages(this HtmlHelper helper, List<The_Factory_Chante.Models.Learner_Treasure> lern)
{
StringBuilder sb = new StringBuilder();
using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext())
{
string imageSource = "";
lern = db2.Learner_Treasure.ToList();
if (lern != null)
{
foreach (var item in lern)
{
if (item.learnerID == UserInfo.ID)
{
byte[] bytes = db2.Treasures.FirstOrDefault(au => au.treasureID == item.treasureID).itemImage;
string imageBase = Convert.ToBase64String(bytes);
imageSource = string.Format("data:image/gif;base64,{0}", imageBase);
sb.Append("<li><img id='#item.treasureID' src='#imageSource'/></li>");
}
}
}
}
return new HtmlString(sb.ToString());
}
}
Placeholder for your images:
<ul id="TreaureImagesSection">
</ul>
In your cshtml page, load the list with this script, the first time or whenever you need the updated list
<script>
$.ajax({
cache: false,
type: "GET",
url: '/YOURCONTROLLER/TreasuresList',
contentType: 'application/json; charset=utf-8',
success: function (data) { // the data returned is List<The_Factory_Chante.Models.Learner_Treasure>
$("#TreaureImagesSection").html('#Html.TreasureImages(data)');
},
error: function (xhr) {
alert("Error occurred while loading the image.");
}
});
</script>

Ajax returning error 401 ("Unauthorized") in jQuery

Newbie here. I have an issue about Ajax. The situation is this: I have a multiselect dropdownlist of managements, and I want to bring the managers from those managements, and attach them on another dropdownlist (I did not finish that).
Here, I call the function and send the selected values:
getManagersByManagement($("#ddlManagement").val());
For now, I want this to return the data from GetManagers, on JsonGridDataProvider.svc.
function getManagersByManagement(managementIds) {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "../../JsonGridDataProvider.svc/GetManagers",
data: { 'Id': JSON.stringify(managementIds) },
dataType: "json",
success: function (data) {
$.jStorage.set($rpt.pageIdentifier + "-Managers", JSON.stringify(data));
alert($.jStorage.get($rpt.pageIdentifier + "-Managers"));
},
error: function (jqXhr, textStatus, errorThrown) {
alert("fail");
}
});
This is the GetManagers function >>
[OperationContract]
[WebGet(ResponseFormat = WebMessageFormat.Json)]
public List<User> GetManagers(long[] managementIds)
{
IList<User> allUserList = (new UserBiz()).GetAllByUserByTypeAndState(2, 3);
List<User> list = (from v in allUserList where v.Active == true orderby v.FullName ascending select v).ToList();
var finalUserList = (from item in list
let sameManList = (from v in item.Management
where managementIds.Contains(v.Id)
select v.Id).Distinct().ToList()
where sameManList.Count > 0
select item).ToList();
return finalUserList;
}
But when instead of going to the GetManagers function, it returns "error 401" ("Unauthorized"). Any idea why is this happening?
EDIT
Thank you all for your replies. Thanks to that, I checked the problem is not the javascript function nor the ajax configuration, but the GetManagers() function (or some configuration I'm missing). Any ideas?

Try adding an [HttpPost] attribute to the method you are calling. And change the type: "GET" to type: "POST" in your script. Maybe it will help. It worked for me.

json Array posting to mvc controller

I want to post JSON array to MVC controller through AJAX POST as:
$.ajax({
type: 'POST',
data: json.stringify(totaldata),
traditional:true,
url: '/Builder/Save',
success: function () {
alert("Playlist saved successfully!!");
}
})
and my controller code is have made array of one ViewModel & want to update those values as.
[HttpPost]
public ActionResult Save(IList<ItemEditViewModel> data,long playlistid=0, string Title="")
{
for (int i = 0; i < data.Count; i++)
{
var pc = db.PlaylistContents.FirstOrDefault(x => x.PlaylistContentId == data[i].ID);
if (pc == null)
{
pc = new PlaylistContent();
db.PlaylistContents.Add(pc);
}
pc.ContentMetaDataId = data[i].MetaID;
pc.PlaylistContentSequenceId = i + 1;
}
db.SaveChanges();
return RedirectToAction("Playlist", new {ID=playlistid });
}
But the Object is set to null in Controller.
My ViewModel is as,
public class ItemViewModel
{
public long ID{get;set;}
public long MetaID{get;set;}
}

Try adding the content type in ajax call,
contentType : 'application/json',
By default ajax sends with content type application/x-www-form-urlencoded; charset=UTF-8
Edit
also i dont know it this is a typo, json.stringify should be JSON.stringify
hope this helps.

$.ajax({
type: 'POST',
data: {"data":json.stringify(totaldata)},//You missed the format
traditional:true,
url: '/Builder/Save',
success: function () {
alert("Playlist saved successfully!!");
}
})

The Problem is solved & my application is working now properly.
I have just done JSON.stringify() on array elements & not the whole ajax data for posting.
the code is as written below:
var totaldata = { data: data, playlistid: parseInt(playlistid), Title: Title };
$.ajax({
type: 'POST',
data: { data: JSON.stringify(data), playlistid: parseInt(playlistid), Title: Title, deleted: JSON.stringify(deleted) },
traditional:true,
url: 'Save',
success: function (data) {
alert("Playlist saved successfully!!");
}
})