Click here to Skip to main content
Click here to Skip to main content

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

, 24 Oct 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Show data in grid view control of Windows Stores App using web service or WCF

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ramanujam Shankar
Web Developer Mahindra Logisoft Business Solution Limited, Chenn
India India
No Biography provided

Comments and Discussions

 
Questionabout sample code Pinmemberbhalaniabhishek28-Feb-13 21:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141220.1 | Last Updated 24 Oct 2012
Article Copyright 2012 by Ramanujam Shankar
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid