title: Xamarin.Forms Connecting to DB using Web Service
body: <p>Good Day Everyone. I'm creating a Xamarin.Forms Portable Application in my Visual Studio 2015. I want my Mobile Application to connect to the SQL Database I have in my VS2015. </p>
  
  <p>So I created two projects in my Solution. One is for my Mobile Application, using Xamarin Platform, and the other project is for handling the Web Services and the Database. With this, I used ASP.NET <strong>WEB API</strong>.</p>
  
  <p>I want any source of help whether I'm on the right track in doing this thing.</p>
  
  <p>Let me show you the codes I have. This should display the list of all Customer/Client.</p>
  
  <p><strong>1.) XamarinForms (Portable)</strong></p>
  
  <p>ClientList.xaml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
  &lt;ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           x:Class="XamarinFormsDemo.Views.ClientListPage"
           xmlns:ViewModels="clr-namespace:XamarinFormsDemo.ViewModels;assembly=XamarinFormsDemo"
           xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
           BackgroundImage="bg3.jpg"
           Title="Client List"&gt;
  
  
    &lt;ContentPage.BindingContext&gt;
      &lt;ViewModels:CustomerVM/&gt;
    &lt;/ContentPage.BindingContext&gt;
  
  
  &lt;SearchBar Placeholder="Search" Text="{Binding Keyword}" SearchCommand="{Binding SearchCommand}" x:Name="txtSearch" /&gt;
  
  &lt;ListView ItemsSource="{Binding PlotModel, Mode=TwoWay}"
            HasUnevenRows="True"
            IsPullToRefreshEnabled="True"
            x:Name="listView"&gt;
  
  
    &lt;ListView.ItemTemplate&gt;
      &lt;DataTemplate&gt;
        &lt;ViewCell&gt;
          &lt;Grid Padding="10" RowSpacing="10" ColumnSpacing="5"&gt;
            &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="Auto"/&gt;
              &lt;RowDefinition Height="*"/&gt;
            &lt;/Grid.RowDefinitions&gt;
            &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="Auto"/&gt;
              &lt;ColumnDefinition Width="*"/&gt;
            &lt;/Grid.ColumnDefinitions&gt;
  
            &lt;controls:CircleImage Source="icon.png"
                   HeightRequest="66"
                   HorizontalOptions="CenterAndExpand"
                   Aspect="AspectFill"
                   WidthRequest="66"
                   Grid.RowSpan="2"
                 /&gt;
  
  
            &lt;Label Grid.Column="1"
                   Text="{Binding CUSTOMER_NAME}"
                   TextColor="#24e97d"
                   FontSize="24"/&gt;
  
  
  
            &lt;Label Grid.Column="1"
                    Grid.Row="1"
                     Text="{Binding CUSTOMER_CODE}"
                     TextColor="White"
                     FontSize="18"
                     Opacity="0.6"/&gt;
  
  
            &lt;Label Grid.Column="1"
                Grid.Row="2"
                Text="{Binding CUSTOMER_CONTACT}"
                 TextColor="White"
                 FontSize="18"
                 Opacity="0.6"/&gt;
  
  
  
          &lt;/Grid&gt;
        &lt;/ViewCell&gt;
      &lt;/DataTemplate&gt;
    &lt;/ListView.ItemTemplate&gt;
  
  &lt;/ListView&gt;
  
  
  &lt;StackLayout Orientation="Vertical"
           Padding="30,10,30,10"
           HeightRequest="20"
           BackgroundColor="#24e97d"
           VerticalOptions="Center"
           Opacity="0.5"&gt;
    &lt;Label Text="© Copyright 2016   SMESOFT.COM.PH   All Rights Reserved "
           HorizontalTextAlignment="Center"
           VerticalOptions="Center"
           HorizontalOptions="Center" /&gt;
      &lt;/StackLayout&gt;
  
  
  
  
  &lt;/ContentPage&gt;
  </code></pre>
  
  <p>Customer.cs</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Text;
  using System.Threading.Tasks;
  
  namespace XamarinFormsDemo.Models
  {
      public class Customer
      { 
  
  public int Id { get; set; }
  public string CUSTOMER_CODE { get; set; }
  public string CUSTOMER_NAME { get; set; }
  public string CUSTOMER_EMAIL_ADDRESS { get; set; }
  public string CUSTOMER_MOBILE_NUMBER { get; set; }
  public string CUSTOMER_CONTACT { get; set; }
  public string CUSTOMER_LANDLINE { get; set; }
  public string CUSTOMER_FAX_NUMBER { get; set; }
  public string ADDRESS { get; set; }
  public int LOCATION_TYPE_ID { get; set; }
  public int INDUSTRY_TYPE_ID { get; set; }
  public int CUSTOMER_TYPE_ID { get; set; }
  public int IS_DELETED { get; set; }
  public DateTime DATE_CREATED { get; set; }
  }
  }
  </code></pre>
  
  <p>CustomerVM.cs</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Collections.ObjectModel;
  using System.ComponentModel;
  using System.Diagnostics;
  using System.Linq;
  using System.Runtime.CompilerServices;
  using System.Text;
  using System.Threading.Tasks;
  using System.Windows.Input;
  using Xamarin.Forms;
  using XamarinFormsDemo.Models;
  using XamarinFormsDemo.Services;
  using XamarinFormsDemo.Views;
  
  namespace XamarinFormsDemo.ViewModels
  {
      public class CustomerVM : INotifyPropertyChanged
      {
  
  
      private List&lt;Customer&gt; _customerList; // keep all customers
      private List&lt;Customer&gt; _searchedCustomerList; // keep a copy for searching
      private Customer _selectedCustomer = new Customer();
  
      private string _keyword = "";
      public string Keyword
      {
          get
          {
              return _keyword;
          }
          set
          {
              this._keyword = value;
  
              // while keyword changed we filter Employees
              //Filter();
          }
      }
  
  
  
      private void Filter()
      {
          if (string.IsNullOrWhiteSpace(_keyword))
          {
              CustomerList = _searchedCustomerList;
  
          }
          else
          {
              // var lowerKeyword = _keyword.ToLower();
              CustomerList = _searchedCustomerList.Where(r =&gt; r.CUSTOMER_NAME.ToLower().Contains(_keyword.ToLower())).ToList();
              //  EmployeesList = _searchedEmployeesList.Where(r =&gt; r.EMPLOYEE_NAME.Contains(_keyword)).ToList();
  
  
          }
      }
  
  
  
  
      public List&lt;Customer&gt; CustomerList
      {
          get
          {
              return _customerList;
          }
          set
          {
              _customerList = value;
              OnPropertyChanged();
          }
      }
  
  
      public ICommand SearchCommand
      {
          get
          {
              return new Command((sender) =&gt;
              {
                  //var searchBar = (SearchBar)sender;
                  //this.Keyword = searchBar.Text;
                  Filter();
              });
          }
      }
  
  
  
      public CustomerVM()
      {
          InitializeDataAsync();
  
      }
  
      private async Task InitializeDataAsync()
      {
          var customerServices = new CustomerServices();
          _searchedCustomerList = await customerServices.GetCustomerAsync();
          CustomerList = await customerServices.GetCustomerAsync();
  
      }
  
  
      public event PropertyChangedEventHandler PropertyChanged;
  
      protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
      {
          var handler = PropertyChanged;
          if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
          }
  
      }
  }
  </code></pre>
  
  <p>CustomerServices.cs</p>
  
  <pre><code>using Plugin.RestClient;
  using System;
  using System.Collections.Generic;
  using System.Collections.ObjectModel;
  using System.Linq;
  using System.Text;
  using System.Threading.Tasks;
  using XamarinFormsDemo.Models;
  
  namespace XamarinFormsDemo.Services
  {
      public class CustomerServices
  {
      public async Task&lt;List&lt;Customer&gt;&gt; GetCustomerAsync()
      {
          RestClient_Customer&lt;Customer&gt; restClient = new RestClient_Customer&lt;Customer&gt;();
  
          var customerList = await restClient.GetCustomerAsync(); //yung getasync ay pantawag as restclient
  
          return customerList;
      }
  
      }
  }
  </code></pre>
  
  <p>RestClient.cs</p>
  
  <pre><code>public class RestClient_Customer &lt;T&gt;
  {
  
  
      private const string WebServiceUrl = "http://localhost:50857/api/Customer/";
  
      public async Task&lt;List&lt;T&gt;&gt; GetCustomerAsync()
      {
          var httpClient = new HttpClient();
  
          var json = await httpClient.GetStringAsync(WebServiceUrl);
  
          var taskModels = JsonConvert.DeserializeObject&lt;List&lt;T&gt;&gt;(json);
  
          return taskModels;
      }
   }
  </code></pre>
  
  <p>.</p>
  
  <p><strong>2.) WebFormsDemo</strong></p>
  
  <p>CustomerViewModel.cs</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  
  namespace WebFormsDemo.ViewModel
  {
      public class CustomerViewModel
      {
  
      public int Id { get; set; }
      public string CUSTOMER_CODE { get; set; }
      public string CUSTOMER_NAME { get; set; }
      public string CUSTOMER_EMAIL_ADDRESS { get; set; }
      public string CUSTOMER_MOBILE_NUMBER { get; set; }
      public string CUSTOMER_CONTACT { get; set; }
      public string CUSTOMER_LANDLINE { get; set; }
      public string CUSTOMER_FAX_NUMBER { get; set; }
      public string ADDRESS { get; set; }
      public int LOCATION_TYPE_ID { get; set; }
      public int INDUSTRY_TYPE_ID { get; set; }
      public int CUSTOMER_TYPE_ID { get; set; }
      public int IS_DELETED { get; set; }
      public DateTime DATE_CREATED { get; set; }
      }
  }
  </code></pre>
  
  <p>CustomerController.cs</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Data;
  using System.Data.Entity;
  using System.Data.Entity.Infrastructure;
  using System.Linq;
  using System.Net;
  using System.Net.Http;
  using System.Web.Http;
  using System.Web.Http.Description;
  using WebFormsDemo;
  using WebFormsDemo.ViewModel;
  
  namespace WebFormsDemo.Controllers
  {
      public class CustomerController : ApiController
      {
      private EBMSEntities db = new EBMSEntities();
  
      // GET: api/Customer
      public IQueryable&lt;CustomerViewModel&gt; GetCustomerViewModels()
      {
          var displaycustomerInfo = from cust in db.CUSTOMERs
                                    select new CustomerViewModel
                                    {
                                        Id = cust.CUSTOMER_ID,
                                        CUSTOMER_CODE = cust.CUSTOMER_CODE,
                                        CUSTOMER_NAME = cust.CUSTOMER_NAME,
                                        CUSTOMER_MOBILE_NUMBER = cust.CUSTOMER_MOBILE_NUMBER,
                                        CUSTOMER_EMAIL_ADDRESS = cust.CUSTOMER_EMAIL_ADDRESS,
                                        CUSTOMER_CONTACT = cust.CUSTOMER_EMAIL_ADDRESS + "," + " " + cust.CUSTOMER_MOBILE_NUMBER
                                    };
  
  
  
  
          return displaycustomerInfo;
      }        
      }
  }
  </code></pre>
  
  <p>.</p>
  
  <p>As you can see, my RestClient only access the content of my CustomerController.cs in my WebFormsDemo using the WebService URL. </p>
  
  <p>Having said all of this, I still wasn't able to connect nor display the two projects. Am I doing the right thing? Please help me. Thanks a lot.</p>