I'm positive I'm missing something obvious, but I'm grinding my gears and hoping someone can point out my mistake. Using the HOWTO walkthrough on binding data return from a web service to a dataview template as a starting point, I've written a simple asmx
web service which returns a JSON string = '[{"ContactName", "Jimbo"},{"ContactName","Mary Sue"}]'. JSONLint validates it as correct JSON.
The web service is called when the page loads as expected, but the web page breaks with "Microsoft JScript runtime error: 'ContactName' is undefined" at this point in the dynamic code:
Assuming you've uncommented the [ScriptService] attribute and have the web.config configured for AJAX, the service will handle serialization automatically.
Something like this is all you need:
public class Employee
{
public string ContactName;
}
[WebMethod]
public List<Employee> getEmployees()
{
List<Employee> employees = new List<Employee>();
employees.Add(new Employee() { ContactName = "Jimbo" });
employees.Add(new Employee() { ContactName = "Mary Sue" });
return employees;
}
My object initializer syntax might be off, but you get the idea. If you just return a collection of objects, the serialization to and deserialization from JSON is transparent.
Thank you! Ive been pulling my hair out looking for this answer. I am guilty too of per serializing my content into JSON format and returning it rather than having the service do it.
Mongo
Member
1 Points
4 Posts
Newbie issues with Dataview and Web Services
Jan 21, 2010 12:27 PM|LINK
I'm positive I'm missing something obvious, but I'm grinding my gears and hoping someone can point out my mistake. Using the HOWTO walkthrough on binding data return from a web service to a dataview template as a starting point, I've written a simple asmx web service which returns a JSON string = '[{"ContactName", "Jimbo"},{"ContactName","Mary Sue"}]'. JSONLint validates it as correct JSON.
Here's the client-side code:
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> <div id="empView"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> <ul></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> <li>{{ContactName}}</li></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> </ul> </div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> </div> </div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> <script type="text/javascript"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function () {</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> var dataView = Sys.create.dataView("#empView",</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> {</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> dataProvider: "JRMService.asmx",</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> fetchOperation: "getEmployees",</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> autoFetch: true</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> });</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> }); </div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> </script> </div><script type="text/javascript"> Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function () { var dataView = Sys.create.dataView("#empView", { dataProvider: "JRMService.asmx", fetchOperation: "getEmployees", autoFetch: true }); }); </script> <div id="empView" class="sys-template"> <ul> <li>{{ContactName}}</li> </ul> </div>The web service is called when the page loads as expected, but the web page breaks with "Microsoft JScript runtime error: 'ContactName' is undefined" at this point in the dynamic code:
function anonymous(__containerElement, __data, $dataItem, $index, __referenceNode, __parentContext, __instanceId) { $index = (typeof($index) === 'number' ? $index : __instanceId); var $component, __componentIndex, __e, __f, __topElements = [], __d = 0, __p = [__containerElement], $element = __containerElement, $context = new Sys.UI.TemplateContext(), $id = function(prefix) { return $context.getInstanceId(prefix); }; $context.data = (typeof(__data) === 'undefined' ? null : __data); $context.components = []; $context.nodes = __topElements; $context.dataItem = $dataItem; $context.index = $index; $context.parentContext = __parentContext; $context.containerElement = __containerElement; $context.insertBeforeNode = __referenceNode; $context.template = this; with($dataItem || {}) { __d++; $element=__p[__d]=document.createElement('UL'); $element.__mstcindex = $context._tcindex; __topElements.push($element); __d++; $element=__p[__d]=document.createElement('LI'); __p[__d-1].appendChild($element); __d++; __p[__d-1].appendChild(document.createTextNode(ContactName)); --__d;As I said, this is such a simple example that I'm sure it must work. Any ideas on what I'm (obviously) doing wrong.
Thanks!
Ajax ASP.NET Ajax Library ajax library dataview
gt1329a
All-Star
15377 Points
2501 Posts
ASPInsiders
MVP
Re: Newbie issues with Dataview and Web Services
Jan 22, 2010 07:36 PM|LINK
It sounds like you're manually serializing the JSON and returning a string in your service method. Is that the case?
A guide to combining jQuery and ASP.NET: jQuery for the ASP.NET developer
Mongo
Member
1 Points
4 Posts
Re: Newbie issues with Dataview and Web Services
Jan 22, 2010 07:41 PM|LINK
That's correct. I'm using JSON.Net to do the serialization.
gt1329a
All-Star
15377 Points
2501 Posts
ASPInsiders
MVP
Re: Newbie issues with Dataview and Web Services
Jan 22, 2010 07:51 PM|LINK
Assuming you've uncommented the [ScriptService] attribute and have the web.config configured for AJAX, the service will handle serialization automatically.
Something like this is all you need:
public class Employee { public string ContactName; } [WebMethod] public List<Employee> getEmployees() { List<Employee> employees = new List<Employee>(); employees.Add(new Employee() { ContactName = "Jimbo" }); employees.Add(new Employee() { ContactName = "Mary Sue" }); return employees; }My object initializer syntax might be off, but you get the idea. If you just return a collection of objects, the serialization to and deserialization from JSON is transparent.
A guide to combining jQuery and ASP.NET: jQuery for the ASP.NET developer
Mongo
Member
1 Points
4 Posts
Re: Newbie issues with Dataview and Web Services
Jan 22, 2010 07:59 PM|LINK
I've uncommented the ServiceScript attrib, but I will check on the web.config. Thanks!
Mongo
Member
1 Points
4 Posts
Re: Newbie issues with Dataview and Web Services
Jan 23, 2010 12:54 PM|LINK
Worked like a charm. Thanks!
rberle
Member
2 Points
1 Post
Re: Newbie issues with Dataview and Web Services
Mar 04, 2010 07:00 PM|LINK
Thank you! Ive been pulling my hair out looking for this answer. I am guilty too of per serializing my content into JSON format and returning it rather than having the service do it.