Develop Reference

Using .Net MVC5, how to return foreign text in a JsonResult Action via jQuery.ajax and/or Ajax.Helper

Lets say I have an CONTROLLER Action like this (for demonstration only):
[HttpPost]
public async Task<JsonResult> GetMessage (PageViewModel vmodel)
{
Response.StatusCode = (int)HttpStatusCode.BadRequest;
Response.Headers[Constants.Messages] =
JsonConvert.SerializeObject(
new string[] { "ČČŠŠĆĆćććppššččđđ" });
return null;
}
And a client side jQuery ajax method like this:
$.ajax({
url: '#Url.Action("GetMessage","Test")',
method: "POST",
data: $("form").serialize(),
success: function (data, status, xhr) {
console.log("Success!");
},
error: function (xhr, status, error) {
console.log(status + " | " + error);
alert(xhr.getAllResponseHeaders());
}
});
Why does my alert always shows my custom header with value like this:
["ÄÄÅ Å ÄÄÄÄÄppÅ¡Å¡ÄÄÄÄ"]
I tried setting the Response.Encoding to:
null, "ISO-8859-2", "ANSI"
also, tried to change Response.ContentType to:
"text/html", "application/json"
But for some reason when I print all headers content type part looks like this:
"content-type=text/html; charset=utf-8;"
If I return my messages like this:
return Json(new string[] { "ČČŠŠĆĆćććppššččđđ" });
everything is fine BUT it looks like mobile browsers discard the responseText and put default status message which in my case is "Bad Request" (tried it on Galaxy Tab A T-280, Sony M5, iPhone 6)
Any ideas on how to solve this? ... or alternative way to return data on a http error response?
UPDATE 1
It seems I've been using Response.Encoding to try and set up a encoding for response but since I'm using headers I should have been using Response.HeaderEncoding.
So according to that, using Response.HeaderEncoding = System.Text.Encoding.GetEncoding("ISO-8859-2"); should fix my problem but it does not. While I don't know why, using "ISO-8859-1" gives somewhat better results. "ISO-8859-1" converts Š to S and other chars in question which I'am able to tolerate but its still not a solid fix. Any ideas?

Javascript does not call GET methods more than once due to Caching issues in browser. ResponseCaching does not fix issue

I made an application that uses Javascript (Vue.Js) to call my API and update lists on the page when I add a new Object to that list (in this case a list of users).
I made the mistake of only testing on Edge, where it updated itself perfectly if I made a get-call after I had updated the list. However, every other browser seems to cache it somehow, and does not call GET api/users more than once (noticed that by adding breakpoints).
In the past ASP.NET version adding [OutputCache(NoStore = true, Duration = 0)] most likely would have solved the Issue, but that does not work in ASP.NET Core 2.0.
I read up and found that ResponseCaching Is supposed to replace it. So I added it to my project and followed the official docs on how to implement it, but no luck.
To Startup.cs (as well as all required code to add the interface to my scope) I add:
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc(options =>
{
options.CacheProfiles.Add("Default",
new CacheProfile()
{
Duration = 60
});
options.CacheProfiles.Add("Never",
new CacheProfile()
{
Location = ResponseCacheLocation.None,
NoStore = true
});
});
}
Then to the top of each controller in my API I add:
[ResponseCache(CacheProfileName = "Never")]
public class UserController : Controller
{
This does not solve my issues, instead it seems to clear the accesstoken I use for my users so I can't keep users signed in anymore. Is this not the solution I need to fix my problem? Am I implementing it in the wrong way? Not sure where to go from here.
Here is what My Ajax calls in JS looks like:
addAdmin: function () {
var self = this;
$.ajax({
url: 'api/admins',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(self.adminCreate),
success: function (response) {
self.getAdmins(false);
},
error: function (jqXHR, textStatus, errorThrown) {
alert('Error: ' + textStatus + '\n' + errorThrown);
}
});
}
//gets called on Start as well as after each AddAdmin call.
getAdmins: function (toggle) {
var self = this;
if (!self.adminOpen || !toggle) {
$.ajax({
url: 'api/admins',
type: 'GET',
success: function (response) {
if (toggle) {
self.toggleAdminOpen();
}
self.admins = response;
},
error: function (jqXHR, textStatus, errorThrown) {
alert('Error: ' + textStatus + '\n' + errorThrown);
}
});
}
else if (self.adminOpen) {
self.toggleAdminOpen();
}
}

If the browser is not making the call again, then try adding this JavaScript (before anything else):
$.ajaxSetup({cache: false}});
The effect of this is that jQuery will add the current time as a URL parameter in every AJAX call. It will be ignored by the server, but it makes the URL "different" so that the browser sees every call as unique and thus unable to use its own cache.

jquery autocomplete to fill a javascript array?

I wanted to add autocomplete to a text box I had on my form. I found an excellent SO thread that entailed this right here: https://stackoverflow.com/a/5973017/168703 This was exactly what I needed because it also only showed the autocomplete when someone typed an # symbol.
It was something to the effect of this:
$("#ucAddActionItemIssueActions_txtActionItem")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
event.preventDefault();
}
}).autocomplete({
minLength: 0,
source: function(request, response) {
var term = request.term,
results = [];
if (term.indexOf("#") >= 0) {
term = extractLast(request.term);
if (term.length > 0) {
results = $.ui.autocomplete.filter(
availableTags, term);
} else {
results = ['Start typing...'];
}
}
response(results);
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
var email = GetEmail(ui.item.value);
email = email + ";";
emails.push(email);
$("#ucAddActionItemIssueActions_hdnEmails").val(emails.join(""));
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join("");
return false;
}
});
Pay close attention to the source portion as it forced me to declare something like this:
var availableTags = [
"jdoe",
"tsmith",
"mrighty",
"tstevens",
"ktripp",
"tram",
];
That is my autocomplete suggestions would be inside of the js file...but this is the only part I did not want. I have to load the data from a database. Unfortunately I am dealing with an ancient .net framework prolly pre 2.0 app. Its vb.net and there is no linq or lists or all the good stuff. Fine I thought..I could probably create a .asmx file that added strings to an array list, converted it back to a string array and returned it in the .asmx file. Something to this effect (this was just a test no pulling data just yet from a database):
Imports System.Web.Services
Imports System.Collections
<System.Web.Services.WebService(Namespace := "http://tempuri.org/myapp.com/GetLogins")> _
Public Class GetLogins
Inherits System.Web.Services.WebService
#Region " Web Services Designer Generated Code "
Public Sub New()
MyBase.New()
'This call is required by the Web Services Designer.
InitializeComponent()
'Add your own initialization code after the InitializeComponent() call
End Sub
'Required by the Web Services Designer
Private components As System.ComponentModel.IContainer
'NOTE: The following procedure is required by the Web Services Designer
'It can be modified using the Web Services Designer.
'Do not modify it using the code editor.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
components = New System.ComponentModel.Container()
End Sub
Protected Overloads Overrides Sub Dispose(ByVal disposing As Boolean)
'CODEGEN: This procedure is required by the Web Services Designer
'Do not modify it using the code editor.
If disposing Then
If Not (components Is Nothing) Then
components.Dispose()
End If
End If
MyBase.Dispose(disposing)
End Sub
#End Region
' WEB SERVICE EXAMPLE
' The HelloWorld() example service returns the string Hello World.
' To build, uncomment the following lines then save and build the project.
' To test this web service, ensure that the .asmx file is the start page
' and press F5.
'
'Public Function HelloWorld() As String
' Return "Hello World"
'End Function
<WebMethod()> _
Public Function GetLogins() As String()
Dim myList As ArrayList
myList.Add("jstevens")
myList.Add("jdoe")
Dim arr() As String = CType(myList.ToArray(Type.GetType("System.String")), String())
Return arr
End Function
End Class
As mentioned this was just a test so I'm just adding two items in a string array and returning it. Now I am pretty unsure how to change my jquery code to incorporate this....
I thought I would add something like this:
$.ajax({
url: "GetLogins.asmx/GetLogins",
data: "{ 'resName': '" + request.term + "' }",
datatype: "json",
type= "POST",
contentType: "application/json; charset=utf-8"
})
But I am not sure how to incorporate that in the original jquery as my jquery skills are zilch...
Can anyone help me understand this and put this together so it may actually work. Once I get the test working I can then modify it to pull data from the database. Am I on the right path?
EDIT
Here's what I have
$("#ucAddActionItemIssueActions_txtActionItem")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
event.preventDefault();
}
}).autocomplete({
minLength: 0,
source: function (request, response) {
//get client value
var c = $("#ucAddActionItemIssueActions_ddlClientAssignTo").val();
var params= '{"ClientID":"' + c + '"}';
$.ajax({
url: "GetLogins.asmx/GetLogins",
data: params,
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.name
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
var email = GetEmail(ui.item.value);
email = email + ";";
emails.push(email);
$("#ucAddActionItemIssueActions_hdnEmails").val(emails.join(""));
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join("");
return false;
}
});
But my app is throwing an internal server error 500. With the following exception:
System.InvalidOperationException: Request format is invalid:
application/json; charset=UTF-8. at
System.Web.Services.Protocols.HttpServerProtocol.ReadParameters() at
System.Web.Services.Protocols.WebServiceHandler.Invoke() at
System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()
Here is my webservice:
Imports System.Web.Services
Imports System.Collections
<System.Web.Services.WebService(Namespace := "http://tempuri.org/quikfix.jakah.com/GetLogins")> _
Public Class GetLogins
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function GetLogins(ByVal ClientID As Integer) As String()
Dim myList As New ArrayList
myList.Add("jstevens")
myList.Add("jdoe")
myList.Add("smartin")
Dim arr() As String = CType(myList.ToArray(Type.GetType("System.String")), String())
Return arr
End Function
End Class
Again this is an old 1.1 .net application, do I need something in the web config file to represent this .asmx file? The parameters in the web method match the parameters of the ajax call so what could be causing this?

I think the problem here is that web services expect XML or text. JSON won't work.
You can try changing your content-Type (in your ajax call) to text and returning a string instead of a string array from your GetLogins method. That way you can serialize your string array to a JSON string using a JSON converter and return that.

JSON Request appended with [object%20Object] in jQuery

I'm trying to fetch a custom JSON feed I have written with jQuery using the getJSON method. For an unknown reason the URL seems to be having cache_gen.php?location=PL4 stripped from the end and replaced with [object%20Object] resulting in a 404 error occurring.
Here's the jQuery I'm using:
var fetchData = function() {
if (Modernizr.localstorage) {
var api_location = "http://weatherapp.dev/cache_gen.php";
var user_location = "PL4";
var date = new Date();
console.log(api_location + '?location=' + user_location);
jQuery.getJSON({
type: "GET",
url: api_location + '?location=' + user_location,
dataType: "json",
success: function(jsonData) {
console.log(jsonData);
}
});
} else {
alert('Your browser is not yet supported. Please upgrade to either Google Chrome or Safari.');
}
}
fetchData();
From the console log I can see the URL string is calculated correctly as: http://weatherapp.dev/cache_gen.php?location=PL4
However the second line in the console is: Failed to load resource: the server responded with a status of 404 (Not Found).
Can anyone point me in the right direction with this?
UPDATE 19/01/2013 23:15
Well, I've just converted so that is fits the docs perfectly using $.ajax. I've also added a fail event and logged all of the data that gets passed to it.
var fetchData = function() {
if (Modernizr.localstorage) {
var api_location = "http://weatherapp.dev/cache_gen.php";
var user_location = "PL4";
var date = new Date();
var url = api_location + '?location=' + user_location;
console.log(url);
jQuery.ajax({
type: "GET",
url: api_location + '?location=' + user_location,
dataType: "json",
success: function(jsonData) {
console.log(jsonData);
},
error: function( jqXHR, textStatus, errorThrown ) {
console.log('textStatus: ' + textStatus );
console.log('errorThrown: ' + errorThrown );
console.log('jqXHR' + jqXHR);
}
});
} else {
alert('Your browser is not yet supported. Please upgrade to either Google Chrome or Safari.');
}
}
fetchData();
After this my console gives me the following information:
http://weatherapp.dev/cache_gen.php?location=PL4
download_api.js:44textStatus: parsererror
download_api.js:45errorThrown: SyntaxError: JSON Parse error: Unable to parse JSON string
download_api.js:46jqXHR[object Object]
I have ensured the headers for the JSON feed are current, and the feed is definitely serving valid JSON (it effectively caches a 3rd party service feed to save costs on the API).

The reason why you see this error:
http://weatherapp.dev/cache_gen.php?location=PL4
download_api.js:44textStatus: parsererror
download_api.js:45errorThrown: SyntaxError: JSON Parse error: Unable to parse JSON string
download_api.js:46jqXHR[object Object]
Is because your JSON is invalid. Even if a response comes back from the server correctly, if your dataType is 'json' and the returned response is not properly formatted JSON, jQuery will execute the error function parameter.
http://jsonlint.com is a really quick and easy way to verify the validity of your JSON string.

I was running into the same issue today. In my case I was assigning a JSON object to a variable named 'location' which is a reserved word in JavaScript under Windows and appearantly is a shorthand for windows.location! So the browser redirected to the current URL with [object%20Object] appended to it. Simple use a variable name other than 'location' if the same thing happens to you. Hope this helps someone.

Check out the actual function usage:
http://api.jquery.com/jQuery.getJSON/
You can't pass on object parameter into $.getJSON like with $.ajax, your code should look like this:
jQuery.getJSON('api_location + '?location=' + user_location)
.done(function() {
//success here
})
.fail(function() {
//fail here
});
To maybe make it a little clearer, $.getJSON is just a "wrapper function" that eventually calls $.ajax with {type:'get',dataType:'JSON'}. You can see this in the link I provided above.

Trouble with jQuery ajax

I am getting different errors in FF, Chrome and IE, but it all boils down there is an error with the data in $.ajax. Following is the code. Please go easy if I made a dumb mistake. I have spent hours researching this and can't figure it out. Any help appreciated.
Edited to include the error messages
FF Error message: NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument
Chrome Error message:Uncaught TypeError: Illegal invocation
IE9 Error message: SCRIPT65535: Argument not optional
Here is the code
mc.mc_data.click_tracking = [];
var sequence = 0;
var send_it;
// the container click event will record even extraneous clicks. need to change it to extending the jquery on click handler
$('#container').on('click', function(event) {
logClicks(event);
if(!send_it){
sendIt()
}
sequence++;
});
function sendIt(){
var tracking = mc.mc_data.click_tracking;
var url = '/ajax/click_trackin';
console.log("clicks["+sequence+"] "+$.isArray(tracking));
$.each(tracking, function(i,v){
console.log(i + v.innerText + " - " + v.sequence);
});
send_it = window.setInterval(function(){
$.ajax({
type: 'POST',
url: url,
data: {
clicks:tracking
},
success: function(response)
{
if(response.result.length<1){
console.log(response+ ': no response');
}else{
console.log(response);
tracking = mc.mc_data.click_tracks = [];
}
mc.mc_data.click_tracks = [];
clearInterval(send_it);
sendIt();
},
error: function(a, b, c){
console.log(a+" - " + b+" - "+ c);
clearInterval(send_it);
}
});
}, 5000);
}
//
function logClicks(e){
var temp_click = {
'business_id':window.mc.businessid,
'userid':window.mc.userid,
'timestamp':e.timeStamp,
'leg':window.mc.currentLeg,
'workflow': 'dummy data',
'sequence': sequence,
'type':e.type,
'target':e.target,
'parent': e.target.parentElement,
'id':e.target.id,
'class':e.className,
'innerText': $(e.target).text()
}
mc.mc_data.click_tracking.push(temp_click);
}

For data, you are meant to pass an object which will later be converted into a query string. You are passing the variable tracking, which contains stuff like e.target.parentElement, which is a DOM Node, containing really a lot of further properties (like other DOM Nodes!). The error can originate from either having problems converting a DOM Node into a query string, or creating a way too long query string. It would not make much sense to send a DOM Node to the server anyways.
Only send what is necessary and can be reasonably converted to a query string.