Object XMLHttpRequest to JSON - ajax

I am creating an jquery ajax form which calls the method below
public string GetRestaurantInfo(string date, string pageId)
{
Node node = new Node(Convert.ToInt32(pageId));
string day = DateTime.Parse(date).DayOfWeek.ToString();
return JsonConvert.SerializeObject(GetOpeningHours(node, day));
}
private static object GetOpeningHours(Node node, string day)
{
XDocument xmlDoc = XDocument.Parse(node.GetProperty("openingHours").ToString());
var q = from item in xmlDoc.Descendants("scheduleItem")
where item.Element("weekDayLocal").Value == day
select new
{
day = item.Element("weekDayLocal").Value,
startTime = item.Element("firstSet").Element("hourStart").Value,
closingTime = item.Element("firstSet").Element("hourEnd").Value,
hoursOpen = 4
};
return q;
}
I would like the data to be returned in a JSON format, but it is returning the data in the following format
{"d":" [{\"day\":\"Tuesday\",\"startTime\":\"17:00\",\"closingTime\":\"11:00\",\"hoursOpen\":4}]"}
I am not sure how to resolve this? Any ideas?
Thanks in advance for any help

I assume this thread was not answered, and I found this thread when I Google as I faced the same issue too. After a struggle with Firebug, The solution was simple in the end. You just have to parse it twice as in the following code. But I am not sure whether this is the correct solution, or is this an impact in the web service call that I tried to make.
JSON.parse(JSON.parse(result).d)
Anyway just for some one who want to know the web service call,
xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//xhr.responseText; this contains the data
}
}
};
xhr.send(params);
Thanks,
Sabo

Well that is jSon i suppose. Did you try doing below in the callback javascript function.
function callback(rslt,cntxt){
var result = Sys.Serialization.JavaScriptSerializer.deserialize(rslt);
console.dir(result);
}
watch the firebug console and inspect the object that was dumped.

Related

AngularJS and "smart" Caching

I want to implement "smart" caching in my application. I want to always first return data from the cache (if none is available an empty object/array is returned), then always fetch the data from the server and replace the cached response with the updated server response. The objective is to always quickly show something to the user.
I want to do it in an "angular" fashion, i.e - adher to the promise paradigm.
I found a solution that uses the $resource service (http://www.bennadel.com/blog/2432-Applying-A-Cached-Response-To-An-AngularJS-Resource.htm), but $resource pretty much sucks if you don't use only the 4-5 default REST methods that it offers. Its custom method functionality is severly lacking. I'd really like to use the low level $http service, since it gives me better control over my requests, while keeping my controllers oblivious to the whole caching functionlity (i.e - avoid fetching data from the cache first in the controller itself and then querying the service).
Has anyone dealt with this problem and has a better solution?
Thanks :-)
http://jsfiddle.net/G23h7/
I created two services to accomplish what I think you're trying to accomplish. The first provides the core functionality to take in a promise and an object (or array) and updates said object or array when the promise resolves. There's a GUI for you to play around with it.
The second service integrates that into $http. Basically you can do smartHttp.forArray(config) and smartHttp.forObj(config) in lieu of $http(config). If you end up using this and want to use the $http shortcut methods then that should be straightforward to implement. This is untested - so consider it as pseudocode. If you're instantly returning a cached value/dud value it doesn't really make sense to use a promise for the return value of your smartHttp service (unless you were trying to make the service interchangeable with $http). If you'd like it to be a promise for that or whatever reason you can change:
var general = function (obj, methodName) {
// ...
return obj;
};
to the following:
var general = function (obj, methodName) {
// ...
return $q.when(obj);
};
And then ask for the $q service, of course. The real issue here is equality between requests - I assume $http does that nicely; I made a naive key - you may want to change that (as long as you have simple requests/same order for everything I don't think it should matter).
myApp.factory('smartCache', function () {
var service = {};
service.forArray = function (array, promise, clear) {
promise.then(function (promiseResult) {
if (clear) {
array.length = 0;
}
angular.forEach(promiseResult, function (promiseResultElement) {
array.push(promiseResultElement);
});
});
};
service.forObj = function (obj, promise, clear) {
promise.then(function (promiseResult) {
if (clear) {
for (var prop in obj) {
delete obj[prop];
}
}
for (var prop in promiseResult) {
obj[prop] = promiseResult[prop];
}
});
};
return service;
});
myApp.factory('smartHttp', function ($http, smartCache, $cacheFactory) {
var cache = $cacheFactory('smartHttp');
var service = {};
var general = function (config, methodName, initialValue) {
var obj;
var key = JSON.stringify([ config.url, config.method, config.params, config.data ]);
var cachedObj = cache.get(key);
if (cachedObj !== undefined) {
obj = cachedObj;
} else {
obj = initialValue;
}
var promise = $http(config);
var smartCachePromise = promise.then(function (result) {
return result.data;
});
smartCache[methodName](obj, smartCachePromise, true);
return obj;
};
service.forObj = function (config) {
return general(config, 'forObj', {});
}
service.forArray = function (config) {
return general(config, 'forArray', []);
}
return service;
});

Uploading images with redactor to MVC

This might be a bit too specific for here and I may need to contact redactor support but i've seen other questions about redactor here so i figured i'd give it a shot ...
Ok ...
So i'm trying to get get image uploading to work following the example here ...
http://imperavi.com/redactor/docs/images/
My client side code ...
$("textarea").redactor({
focus: true,
imageUpload: '/MyController/UploadImage'
});
My MVC controller action looks like this ...
public JsonResult UploadImage(object image)
{
// Do something with whatever that was i got from redactor
var result = new { filelink = "" };
return Json(result);
}
The problem is ... what did redactor actually give me?
Was it the whole file? a chunk? i can't seem to tell because the object has no type information at all and the raw post information seems way too little to actually be a whole image file.
Has anyone had any experience with this / actually done it before?
I don't really want to setup php on my server for this 1 function.
EDIT:
Ok a bit more digging reveals that if i pull the underlying Request object it has a files property which apparently contains my posted image file.
I think i might be able to figure it out from here.
Where I get a code block in place i'll post it as an answer.
You are receiving a HttpPostedFileBase object. Here is my implementation:
jQuery:
$('#blog-post').redactor(
{
imageUpload: '/blog/images/',
imageGetJson: '/images/locations/blogs/'
});
Then in the controller:
public ActionResult Images(HttpPostedFileBase file)
{
// Verify that the user selected a file
if( file != null && file.ContentLength > 0 )
{
// extract only the fielname
var fileName = Path.GetFileName( file.FileName );
// store the file
var path = Path.Combine( ImageLocation.BlogPicturePath, fileName );
file.SaveAs( path );
}
return Json( new { filelink = ImageLocation.BlogPictureUrl + "/" + file.FileName } );
}
ok um ... i think im there ...
This needs a bit of cleaning up and I don't expect you guys to understand what goes on under the bonnet of my custom DMS code but just assume it takes the stream and returns a FileInfo object and in theory this should work for you too ...
public ActionResult Upload()
{
// this object is specific to my system but all it does is
// stream the file to a path on the server (code not needed for this Q)
var dmsService = _kernel.Get<IDMSFileSystemService>();
List<FileInfo> savedFiles = new List<FileInfo>();
for (int i = 0; i < Request.Files.Count; i++)
{
var file = Request.Files[i];
using (file.InputStream)
{
savedFiles.Add(dmsService.AddFromStream(file.InputStream, file.FileName);
}
}
var result = savedFiles.Select(f => new { filelink = f.Path}).ToArray();
return Json(result);
}
Suprisingly simple right ... :)

Add Linq statement to a Web API Get with a filter, i'm trying to add $select

I trying to apply some linq statements to all my Get Web api commands. I figured I could do this using an ActionFilterAttribute.
I'm basically adding $select support in web api since its currently not supported. I'm not sure where to get the IQueryable results. I believe I need it before sql execution happens but after Get function has returned the IQueryable result. Any help would be great. I'm trying something similiar to this post, but his idea will not work because HttpResponseMessage response = actionExecutedContext.Result; is no longer in RC.
Thanks
Nick
solution
public override void OnActionExecuted(System.Web.Http.Filters.HttpActionExecutedContext actionExecutedContext)
{
HttpRequestMessage request = actionExecutedContext.Request;
HttpResponseMessage response = actionExecutedContext.Response;
IQueryable obj;
if (response != null && response.TryGetContentValue(out obj) && request.RequestUri.ParseQueryString()["$select"] != null)
{
System.Collections.Specialized.NameValueCollection QueryItems = request.RequestUri.ParseQueryString();
string select = QueryItems["$select"];
if (!string.IsNullOrWhiteSpace(select))
{
obj = obj.Select(string.Format("new ({0})", select));
}
//
//this should be generic not hard coded for Json
//
string json = JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.Indented);
actionExecutedContext.Response = actionExecutedContext.Request.CreateResponse();
actionExecutedContext.Response.Content = new StringContent(json);
actionExecutedContext.Response.Content.Headers.Clear();
actionExecutedContext.Response.Content.Headers.Add("Content-Type", "application/json");
actionExecutedContext.Response.StatusCode = System.Net.HttpStatusCode.OK;
}
}
see the original post above. I added the solution to the bottom.

How to perform a get request with RestSharp?

I'm having trouble figuring out how to make a GET request using RestSharp on Windows Phone 7. All of the examples show making a POST request, but I just need GET. How do I do this?
GET is the default method used by RestSharp, so if you don't specify a method, it will use GET:
var client = new RestClient("http://example.com");
var request = new RestRequest("api");
client.ExecuteAsync(request, response => {
// do something with the response
});
This code will make a GET request to http://example.com/api. If you need to add URL parameters you can do this:
var client = new RestClient("http://example.com");
var request = new RestRequest("api");
request.AddParameter("foo", "bar");
Which translates to http://example.com/api?foo=bar
What you're looking for is located here.
The code snippet that covers your scenario is below (request.Method should be set to Method.GET):
public void GetLabelFeed(string label, Action<Model.Feed> success, Action<string> failure)
{
string resource = "reader/api/0/stream/contents/user/-/label/" + label;
var request = GetBaseRequest();
request.Resource = resource;
request.Method = Method.GET;
request.AddParameter("n", 20); //number to return
_client.ExecuteAsync<Model.Feed>(request, (response) =>
{
if (response.ResponseStatus == ResponseStatus.Error)
{
failure(response.ErrorMessage);
}
else
{
success(response.Data);
}
});
}

dojo.xhrPost and Zend Framework action, no POST data, not using a form

I'm trying to send some data via dojo.xhrPost to an Zend Controller Action. I can see the data being sent in Firebug console. However, when inspecting the post data, the array is empty.
I'm not sure if it is possible to send an arbitrary string of data via dojo.xhrPost without using a form. This is probably a very n00b mistake. In any case, I'll post my code here and see what you all think.
In my layout script I have:
<?php
$sizeurl = $this->baseUrl() . '/account/uisize';
?>
function resizeText(multiplier)
{
if (document.body.style.fontSize == "")
{
document.body.style.fontSize = "1.0em";
}
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.1) + "em";
var size = document.body.style.fontSize;
var xhrArgs = {
url: "<?= $sizeurl; ?>",
postData: size,
handleAs: "text"
}
dojo.xhrPost(xhrArgs);
}
Then my action is:
public function uisizeAction()
{
$this->_helper->viewRenderer->setNoRender();
$this->_helper->layout->disableLayout();
print_r($_POST);
$request = $this->getRequest();
if ($request->isXmlHttpRequest())
{
$postdata = $request->getPost();
print_r($postdata);
if ($postdata)
{
$user = new Application_Model_DbTable_User();
$user->updateSize($postdata);
}
}
}
I'm pretty sure that post data from a form is an array with the form elements' names as the keys. When looking at the dojo.xhrPost examples on the dojo campus web site (http://docs.dojocampus.org/dojo/xhrPost second one to be precise), it looks as if I can just send a string of data. How do I access this data from a Zend Controller Action?
I'm using ZF 1.10 and Dojo 1.4.2
Thanks for your help!
PS
I'd try to ask on one of the related questions, but I cannot seem to comment.
After reading about http methods here:
http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html
I figured that I need to encode the data sent in a way that will be converted to an array by PHP. So here is the new bit of javascript:
function resizeText(multiplier)
{
if (document.body.style.fontSize == "")
{
document.body.style.fontSize = "1.0em";
}
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.1) + "em";
var rawdata = "uisize="+document.body.style.fontSize;
var xhrArgs = {
url: "<?= $sizeurl; ?>",
postData: rawdata,
handleAs: "text"
}
//Call the asynchronous xhrPost
dojo.xhrPost(xhrArgs);
}
The difference is I am now specifying a key pair and sending that. When using AJAX that could make forms overkill. So now my UI is resized and the size is stored with the user's profile. So the next page they request will use the size they set. Cool.

Resources