September, 2010

...now browsing by month

 

Return JSON data synchronously using jQuery.ajax()

Friday, September 10th, 2010

Normally, I would have used .getJSON(remotePageUrl,data,function(json){

//process JSON data here, for example

//if (json.length>0)

{

alert(json[0].Name);

}

});

 

to get a JSON object returned from the remotePageUrl that processes my request asynchronously and send back a JSON format string like ‘{“Name”:”steve”,”ID”: “1234”}’

But today, I found out that the .getJSON() cannot be set to process data request synchronously. In order to send data to remotePageUrl and return result synchronously (reason for this was because I had a jQuery dialog to be populated with data returned from this call before the dialog was displayed; first I used $.getJSON(), the dialog showed up before the data was processed on server side and returned), I needed to use $.ajax(). Here is the ajax call that actually worked to serve my purpose well:

 

var dataUrl = “<%=root%>/ajax/AsyncEventDataHandler.aspx”;

var userid; var eventTypeId; var userEventDesc=”;

var responseText = $.ajax({

url: dataUrl,

type: ‘GET’,

dataType: ‘JSON’,

//dataType: ‘text’,

contentType: ‘application/json’,

data: “UserCalendarID=” + userCalendarID,

async: false,

success: function (response) {

 

 

var data=$.parseJSON(response);

userid = data.UserID;

eventTypeId = data.EventTypeID;

userEventDesc = data.UserEventDesc;

 

 

},

 

error: function (msg) { alert(“error: ” + msg); }

 

}).responseText;

Here the response inside the function() is the same as $.ajax(….).responseText, and it should have a proper JSON string format or the jQuery.parseJSON() function will fail. The correct format example: ‘{“UserID”:”1211″,”EventTypeID”:”1″,”UserEventDesc”:”meeting”}’. I tried to put single quote around the field name and it did not go through $.parseJSON(). For example, this will not be parsed: “{‘UserID': ‘1211’,’EventTypeID':’1′,’UserEventDesc':’meeting’}”.

For that I attributed to this article at jQuery api site at: http://api.jquery.com/jQuery.parseJSON/. Otherwise, I would probably wasted more time in figuring out why the parsing was failing.

 

Create and consume WCF Service from scratch

Wednesday, September 1st, 2010

Today, I read an article on Codeproject.com by Mike Liu and he gave a very detail illustration on how to create and consume a WCF service from scratch, without using any of those pre-existing WCF templates in VS2010. It was very refreshing and no wonder the article ended up in last month’s new author winner list

These were the steps I went through to create and consume a HelloWorld WCF service following Mike’s instruction:

  1. Selected a Blank solution from VS2010 -> C#/Other Project Types/Visual Studio Solutions
  2. Added a Class library (named HelloWorldService) to the solution (Solution file resided in the root folder and named HelloWorld. When the class lib was created, it automatically created a folder called HelloWorldService)
  3. added a reference to System.ServiceModel.dll to the class lib
  4. Added an Interface class called IHelloWorld.cs to the project and defined ServiceContract and OperationContract, like this:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.ServiceModel;
    namespace Yangsoft.Training.WCF
    { [ServiceContract]
    public interface IHelloWorldService
    {
    [OperationContract]
    String GetMessage(String name); 

    }
    }

     

  5. renamed the class1.cs to HelloWorldService.cs and implemented the interface, like this:class HelloWorldService : IHelloWorldService

    public String GetMessage(String name)
    {

    return “Hello World from ” + name;

    }
    }

  6. Service was created and now it needed to be hosted on a website. To accomplish that, added a new website, named HostDevServer to the HelloWorld solution and made this website use static port: 8080. The website was added as blank website, did not have any string attached and no need to change default web location, File System.
  7. Added a reference to the website project to pick up HelloWorldService class library
  8. Then I opened the web.config; before I added any WCF related stuff, the web.config only had a <system.web> entry. Followed the instruction given in the article, added system.webserver and system.serviceModel sections, now the web.config looks like this:<configuration>
    <system.web>
    <compilation debug=”false” targetFramework=”4.0″ />
    </system.web>
    <system.webServer>
    <modules runAllManagedModulesForAllRequests=”true”></modules>
    </system.webServer>
    <system.serviceModel>
    <behaviors>
    <serviceBehaviors>
    <behavior name=”MyServiceTypeBehaviors”>
    <serviceMetadata httpGetEnabled=”true”/>
    <serviceDebug includeExceptionDetailInFaults=”false”/>
    </behavior>
    </serviceBehaviors>
    </behaviors>
    <services>
    <service name=”Yangsoft.Training.WCF.HelloWorldService” behaviorConfiguration=”MyServiceTypeBehaviors”>
    <endpoint address=”” binding=”wsHttpBinding” contract=”Yangsoft.Training.WCF.IHelloWorldService” ></endpoint>
    <endpoint address=”mex” binding=”mexHttpBinding” contract=”IMetadataExchange” ></endpoint>
    </service>
    </services>
    </system.serviceModel>
    </configuration>
  9. Now added a .svc file the hardcore way: just added a plain text file called HelloWorldService.svc and added the entry and the only entry to the text file:<%@ ServiceHost Service=”Yangsoft.Training.WCF.HelloWorldService” %>This basically created a website to host the HelloWorlService that a client consume.
  10. Added a Console project, named HelloWorldClient to the solution, no app.config, no other class except the default Program.cs class in the project at this point.
  11. The final piece of major work was to run svcutil.exe to generate the service proxy on this client. This was accomplished all in command line mode:
    • backed out to DOS mode, navigated to the folder where HelloWorldClient console app resided
    • run this command from the folder:“c:\program files\microsoft sdks\windows\v6.0a\bin\svcutil.exe” http://localhost:8080/HostDevServer/HelloWorldService.svc?wsdl after this was run, it generated two files in the HelloWorldClient folder: HelloWorldService.svc and output.config (here I did not follow exactly the instruction given by the Author). Before this was run, I had run the HostDevServer without debuging and checked and made sure the service was created correctly.
    • Returned to the VS2010 solution explorer and go to Project/Show All Files and included the two files created by the svcutil.exe tool in the Console project. Renamed the output.config to app.config and made sure added a reference to the project for System.ServiceModel.
    • Open the Program.cs and added these lines in the Main static method:{
      HelloWorldServiceClient client = new HelloWorldServiceClient();
      Console.WriteLine(client.GetMessage(“Steve Yang”));
      }
    • set the start up project to be the console and hit Ctrl+F5 to run the program in non-debug mode, and the output of the program should be a line saying “Hello World from Steve Yang” or whatevever I programmed in the GetMessage(String name) method in the HelloWorldService.cs in the HelloWorldService class library.
    •  

      In real world of VS2010, I did not have to do all these as there are pre-written WCF templates that I could just drag-and-drop into the solution and automatically populate the web.config and app.config. But I agreed with the author, going through these tedious steps had helped me understand WCF service dearly.