How to create WCF Data Service with $JSONP format

In this post we will create WCF Data Service takes $JSONP in query and returns JSON data as response. For example if we want to fetch data as JSON we can fetch as following,

http://localhost:5157/WcfDataService1.svc/People?$format=json

To start with, Let us create WCF Data Service on School Database. Open Visual Studio 2010 as administrator and create a Web Application. We will be hosting WCF Data Service in web application.

image

Create DataModel

We will create DataModel using ADO.Net Entity framework. To add a DataModel we need to add ADO.Net Entity Model from Data Tab.

image

We want to create DataModel from database, so we will be choosing Generate from database option.

image

After this we need to choose Server name and database name. You can select appropriate authentication mechanism, in my case I am choosing Windows Authentication.

image

In last step, we need to select tables and views we want to keep as part of DataModel. In this case I am selecting all the tables.

image

Create WCF Data Service

To create WCF Data Service add new item selecting WCF Data Service project template from Web Tab

image

Modify WcfDataService.svc.cs as following. We need to provide DataModel name. In this case DataModel is SchoolEntites, we created in previous step.

image

By this step we have created WCF Data Service on SchoolEntities DataModel. Now press F5 to host created WCF Data Service in Cassini server and query in the browser.

image

And we can query a particular set of entity as following,

image

Enabling JSONP and URL Control Format

Read More Detail Here MSDN

If we want to fetch response in JSON format as following

http://localhost:5157/WcfDataService1.svc/People?$format=json

We will be getting following exception,

image

JSONP is used to fetch data from client side even though request need to be cross domain. To support $JSONP, we need to intercept the message before it gets dispatched. At intercept

  • Read the request URL and if $JSONP is there remove it from the querystring. Because reading $JSONP in connection string WCF Data Service runtime will throw exception as shown above.
  • And change Accept header to application/json

To enable this you need to add following file JSONPSupportBehavior.cs . Download sample project from and file from MSDN Code Gallery

image

Extract downloaded ZIP file and select JSONSupportBehavior.cs . Right click on your project and add existing item. Choose file JSONSupportBehavior.cs and add to the project.

image

Then modify WcfDataService.svc.cs as following,

image

We need to put JSONPSupportBehavior service attribute. Now go ahead and press F5 to run and fetch people in JSON format as following ,

http://localhost:5157/WcfDataService1.svc/People?$format=json

image

In this way we can enable $JSONP format on WCF Data Service. I hope this post is useful. Thanks for reading

 

About these ads

Learn jQuery Part 2: How to Select Elements or Nodes in jQuery

Learn jQuery Part1: Introduction to jQuery

Objective

In this part we will see different ways we can select element or node in jQuery. Before you start with this part, I strongly recommend you to read first part of this series.

In jQuery an element or node can be selected in many ways. An element can be selected

  • By ID
  • By Class name
  • By Attribute or value of an attribute
  • If we want to select all elements then that can be selected by using tag name.

Before we go ahead and understand many ways of selecting an element or node, let us first understand what is an Element? In below HTML all the div and P can be called as nodes or elements. Any HTML elements on the HTML page can be termed as node. A node is called as Child Node if it is inside some other node. For example in below HTML snippet P inside div with id hellodiv is child node of this particular div.

image

Let us use above HTML and we need to select all the div. Since we need to select all the div then we can select that using tag name. All the div can be selected as following. In alert we will be getting number of div is on page.

 image

In the same way if we want to select all the anchor tag <a>, all the page tag <p>, all the table tag <table> , we can do that as following

image

We can select more than one tag together by separating them with comma. Like following in one statement we can select all the p, table and a elements on the page.

image

If we want to select a specific element then we can select that using its class name or id. Let us say we have HTML as following

image

We want to select div with id is hellodiv. This can be selected as following

image 

We will be getting following output in alert box.

image

Essentially, an element can be selected with ID by using # symbol. If we want to select elements with class name we can do that with the use of period operator.

image

Now we need to select div using class name. Selecting with class name is exactly the same as selecting by id. However there is performance issue in selecting using class name. Since jQuery iterate through all the DOM objects in memory whereas in case of selecting using ID, jQuery directly fetch the DOM object from memory.

image

And you will be getting expected output in alert as following,

image

There is only difference of hash and period in selecting using id or class name.

image

There may be scenario when you want to select a specific type of tag on basis of class name. For example in below HTML all the elements having same class name ‘hellodiv’.

image

If we want to select element P with class hellodiv then we will be selecting as following,

image

Essentially we need to put class name with period after the tag name.

Now let us take some other selection examples. For example you from following HTML you want to select all the hidden div.

image

We can select all the hidden div as following,

image

If we want to check that whether a div is hidden or not, we can check that as following

image

There may be scenario when we need to select child elements. For example consider following HTML

image

Now if we want to print number of <li> elements. We can do that as following,

image

Let us say you want to print first and last <li> elements, we can do that as following,

image

If we want to get nth element in the list, we can do that as following,

image

If we want to select all the odd and even numbers we can do that as following,

clip_image001

In this way we can select Elements or Nodes in different ways.

Conclusion

In this part we focused on different ways of Element or Node selection in jQuery. I hope this post was useful. Thanks for reading.

 

Kendo UI ListView Control and OData in Windows Phone Application

In this post we will see the way to work with Kendo UI Mobile ListView control and OData. Before you go ahead with this post, I recommend you to read Creating First Windows Phone Application using Kendo UI mobile and PhoneGap or Cordova

Using ListView

We can use a ListView control as following. You need to explicitly set data-role for Ul HTML element as listview

image

Resultant listview would be rendered as following in Windows Phone emulator

image

We can create Grouped ListView as following. We need to specify data-type as group.

image

Resultant listview would be rendered as following in Windows Phone emulator

image

If we want to make ListView items as link we can do that as following .

image

Resultant listview would be rendered as following in Windows Phone emulator

image

Working with OData

We are going to fetch movies details form OData feed of Netflix. OData feed if Netflix is available at

http://odata.netflix.com/Catalog/Titles

Very first we need to create datasource from OData feed. Datasource from OData feed can be created as following

image

While creating datasource , we are specifying URL of OData feed , type and pagesize need to be fetched from Netflix server. After datasource being created we need to set template and datasource of ListView as following.


$("#lst").kendoMobileListView(
{
template: "<strong>${data.Name}<br/><a href= ${data.Url}></a></strong><br/><img src=${data.BoxArt.MediumUrl} alt=a />",
dataSource: data
});
});

In above code snippet we are setting datasource and template. Template can have HTML elements. Any variable data can be fetched as $datasourcename.fieldname

Complete code is as following. We are having two ListViews on the view to display. First ListView is fetching data from OData feed and second ListView is having hard coded data.


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Cordova WP7</title>
<!-- <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>-->
<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kendo.mobile.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {

var data = new kendo.data.DataSource({
type:"odata", // specifies data protocol
pageSize:10,  // limits result set
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
});
$("#lst").kendoMobileListView(
{
template: "<strong>${data.Name}<br/><a href= ${data.Url}></a></strong><br/><img src=${data.BoxArt.MediumUrl} alt=a />",
dataSource: data
});
});
</script>
</head>
<body>
<div id="firstview" data-role="view" data-transition="slide">
<div data-role="header">First View Header</div>
Hello World First View <br />
<ul id="lst" data-role="listview" > </ul>
<ul data-role="listview" data-type="group">
<li> Bloggers
<ul>
<li><a href="#debugmode">debugmode</a></li>
<li><a href="#sqlauthrity">SqlAuthority</a></li>
</ul>
</li>
<li> MVP
<ul>
<li><a href="https://twitter.com">Jacob</a></li>
<li><a href="https://twitter.com">Mahesh</a></li>
</ul>
</li>
</ul>
<div data-role="footer">First View Footer</div>
</div>
<script type="text/javascript">
var app = new new kendo.mobile.Application();
</script>
</body>
</html>

In Windows Phone emulator we should be getting output as following

image

In this way we can work with Kendo UI ListView control. I hope this post is useful. Thanks for reading.