Thursday, May 10, 2012

RESTful WCF Services with jQuery Mobile (part 2)

In order to get up and running as quickly as possible with jQueryMobile, we're going to copy the Single Page template. Note: In order to simplify this example, I'm adding the single page template HTML directly to the WCF project. I would normally use a multi-page template and separate the UI from the services in a production project and I suggest you do the same.
With that said, create a new html document in your project's root named index.html. Navigate to the Single Page Template, view the source, copy it, and paste it over the contents of the index.html document. Congratulations, you've just integrated jQueryMobile with your project. Now you just need to request and receive data from your service.
The template is broken into a header, content, and a footer section. All of the scripts are loaded from a remote server so you don't need to download anything into your project at this time. Start by removing the paragraph elements within the content section. Add a unordered list element with a data-role of listview. jQueryMobile will handle the styling of this list to make it look like your standard iOS tableview component. We're also going to add a hidden listitem element with an id of categoryTemplate. What we end up with looks like the following. Note that there's also a reference to a category.js file. Create a blank file with that name for now. Finally, we add the javascript to call our WCF service. The function below uses the $(document).ready() function to wait for the content (including jQueryMobile) to load. once it does, the ajax function is called. It shows a page loading message with an animated image when the request starts and hides it when the request has completed. We're specifying that we're sending and receiving json data using a POST method just as defined in the WCF method attributes. Finally, we use the data returned by the service. Recall the structure from the previous post, the object name is GetProductCategoriesResult, so we iterate over the contents of that object, creating a clone of the template node and replacing its text. Finally, we call the listview(refresh) to ensure that jQueryMobile styles the content appropriately.

9 comments:

  1. Hi Dan,

    This is really interesting stuff, and exactly what I needed to read about.

    Can I ask whether you will be blogging any more - particularly how it might be possible to secure your RESTful WCF service, for example using basic UserName token authentication?

    Thanks, in anticpation.

    Chris

    ReplyDelete
  2. The topic of authentication does merit its own post. I have one client that uses SiteMinder authentication for its apps and another that uses ASP.Net Membership. The basic pattern is to request a protected resource in a child browser. This triggers the authentication sequence. Once the user logs in and you get a location changed event (indicating the user reached the protected resource), you can close the child browser and start making AJAX requests. PhoneGap and similar tools will share the auth cookie. With authentication taken care of, authorization is performed on the server side by looking at the SiteMinder or Membership user.

    ReplyDelete
  3. Hi Dan,

    Really i should thank you for sharing restful wcf services with jquery mobile demo.

    The demo works perfectly when i place HTML page in the same application. As you specified, when i tried to separate the UI (HTML Page) from the services application, i am not getting the output. It giving the error message 'Something awful happened'.

    Could you please provide me the steps for how to sort my issue?

    Thanks in advance Dan!!!
    Elango - elango7613@gmail.com

    ReplyDelete
    Replies
    1. Also look at the network tab in Chrome to see what the request / response look like. Make sure that it looks like what you expect.

      Delete
  4. Take a look at the console (F12 on Chrome/Windows). Take a look at the error message. Errors in the 400 range usually mean that you didn't pass the arguments or address the service correctly. Errors in the 500 range usually indicate a configuration problem on the server.

    ReplyDelete
  5. i got an 405 error in the HMTL response i got "Service - method not allowed"

    ReplyDelete
    Replies
    1. i got it finally right! add in the web config:

      --behavior --
      --webHttp defaultOutgoingResponseFormat="Json" helpEnabled="true"--
      --behavior--

      Create global.asax file for cross domain ajax configuration.
      and Add the following in your Application_BeginRequest


      protected void Application_BeginRequest(object sender, EventArgs e)
      {
      HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
      if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
      {
      HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
      HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");

      //For GET
      HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
      //For POST
      HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, x-requested-with");

      HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
      HttpContext.Current.Response.End();
      }

      }

      Delete
  6. Make sure that you are using the right method (e.g. POST instead of GET. use F12 in Chrome or IE to open the developer console and check out the network tab.

    ReplyDelete