In this article we will learn how to achieve CRUD (Create, Read, Update, and Delete) operations in UWA (Universal Windows App) using Web API.

First of all create a new Web API.

Create Web API


Image 1.

Now select Web API template and click OK.


Image 2.

Without wasting no more time I am attaching a screenshot of my Web API Data.


Image 3.

Getting Started UWA

Here are the steps to get started with Windows Universal App:


Image 4.

First of all start App.xaml.cs and declare the members and initialize the singleton application object.

  1. // Declare the members
  3. public static Uri BaseUri = new Uri("http://localhost:40752/api/books");
  5. public static Frame RootFrame { get; set; }
  7. public static Book Books { get; set; }
  9. public App()
  11. {
  13. this.InitializeComponent();
  15. this.Suspending += OnSuspending;
  17. using (var client = new HttpClient())
  19. {
  21. var response = "";
  23. client.MaxResponseContentBufferSize = 266000;
  25. client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
  27. Task task = Task.Run(async () =>
  29. {
  31. response = await client.GetStringAsync(App.BaseUri);
  33. });
  35. task.Wait(); // Wait
  37. App.Books = JsonConvert.DeserializeObject<List<Book>>(response)[0];
  39. }
  41. }

Now change RootFrame which is initialized as Frame property in OnLaunched application event.

  1. protected override void OnLaunched(LaunchActivatedEventArgs e)
  3. {
  5. #if DEBUG
  7. if (System.Diagnostics.Debugger.IsAttached)
  9. {
  11. this.DebugSettings.EnableFrameRateCounter = true;
  13. }
  15. #endif
  17. RootFrame = Window.Current.Content as Frame;
  19. // Do not repeat app initialization when the Window already has content,
  21. // just ensure that the window is active
  23. if (RootFrame == null)
  25. {
  27. // Create a Frame to act as the navigation context and navigate to the first page
  29. RootFrame = new Frame();
  31. RootFrame.NavigationFailed += OnNavigationFailed;
  33. if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
  35. {
  37. //TODO: Load state from previously suspended application
  39. }
  41. // Place the frame in the current Window
  43. Window.Current.Content = RootFrame;
  45. }
  47. if (RootFrame.Content == null)
  49. {
  51. // When the navigation stack isn't restored navigate to the first page,
  53. // configuring the new page by passing required information as a navigation
  55. // parameter
  57. RootFrame.Navigate(typeof(MyBooks), e.Arguments);
  59. }
  61. // Ensure the current window is active
  63. Window.Current.Activate();
  65. }
Now let’s add some buttons on a page for CRUD operations and navigate to them on specific pages.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid Margin="10">

<Grid.RowDefinitions>

<RowDefinition Height="110"/>

<RowDefinition />

</Grid.RowDefinitions>

<StackPanel Grid.Row="0">

<TextBlock FontSize="30" HorizontalAlignment="Center" FontWeight="Bold">Universal Windows App Using Web API</TextBlock>

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" FontStyle="Italic">This application would guide you through different stages of performing CRUDs operations in Universal Windows APP using WebAPI.</TextBlock>

</StackPanel>

<StackPanel Grid.Row="1" Margin="10, 0, 10, 0">

<Button Margin="0, 10, 0, 0" Click="Button_Click">Create New Book</Button>

<Button Margin="0, 10, 0, 0" Click="Button_Click">My Books</Button>

<Button Margin="0, 10, 0, 0" Click="Button_Click">Update Book</Button>

<Button Margin="0, 10, 0, 0" Click="Button_Click">Delete a Book</Button>

</StackPanel>

</Grid>

</Grid>

  1. private void Button_Click(object sender, RoutedEventArgs e)
  3. {
  5. switch ((sender as Button).Content.ToString())
  7. {
  9. case "Create":
  11. App.RootFrame.Navigate(typeof(CreateOrUpdate), true);
  13. break;
  15. case "My Books":
  17. App.RootFrame.Navigate(typeof(ShowBooks));
  19. break;
  21. case "Update Book":
  23. App.RootFrame.Navigate(typeof(CreateOrUpdate), false);
  25. break;
  27. case "Delete":
  29. App.RootFrame.Navigate(typeof(DeleteBook));
  31. break;
  33. default:
  35. break;
  37. }
  39. }
Now let’s show books list on ShowBooks page.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >

<Grid Name="viewList">

<Grid.RowDefinitions>

<RowDefinition Height="100"/>

<RowDefinition />

</Grid.RowDefinitions>

<StackPanel Grid.Row="0">

<TextBlock FontSize="25" FontWeight="Bold" HorizontalAlignment="Center">Books</TextBlock>

<TextBlock HorizontalAlignment="Center">On this page you will see a list of books.</TextBlock>

<Button Margin="10, 0, 0, 0" Click="Button_Click">Go Back</Button>

</StackPanel>

<StackPanel Grid.Row="1">

<ListView Name="listView" SelectionChanged="listView_SelectionChanged" >

<ListView.ItemTemplate>

<DataTemplate>

<Grid Margin="5" Background="AliceBlue" Width="900" >

<Grid.RowDefinitions>

<RowDefinition></RowDefinition>

<RowDefinition></RowDefinition>

<RowDefinition></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="300"></ColumnDefinition>

<ColumnDefinition Width="200"></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<TextBlock Text="{Binding Title}" Grid.Row="0" Grid.Column="0" Style="{StaticResource BaseTextBlockStyle}"></TextBlock>

<TextBlock Text="{Binding PublishDate}" Grid.Row="0" Grid.Column="1" Style="{StaticResource CaptionTextBlockStyle}"></TextBlock>

<TextBlock Text="{Binding Author}" Grid.Row="0" Grid.Column="2" Style="{StaticResource CaptionTextBlockStyle}"></TextBlock>

<TextBlock Text="{Binding Description}" Grid.Row="1" Grid.ColumnSpan="2"></TextBlock>

<TextBlock Text="{Binding Price}" Grid.Row="2" Grid.Column="0"></TextBlock>

<TextBlock Text="{Binding Genre}" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="1"></TextBlock>

</Grid>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</StackPanel>

</Grid>

<Grid Name="viewSingle" Visibility="Collapsed">

<StackPanel Margin="10">

<TextBlock Name="Title" Style="{StaticResource BaseTextBlockStyle}"></TextBlock>

<TextBlock Name="Author" FontStyle="Italic"></TextBlock>

<TextBlock Name="Genre" FontStyle="Italic"></TextBlock>

<TextBlock Name="Price" FontStyle="Italic"></TextBlock>

<TextBlock Name="PublishDate" FontStyle="Italic"></TextBlock>

<TextBlock Name="Descrition" FontStyle="Italic"></TextBlock>

<Button Click="Button_Click">View Books</Button>

</StackPanel>

</Grid>

</Grid>

  1. protected override void OnNavigatedTo(NavigationEventArgs e)
  3. {
  5. using (var client = new HttpClient())
  7. {
  9. var response = "";
  11. Task task = Task.Run(async () =>
  13. {
  15. response = await client.GetStringAsync(App.BaseUri);
  17. });
  19. task.Wait(); // Wait
  21. listView.ItemsSource = JsonConvert.DeserializeObject<List<Book>>(response);
  23. App.Books = JsonConvert.DeserializeObject<List<Book>>(response)[0];
  25. }
  27. }
  29. private void listView_SelectionChanged(object sender, SelectionChangedEventArgs e)
  31. {
  33. var item = ((sender as ListView).SelectedItem as Book);
  35. App.Books = item;
  37. Title.Text = item.Title;
  39. Author.Text = item.Author;
  41. Genre.Text = item.Genre;
  43. Price.Text = item.Price.ToString();
  45. PublishDate.Text = item.PublishDate.ToString();
  47. Descrition.Text = item.Description;
  49. // Change the UI
  51. viewList.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
  53. viewSingle.Visibility = Windows.UI.Xaml.Visibility.Visible;
  55. }
  57. private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
  59. {
  61. switch ((sender as Button).Content.ToString())
  63. {
  65. case "Go Back":
  67. App.RootFrame.Navigate(typeof(MyBooks));
  69. break;
  71. case "View Books":
  73. viewList.Visibility = Windows.UI.Xaml.Visibility.Visible;
  75. viewSingle.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
  77. break;
  79. default:
  81. break;
  83. }
  84. }


Image 5.

If you click on a book.


Image 6.

Click on delete button

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<StackPanel Name="panel" Margin="10">

<TextBlock Name="message"></TextBlock>

<Button Click="Button_Click">Yes</Button>

<Button Click="Button_Click" Margin="70, -33, 0, 0">Cancel</Button>

</StackPanel>

</Grid>

  1. protected override void OnNavigatedTo(NavigationEventArgs e)
  3. {
  5. message.Text = string.Format("Are you sure you want to delete {0}?", App.Books.Title);
  7. }
  9. private void Button_Click(object sender, RoutedEventArgs e)
  11. {
  13. switch ((sender as Button).Content.ToString())
  15. {
  17. case "Yes":
  19. // Send a request to delete the book
  21. using (var client = new HttpClient())
  23. {
  25. Task task = Task.Run(async () =>
  27. {
  29. await client.DeleteAsync(App.BaseUri + "/" + App.Books.Id.ToString());
  31. });
  33. task.Wait();
  35. }
  37. App.RootFrame.Navigate(typeof(ShowBooks));
  39. break;
  41. case "Cancel":
  43. App.RootFrame.Navigate(typeof(ShowBooks));
  45. break;
  47. default:
  49. break;
  51. }
  53. }

Image 7.

Create a new record

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid.RowDefinitions>

<RowDefinition Height="80"/>

<RowDefinition Height="220"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<StackPanel Grid.Row="0">

<TextBlock FontSize="25" FontWeight="Bold" HorizontalAlignment="Center">Create a new Book</TextBlock>

<TextBlock FontStyle="Italic" HorizontalAlignment="Center">Update the following form and submit. It would update the current data source in Web API.</TextBlock>

</StackPanel>

<StackPanel Grid.Row="1" Margin="0,0,0,10" Grid.RowSpan="2">

<Grid Height="310" Margin="20, 10, 10, 0">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="100"/>

<ColumnDefinition />

</Grid.ColumnDefinitions>

<StackPanel Grid.Column="0" Margin="0,0,0,60" d:LayoutOverrides="TopPosition, BottomPosition">

<TextBlock Margin="0, 10, 0, 8">

<Run Text="Id"/>

</TextBlock>

<TextBlock Margin="0, 6, 0, 8">

<Run Text="Title"/>

</TextBlock>

<TextBlock Margin="0, 7, 0, 6">

<Run Text="Author"/>

</TextBlock>

<TextBlock Margin="0, 10, 0, 0">

<Run Text="Genre"/>

</TextBlock>

<TextBlock Margin="0, 10, 0, 0">

<Run Text="Price"/>

</TextBlock>

<TextBlock Margin="0, 20, 0, 0">

<Run Text="Publish Date"/>

</TextBlock>

<TextBlock Margin="0, 20, 0, 0">

<Run Text="Description"/>

</TextBlock>

</StackPanel>

<StackPanel Grid.Column="1" Margin="0,0,0,60" d:LayoutOverrides="TopPosition, BottomPosition">

<TextBox x:Name="Id" Margin="0, 2, 0, 2"/>

<TextBox x:Name="Title" Margin="0, 2, 0, 2"/>

<TextBox x:Name="Author" Margin="0, 2, 0, 2"/>

<TextBox x:Name="Genre" Margin="0, 2, 0, 2"/>

<TextBox x:Name="Price" Margin="0, 2, 0, 2"/>

<TextBox x:Name="PublishDate" Margin="0, 2, 0, 2"/>

<TextBox x:Name="Description" Margin="0, 2, 0, 2"/>

</StackPanel>

<Button x:Name="actionButton" Grid.Column="1" Margin="0,0,0,4" Click="Button_Click" VerticalAlignment="Bottom" Content="Create"/>

</Grid>

<Button Margin="20, 0, 0, 0" Click="Button_Click">Cancel</Button>

</StackPanel>

</Grid>

  1. private void Button_Click(object sender, RoutedEventArgs e)
  3. {
  5. if ((sender as Button).Content.ToString() == "Cancel")
  7. {
  9. // Go to default page
  11. App.RootFrame.Navigate(typeof(ShowBooks));
  13. return; // and cancel the event.
  15. }
  17. // Otherwise
  19. var newbook = new Book
  21. {
  23. Id = Id.Text,
  25. Title = Title.Text,
  27. Author = Author.Text,
  29. Genre = Genre.Text,
  31. Price = decimal.Parse(Price.Text.ToString()),
  33. PublishDate = DateTime.Parse(PublishDate.Text.ToString()),
  35. Description = Description.Text
  37. };
  39. using (var client = new HttpClient())
  41. {
  43. var content = JsonConvert.SerializeObject(newbook);
  45. // Send a POST
  47. Task task = Task.Run(async () =>
  49. {
  51. var data = new HttpFormUrlEncodedContent(
  53. new Dictionary<string, string>
  55. {
  57. ["value"] = content
  59. }
  61. );
  63. await client.PostAsync(App.BaseUri, data);
  65. });
  67. task.Wait();
  69. }
  71. App.RootFrame.Navigate(typeof(ShowBooks));
  73. }


Image 8.

Update a record

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid.RowDefinitions>

<RowDefinition Height="80"/>

<RowDefinition Height="220"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<StackPanel Grid.Row="0">

<TextBlock FontSize="25" FontWeight="Bold" HorizontalAlignment="Center">Create a new Book</TextBlock>

<TextBlock FontStyle="Italic" HorizontalAlignment="Center">Update the following form and submit. It would update the current data source in Web API.</TextBlock>

</StackPanel>

<StackPanel Grid.Row="1" Margin="0,0,0,10" Grid.RowSpan="2">

<Grid Height="310" Margin="20, 10, 10, 0">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="100"/>

<ColumnDefinition />

</Grid.ColumnDefinitions>

<StackPanel Grid.Column="0" Margin="0,0,0,60" d:LayoutOverrides="TopPosition, BottomPosition">

<TextBlock Margin="0, 10, 0, 8">

<Run Text="Id"/>

</TextBlock>

<TextBlock Margin="0, 6, 0, 8">

<Run Text="Title"/>

</TextBlock>

<TextBlock Margin="0, 7, 0, 6">

<Run Text="Author"/>

</TextBlock>

<TextBlock Margin="0, 10, 0, 0">

<Run Text="Genre"/>

</TextBlock>

<TextBlock Margin="0, 10, 0, 0">

<Run Text="Price"/>

</TextBlock>

<TextBlock Margin="0, 20, 0, 0">

<Run Text="Publish Date"/>

</TextBlock>

<TextBlock Margin="0, 20, 0, 0">

<Run Text="Description"/>

</TextBlock>

</StackPanel>

<StackPanel Grid.Column="1" Margin="0,0,0,60" d:LayoutOverrides="TopPosition, BottomPosition">

<TextBox x:Name="Id" Margin="0, 2, 0, 2"/>

<TextBox x:Name="Title" Margin="0, 2, 0, 2"/>

<TextBox x:Name="Author" Margin="0, 2, 0, 2"/>

<TextBox x:Name="Genre" Margin="0, 2, 0, 2"/>

<TextBox x:Name="Price" Margin="0, 2, 0, 2"/>

<TextBox x:Name="PublishDate" Margin="0, 2, 0, 2"/>

<TextBox x:Name="Description" Margin="0, 2, 0, 2"/>

</StackPanel>

<Button x:Name="actionButton" Grid.Column="1" Margin="0,0,0,4" Click="Button_Click" VerticalAlignment="Bottom" Content="Update"/>

</Grid>

<Button Margin="20, 0, 0, 0" Click="Button_Click">Cancel</Button>

</StackPanel>

</Grid>

  1. protected override void OnNavigatedTo(NavigationEventArgs e)
  3. {
  5. if (e.Parameter as bool? == false)
  7. {
  9. var book = App.Books;
  11. Id.Text = book.Id.ToString();
  13. Title.Text = book.Title;
  15. Author.Text = book.Author;
  17. Genre.Text = book.Genre;
  19. Price.Text = book.Price.ToString();
  21. PublishDate.Text = book.PublishDate.ToString();
  23. Description.Text = book.Description;
  25. }
  27. }
  29. private void Button_Click(object sender, RoutedEventArgs e)
  31. {
  33. if ((sender as Button).Content.ToString() == "Cancel")
  35. {
  37. // Go to default page
  39. App.RootFrame.Navigate(typeof(ShowBooks));
  41. return; // and cancel the event.
  43. }
  45. // Otherwise
  47. var existingbook = new Book
  49. {
  51. Id = Id.Text,
  53. Title = Title.Text,
  55. Author = Author.Text,
  57. Genre = Genre.Text,
  59. Price = decimal.Parse(Price.Text.ToString()),
  61. PublishDate = DateTime.Parse(PublishDate.Text.ToString()),
  63. Description = Description.Text
  65. };
  67. using (var client = new HttpClient())
  69. {
  71. var content = JsonConvert.SerializeObject(existingbook);
  73. // Send a PUT
  75. Task task = Task.Run(async () =>
  77. {
  79. var data = new HttpFormUrlEncodedContent(
  81. new Dictionary<string, string>
  83. {
  85. ["value"] = content,
  87. ["id"] = App.Books.Id.ToString()
  89. }
  91. );
  93. await client.PutAsync(App.BaseUri, data);
  95. });
  97. task.Wait();
  99. }
  101. App.RootFrame.Navigate(typeof(ShowBooks));
  103. }

Image 9