RESTFUL WCF Service


Download code sample

WCF has very good support for Representational State Transfer (REST) which is very popular since its introduction in 2000 by Ray Thomas Fielding in his PhD dissertation. REST builds on the client-server architecture where clients can make requests of services. There are lots of reasons to use REST. I am not going to describe them. Instead, in this article I will show you how to develop RESTFUL WCF service, host it in ASP.NET application (apparently IIS) and consume it.

Let’s Begin

For every WCF application, we need to have service contract that is an interface exposing. Make sure your project has reference to System.ServiceModel and System.ServiceModel.Web namespace.


[ServiceContract]
public interface IMService
{
 [OperationContract]
 [WebGet(UriTemplate = "Books", BodyStyle = WebMessageBodyStyle.WrappedRequest, ResponseFormat = WebMessageFormat.Json)]
 List GetBooks();

[OperationContract]
[WebInvoke(Method = "GET", UriTemplate = "Book/{id}", BodyStyle = WebMessageBodyStyle.WrappedRequest, ResponseFormat = WebMessageFormat.Json)]
BookModel GetBook(string id);

 [OperationContract]
 [WebInvoke(Method = "PUT", UriTemplate = "AddBook/{bookName}", BodyStyle = WebMessageBodyStyle.WrappedRequest, ResponseFormat = WebMessageFormat.Json)]
 string AddBook(string bookName);

 [OperationContract]
 [WebInvoke(Method = "POST", UriTemplate = "UpdateBook/{id}/{bookName}", BodyStyle =  WebMessageBodyStyle.WrappedRequest, ResponseFormat = WebMessageFormat.Json)]
 bool UpdateBook(string id, string bookName);

 [OperationContract]
 [WebInvoke(Method = "DELETE", UriTemplate = "DeleteBook/{id}", BodyStyle = WebMessageBodyStyle.WrappedRequest,  ResponseFormat = WebMessageFormat.Json)]
 bool DeleteBook(string id);
}

In above code, subtle difference is WebGetAttribute and WebInvokeAttribute. WebGetAttribute is for GET HTTP request while WebInvokeAttribute by default invokes POST HTTP request but it can be specified in Method to support other verbs like GET, PUT and DELETE. Inside both attributes there is UriTemplate which makes it possible to define URI for each resource by using specific template syntax. It is clear curly braces is being used for parameter. You can also specify the message format of the response. Default is xml. If we define the service implementing above interface, we can call http://localhost:port/Books to get the all books in json format. Easy, huh?

Configuration

To make the service RESTful we need to specify certain things on our service configuration. Yes, it is ABC of WCF. We need to define binding as “webHttpBinding” with webHttp behavior. Here is the service configuration, I used for this article.

<system.serviceModel>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
      multipleSiteBindingsEnabled="true" />
    <services>
      <service name="InetPrep.MathService.MService" behaviorConfiguration="">
        <endpoint address="" binding="webHttpBinding" behaviorConfiguration="restfulBehavior" contract="InetPrep.MathService.IMService">
          <identity>
            <dns value="localhost" />
          </identity>
        </endpoint>
        <host>
          <baseAddresses>
            <add baseAddress="http://localhost:8733/MService/" />
          </baseAddresses>
        </host>
      </service>
    </services>
    <behaviors>
      <endpointBehaviors>
        <behavior name="restfulBehavior">
          <webHttp />
        </behavior>
      </endpointBehaviors>
    </behaviors>
  </system.serviceModel>

For this sample, I have hosted my service in ASP.NET application. You need to add reference to the actual service implementation project if they are two different projects. All of the configuration will reside inside web.config file. To make the sample project more realistic, I am doing direct query to the database using Entity framework. Entire database script is in project if you want to import. To host the service in ASP.NET (IIS), we can add .svc file which hosts the service. There is very little code you need to worry about for this file.

<%@ ServiceHost Language="C#" Debug="true" Service="InetPrep.MathService.MService"%>

This file uses the configuration from the web.config file and hosts the service.

Service is Hosted now WHAT?

If you browse to http://localhost:40235/MathServiceHost.svc/Books, you will get json books data. Similarly, if you browse to http://localhost:40235/MathServiceHost.svc/Book/2, you will get information about a book with id 2. Useful, right? Now let’s try to add new book http://localhost:40235/MathServiceHost.svc/AddBook/newbook, you will get ‘Endpoint not found’. Similar message will be displayed, if you try to update and delete book. So, why is that? This is because whenever you type and browse url from your browser, it will be treated as GET request and there is not any matching operation we defined. To perform those operations you need to do that in different ways; 1. You can create HTML form and perform operation. 2. You can programmatically create requests and perform operation. Or 3. You can use Fiddler to create request and perform operation. I have created sample client project which allows you to add book. If you see in code-behind you can see code to create PUT request. You can easily do this using jQuery from client side.

var httpWebRequest = (HttpWebRequest)WebRequest.Create("http://localhost:40235/MathServiceHost.svc/AddBook/" +    txtBookName.Text);
httpWebRequest.ContentType = "text/json";
httpWebRequest.Method = "PUT";
string responseText = "";
using (var streamWriter = new StreamWriter(httpWebRequest.GetRequestStream()))
{
 //streamWriter.Write(txtBookName.Text);//any parameter
}
var httpResponse = (HttpWebResponse)httpWebRequest.GetResponse();
using (var streamReader = new StreamReader(httpResponse.GetResponseStream()))
{
 responseText = streamReader.ReadToEnd();
 lblMessage.Text = responseText;
}

Summary

So this concludes the basic RESTful service. It utilizes the basic building block of WCF to create RESTful service and shows you to host it in ASP.NET application. Please, do not hesitate to post any questions related to this article.

Calling .NET functions from JavaScript


Download full code from here.

Introduction

Javascript/Jquery is the client side language and it runs on the browser. It is fast because it doesn’t depend on the server for the response. Nowadays, jQuery is being used in the web development very much. It is fast and can really creates a cool and attractive web site. Jquery has a functionality to call the web service ($.ajax()). In this method we call the web service which is running on some server and this method gets the response which can be used as the developer wants to do. One important thing in ASP.NET is if you need to call the .NET function and you are not using that function in other pages, then it is not justifiable to create a web service and call the function. ASP.NET provides you a cool mechanism to utilize your server side function from your client side without officially creating the web service.

PageMethods and WebMethod attribute

Every method that you want to call from the client side code must be public and static .NET function and as web service method it must have System.Web.Services.WebMethod attribute. Then in your aspx page you can call your .NET function using PageMethods.MethodName. And you need to have ScriptManager control in your page with EnablePageMethods true.

WebMethodCall.aspx.cs

        [System.Web.Services.WebMethod]
        public static string GetName(string name)
        {
            return "Hello <strong>" + name + "</strong>";
        }

For example we have a GetName method in our code behind. So for this method to enable to call from client code, we need to add WebMethod attribute on it.

And its corresponding aspx page will have following javascript code to call the .NET function and display it in a div.

WebMethodCall.aspx


<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">

</asp:ScriptManager>

<div>

<script language="javascript" type="text/javascript">

function Clicked() {

//PageMethods.set_path('WebMethodCall.aspx');

PageMethods.GetName('Pradip', Success, Failure);

}

function Success(result, userContext, methodName) {

$('#content').html(result);

}

function Failure(error, userContext, methodName) {

$('#content').text(error.get_message());

}

</script>

</div>

<a onclick="Clicked()" href="#">GetName call</a>

<br/>

<br/>

<div id="content" style="background-color: #B0B0B0; width: 500px; height: 500px;">

</div>

The code above is straightforward. In above code we called the .NET function ‘GetName’ using PageMethods.GetName which has three parameters: name parameter, success callback function and failure callback function. On Success we get the result object (in our case string) which is displayed as html in content div.

Even though the code above is very simple, you can call a complex database call and calculation from your client code. You just need to extend your server side function.

Download full code from here.

Issue when using with URL Routing

When you use the URL routing, the method of calling .NET function from javascript that I described above will not work as expected because if you look into the page source you can see the form action to ‘HomePage’ and when you debug javascript you can see service path as ‘HomePage’. So, for this we need to do some correction on this path. We need to call PageMethods.set_path(url) method to set the service path. You can just uncomment the code inside the Clicked() function. Now, you can see our code works for both ASPX page and page using URL routing.

Conclusion

Even web service is used very much while it is required to call .NET functions from client side code (Javascript/JQuery), when the function is used just in one page and it is not justifiable to build web service as it costs performance and separate service, it is good to use this method when you need to call .NET functions from client code.

Dynamic Pages with ASP.NET


Download complete code from here.

Introduction

If you are familiar with the SharePoint technologies you might have known that you can edit the appearance of certain portion of the page. Moreover in publishing page you can add and delete as many parts in the page as you like.

 Fig: Showing Edit enabled Page

Now a day web page is not just a static page which just shows the static information to the user. It would be more flexible to give the user to customize the view they want so that they can move the parts around the page, hide the parts and modify the property of parts. Adding such functionality is expensive and requires lot of works of developer and of course more error prone.

In this article I will give you the general overview of using web part manager and web part zone.

Introducing WebPartManager

WebPartManager control is an ASP.NET server control introduced from .NET 2.0. There is not any visual effect of this control in the page. But wait. This control can add items to and delete items from each zone of the page. This means there is no meaning for a page to contain only WebPartManager. There should be at least one WebPartZone. WebPartManager is page dependent control and it manages on that particular page. However you can add it in you master page if you require.

After adding the WebPartManager control into the webpage, now it is a time to create a Zone in that page. You can any techniques to create several zones in your page. This is directly dependent on your business logic. For this article I am using Table to create zone. I am creating four zones.

Note that you can drag and drop the control from toolbox into your page or you can write a code.


<asp:WebPartManager ID="WebPartManagerDefault" runat="server">

</asp:WebPartManager>

<table style="width: 100%;">

<tr>

<td colspan="4">

&nbsp;

<asp:WebPartZone ID="WebPartZoneTop" runat="server">

<ZoneTemplate>

</ZoneTemplate>

</asp:WebPartZone>

</td>

</tr>

<tr>

<td>

&nbsp;

<asp:WebPartZone ID="WebPartZoneLeft" runat="server">

<ZoneTemplate>

</ZoneTemplate>

</asp:WebPartZone>

</td>

<td style="width: 50%;">

&nbsp;

<asp:WebPartZone ID="WebPartZoneCenter" runat="server">

<ZoneTemplate>

</ZoneTemplate>

</asp:WebPartZone>

</td>

<td>

&nbsp;

<asp:WebPartZone ID="WebPartZoneRight" runat="server">

</asp:WebPartZone>

</td>

<td>

&nbsp;

</td>

</tr>

</table>

Now you have added the WebPartZone in your page. Inside WebPartZone you can add almost anything that can be added in your web form. You can add HTML elements, User controls, and Web parts and so on.

Let’s add two asp controls; image control and calendar control in the page. Now, your code looks like this


<asp:WebPartManager ID="WebPartManagerDefault" runat="server">

</asp:WebPartManager>

<table style="width: 100%;">

<tr>

<td colspan="4">

&nbsp;

<asp:WebPartZone ID="WebPartZoneTop" runat="server">

<ZoneTemplate>

<asp:Image ID="ImageBanner" runat="server" ImageUrl="~/Images/Banner.png" Title="Image Control" />

</ZoneTemplate>

</asp:WebPartZone>

</td>

</tr>

<tr>

<td>

&nbsp;

<asp:WebPartZone ID="WebPartZoneLeft" runat="server">

<ZoneTemplate>

<asp:Calendar ID="CalendarDefault" runat="server" Title="Calendar Control"></asp:Calendar>

</ZoneTemplate>

</asp:WebPartZone>

</td>

<td style="width: 50%;">

&nbsp;

<asp:WebPartZone ID="WebPartZoneCenter" runat="server">

<ZoneTemplate>

</ZoneTemplate>

</asp:WebPartZone>

</td>

<td>

&nbsp;

<asp:WebPartZone ID="WebPartZoneRight" runat="server">

</asp:WebPartZone>

</td>

<td>

&nbsp;

</td>

</tr>

</table>

If you run the project now you will get the output like this

 

                Fig: output 1

You can see the title of each control. They are taking title from the ‘Title’ attribute of control. Even the control doesn’t contain this property by default you can add it so that you can have meaningful title displayed rather than default ‘untitled’. Note that you can customize the control. You can minimize it, restore it or you can close it. If you make some changes for example minimize the asp image control and reopen the page you can see your image control in minimize state. GREAT!!!

Now let try one more thing, let’s close the image control. Now, you can see it is nowhere in the page. Even if you reopen your page there will not be any image control.

Note that the customization information is saved in App_Data folder in ASPNETDB database.

Introducing different mode of the page

Now I will give you the description of different mode of the page.  User can add, move or change the page they are in by changing the page mode. For now let’s add the DropDownList in the page and make certain change in the code behind.


<tr>

<td colspan="4" align="right">

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"

onselectedindexchanged="DropDownList1_SelectedIndexChanged">

</asp:DropDownList>

&nbsp;&nbsp;&nbsp;

</td>

</tr>

Changes in code-behind.


protected void Page_Init(object sender, EventArgs e)

{

foreach (WebPartDisplayMode wpMode in WebPartManagerDefault.SupportedDisplayModes)

{

string modeName = wpMode.Name;

ListItem listItem = new ListItem(modeName, modeName);

DropDownList1.Items.Add(listItem);

}

}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

WebPartDisplayMode displayMode = WebPartManagerDefault.SupportedDisplayModes[DropDownList1.SelectedValue];

WebPartManagerDefault.DisplayMode = displayMode;

}

Open the page. You will see two drop down items. One is browse and one is design. If you change the mode to design mode you can move your web part from one web part zone to another.

But still where is my closed web part?

In this section I will show you to add two additional modes of page. One is catalog mode in which you can see your closed web part and you can add web part to any zone. Another is edit mode in which you can edit the property of your web part including display. If you have created your custom web part you can make the property editable when you are in edit mode. (I will show you how to do this on another article.)

For now let’s add the following piece of design code in your working page.


<asp:CatalogZone ID="CatalogZoneMain" runat="server">

<ZoneTemplate>

<asp:PageCatalogPart ID="PageCatalogPartMain" runat="server" />

<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPartMain" runat="server">

<WebPartsTemplate>

<asp:TextBox ID="TextBox" runat="server" Title="Text Box"></asp:TextBox>

</WebPartsTemplate>

</asp:DeclarativeCatalogPart>

</ZoneTemplate>

</asp:CatalogZone>

<asp:EditorZone ID="EditorZoneMain" runat="server">

<ZoneTemplate>

<asp:AppearanceEditorPart ID="AppearanceEditorPartMain" runat="server" />

<asp:BehaviorEditorPart ID="BehaviorEditorPartMain" runat="server" />

<asp:LayoutEditorPart ID="LayouteEditorPartMain" runat="server" />

<asp:PropertyGridEditorPart ID="PropertyGridEditorPartMain" runat="server" />

</ZoneTemplate>

</asp:EditorZone>

Now you can see two additional page modes in your drop down menu. If you select catalog mode you can see your closed web part. You can add this web part in your page. Moreover, if you click on Declarative Catalog link you will get another the list of web part (in this case only one, textbox control). You can add this web part to any web part zone.

If you select edit mode you can now edit the property of web part like Appearance and Behavior. Generally, normal user shouldn’t see this option. There are more than those properties for editing which is still invisible. To view those properties you need to change your web.config file. Add following configuration in System.web.


<webParts>

<personalization>

<authorization>

<allow users="*" verbs="enterSharedScope" />

</authorization>

</personalization>

</webParts>

And add following piece of code in Page_Load


if (WebPartManagerDefault.Personalization.Scope == PersonalizationScope.User

&& WebPartManagerDefault.Personalization.CanEnterSharedScope)

{

WebPartManagerDefault.Personalization.ToggleScope();

}

When you change the mode to edit and chose edit for any web part or control, you should be able to see something like this.

Fig: Web part in edit mode.

Modifying Zone property and Verbs in Web Part

There are many properties those are used to assure certain behavior of web part zone. For example if you don’t want to change the web part of certain zone, then you can use the AllowLayoutChange property. You can use LayoutOrientation property to make sure you add web part in either horizontal or vertical orientation.

Verbs are property of web part which enable/disable the corresponding feature in the web part. The available verbs are CloseVerb, ConnectVerb, DeleteVerb, EditVerb, ExportVerb, HelpVerb, MinimizeVerb and RestoreVerb. They all have their own meaning. For example if you use following code in your page then you will not able to edit your web part. The corresponding menu will be disabled.

</pre>
<asp:WebPartZone ID="WebPartZoneTop" runat="server">

<EditVerb Enabled="false" />

<ZoneTemplate>

<asp:Image ID="ImageBanner" runat="server" ImageUrl="~/Images/Banner.png" Title="Image Control" />

</ZoneTemplate>

</asp:WebPartZone>
<pre>

Fig: Disabled edit option

Conclusion

There are plenty of other stuffs that are part of web part. I will show you them on another articles step by step. Web part is very vast and powerful section in ASP.NET. Web part helps developers to make dynamic and modular pages. I will show you to create your own custom web part in another article.