Accessing Data through Web Service in Windows 8 Stores App - VS2012

Introduction 

This article used to display the data from SQL database to a GridView control. The application was created in VS 2012 - Windows Stores App project. We access data through web services / WCF Services.

Using the code

Step 1: Need to create and host the web service. In my web service method pull data from SQL Server database and output of method as XML string format.

Step 2: Create Windows Stores App project from VS2012.

Step 3: Add Service Reference (Web Service/WCF Service) named as CMHLocal.

Step 4: Create class file for fetching data through web service (File name as: Resort.cs) inside of Model Folder from your application. The below code is example of class file. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace HelloWorld.Model
{
   public class GetResortMaster
    {
        private string m_ResortID;
        private string m_ResortFullName;
        private string m_ResortShortName;
        private string m_ResortAddress;
        private string m_Status;
        private string m_CVNotes;
        private string m_GuestCVNotes;
        private string m_VenueCompCVNotes;

        public string ResortID
        {
            get { return m_ResortID; }
            set { m_ResortID = value; }
        }
        public string ResortFullName
        {
            get { return m_ResortFullName; }
            set { m_ResortFullName = value; }
        }
        public string ResortShortName
        {
            get { return m_ResortShortName; }
            set { m_ResortShortName = value; }
        }
        public string ResortAddress
        {
            get { return m_ResortAddress; }
            set { m_ResortAddress = value; }
        }
        public string Status
        {
            get { return m_Status; }
            set { m_Status = value; }
        }
        public string CVNotes
        {
            get { return m_CVNotes; }
            set { m_CVNotes = value; }
        }
        public string GuestCVNotes
        {
            get { return m_GuestCVNotes; }
            set { m_GuestCVNotes = value; }
        }
        public string VenueCompCVNotes
        {
            get { return m_VenueCompCVNotes; }
            set { m_VenueCompCVNotes = value; }
        }
    }
}

Step 5: In your XAML page need to place button and grid view controls. for example I created MainPage.xaml page. Need to paste the below code in design window for creating button and grid view controls. 

<StackPanel Grid.Row="1" Margin="120,30,0,0">
    <Button x:Name="btnDisplay" Click="DisplayData" />
    <GridView x:Name="lvResort" ScrollViewer.VerticalScrollBarVisibility="Visible" 
           ItemsSource="{Binding}" HorizontalAlignment="Left" 
           Width="1070" Height="800">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Red" Background="LightBlue" BorderThickness="2">
                    <StackPanel Orientation="Vertical" Height="200">
                        <TextBlock Text="Resort Details:" Foreground="BlueViolet"/>
                        <TextBlock x:Name="txtResortID" Text="{Binding ResortID}" 
                          Padding="0,0,10,0" Width="50" HorizontalAlignment="Left"/>
                        <TextBlock x:Name="txtResortFName" TextWrapping="Wrap" 
                          Text="{Binding ResortFullName}" Padding="0,0,10,0" 
                          Width="200" HorizontalAlignment="Left"/>
                        <TextBlock TextWrapping="Wrap" Text="{Binding ResortShortName}" 
                          Padding="0,0,10,0" Width="200" HorizontalAlignment="Left"/>
                        <TextBlock TextWrapping="Wrap" Text="{Binding ResortAddress}" 
                          Padding="0,0,10,0" Width="200" HorizontalAlignment="Left"/>
                        <TextBlock TextWrapping="Wrap" Text="{Binding Status}" 
                          Padding="0,0,10,0" Width="50" HorizontalAlignment="Left"/>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</StackPanel>

Step 6: Below code for button click event to display the data in grid view control in MainPage.xaml.cs file. 

From the below code call the web service method and get the output of method into string object. for example my web service method output format as XML. So convert the XML string into class objects using Resort.cs. 

private async void DisplayData(object sender, RoutedEventArgs e)
{
    CMHLocal.CMHServiceClient cmhlocal1 = new CMHLocal.CMHServiceClient();
    string x = await cmhlocal1.GetResortMasterDetailsAsync();
    XDocument xdoc = XDocument.Parse(x);
    IEnumerable<Model.GetResortMaster> getRes = from gr in xdoc.Descendants("GetResortMaster")
                                                select new Model.GetResortMaster
                                                {
                                                    ResortID = (string)gr.Attribute("ResortID"),
                                                    ResortFullName = (string)gr.Attribute("ResortFullName"),
                                                    ResortShortName = (string)gr.Attribute("ResortShortName"),
                                                    ResortAddress = (string)gr.Attribute("ResortAddress"),
                                                    Status=(string)gr.Attribute("Status")
                                                };
    lvResort.ItemsSource = getRes;
}

Step 6: Press 'F5' to run the application and click the button to view the details in the GridView control.