CRUD operations in UWA using Web API

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

Start Visual Studio 2015
Create a new project
Click Visual C# and Web
Click on ASP.NET Web Application
Provide the name and location of project and OK

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:

Start Visual Studio 2015
Create a new project
Click Visual C# and Windows, then select Universal
Click on Blank App (Universal Windows)
Provide the name and location of project
Click OK

Image 4.

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

// Declare the members
public static Uri BaseUri = new Uri("http://localhost:40752/api/books");
public static Frame RootFrame { get; set; }
public static Book Books { get; set; }
public App()
{
this.InitializeComponent();
this.Suspending += OnSuspending;
using (var client = new HttpClient())
{
var response = "";
client.MaxResponseContentBufferSize = 266000;
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
Task task = Task.Run(async () =>
{
response = await client.GetStringAsync(App.BaseUri);
});
task.Wait(); // Wait
App.Books = JsonConvert.DeserializeObject<List<Book>>(response)[0];
}
}

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

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
#if DEBUG
if (System.Diagnostics.Debugger.IsAttached)
{
this.DebugSettings.EnableFrameRateCounter = true;
}
#endif
RootFrame = Window.Current.Content as Frame;
// Do not repeat app initialization when the Window already has content,
// just ensure that the window is active
if (RootFrame == null)
{
// Create a Frame to act as the navigation context and navigate to the first page
RootFrame = new Frame();
RootFrame.NavigationFailed += OnNavigationFailed;
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
//TODO: Load state from previously suspended application
}
// Place the frame in the current Window
Window.Current.Content = RootFrame;
}
if (RootFrame.Content == null)
{
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
RootFrame.Navigate(typeof(MyBooks), e.Arguments);
}
// Ensure the current window is active
Window.Current.Activate();
}

Now let’s add some buttons on a page for CRUD operations and navigate to them on specific pages.

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<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>

<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>

private void Button_Click(object sender, RoutedEventArgs e)
{
switch ((sender as Button).Content.ToString())
{
case "Create":
App.RootFrame.Navigate(typeof(CreateOrUpdate), true);
break;
case "My Books":
App.RootFrame.Navigate(typeof(ShowBooks));
break;
case "Update Book":
App.RootFrame.Navigate(typeof(CreateOrUpdate), false);
break;
case "Delete":
App.RootFrame.Navigate(typeof(DeleteBook));
break;
default:
break;
}
}

Now let’s show books list on ShowBooks page.

<Grid.RowDefinitions>

</Grid.RowDefinitions>

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

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

</StackPanel>

<ListView.ItemTemplate>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</StackPanel>

</Grid>

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

</StackPanel>

</Grid>

protected override void OnNavigatedTo(NavigationEventArgs e)
{
using (var client = new HttpClient())
{
var response = "";
Task task = Task.Run(async () =>
{
response = await client.GetStringAsync(App.BaseUri);
});
task.Wait(); // Wait
listView.ItemsSource = JsonConvert.DeserializeObject<List<Book>>(response);
App.Books = JsonConvert.DeserializeObject<List<Book>>(response)[0];
}
}
private void listView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var item = ((sender as ListView).SelectedItem as Book);
App.Books = item;
Title.Text = item.Title;
Author.Text = item.Author;
Genre.Text = item.Genre;
Price.Text = item.Price.ToString();
PublishDate.Text = item.PublishDate.ToString();
Descrition.Text = item.Description;
// Change the UI
viewList.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
viewSingle.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
switch ((sender as Button).Content.ToString())
{
case "Go Back":
App.RootFrame.Navigate(typeof(MyBooks));
break;
case "View Books":
viewList.Visibility = Windows.UI.Xaml.Visibility.Visible;
viewSingle.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
break;
default:
break;
}
}

Image 5.

If you click on a book.

Image 6.

Click on delete button

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

</StackPanel>

</Grid>

protected override void OnNavigatedTo(NavigationEventArgs e)
{
message.Text = string.Format("Are you sure you want to delete {0}?", App.Books.Title);
}
private void Button_Click(object sender, RoutedEventArgs e)
{
switch ((sender as Button).Content.ToString())
{
case "Yes":
// Send a request to delete the book
using (var client = new HttpClient())
{
Task task = Task.Run(async () =>
{
await client.DeleteAsync(App.BaseUri + "/" + App.Books.Id.ToString());
});
task.Wait();
}
App.RootFrame.Navigate(typeof(ShowBooks));
break;
case "Cancel":
App.RootFrame.Navigate(typeof(ShowBooks));
break;
default:
break;
}
}

Image 7.

Create a new record

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<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>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</TextBlock>

</TextBlock>

</TextBlock>

</TextBlock>

</TextBlock>

</TextBlock>

</TextBlock>

</StackPanel>

</StackPanel>

</Grid>

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

</StackPanel>

</Grid>

private void Button_Click(object sender, RoutedEventArgs e)
{
if ((sender as Button).Content.ToString() == "Cancel")
{
// Go to default page
App.RootFrame.Navigate(typeof(ShowBooks));
return; // and cancel the event.
}
// Otherwise
var newbook = new Book
{
Id = Id.Text,
Title = Title.Text,
Author = Author.Text,
Genre = Genre.Text,
Price = decimal.Parse(Price.Text.ToString()),
PublishDate = DateTime.Parse(PublishDate.Text.ToString()),
Description = Description.Text
};
using (var client = new HttpClient())
{
var content = JsonConvert.SerializeObject(newbook);
// Send a POST
Task task = Task.Run(async () =>
{
var data = new HttpFormUrlEncodedContent(
new Dictionary<string, string>
{
["value"] = content
}
);
await client.PostAsync(App.BaseUri, data);
});
task.Wait();
}
App.RootFrame.Navigate(typeof(ShowBooks));
}

Image 8.

Update a record

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<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>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</TextBlock>

</TextBlock>

</TextBlock>

</TextBlock>

</TextBlock>

</TextBlock>

</TextBlock>

</StackPanel>

</StackPanel>

</Grid>

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

</StackPanel>

</Grid>

protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (e.Parameter as bool? == false)
{
var book = App.Books;
Id.Text = book.Id.ToString();
Title.Text = book.Title;
Author.Text = book.Author;
Genre.Text = book.Genre;
Price.Text = book.Price.ToString();
PublishDate.Text = book.PublishDate.ToString();
Description.Text = book.Description;
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
if ((sender as Button).Content.ToString() == "Cancel")
{
// Go to default page
App.RootFrame.Navigate(typeof(ShowBooks));
return; // and cancel the event.
}
// Otherwise
var existingbook = new Book
{
Id = Id.Text,
Title = Title.Text,
Author = Author.Text,
Genre = Genre.Text,
Price = decimal.Parse(Price.Text.ToString()),
PublishDate = DateTime.Parse(PublishDate.Text.ToString()),
Description = Description.Text
};
using (var client = new HttpClient())
{
var content = JsonConvert.SerializeObject(existingbook);
// Send a PUT
Task task = Task.Run(async () =>
{
var data = new HttpFormUrlEncodedContent(
new Dictionary<string, string>
{
["value"] = content,
["id"] = App.Books.Id.ToString()
}
);
await client.PutAsync(App.BaseUri, data);
});
task.Wait();
}
App.RootFrame.Navigate(typeof(ShowBooks));
}

Image 9

8 Comments

Join the conversation! Your thoughts help the community grow.

Santhakumar Munuswamy10y ago
Thanks for nice article
Arul R10y ago
Nice share
Ankit Bansal10y ago
Nice share..thanks..
Debasis Saha10y ago
Good one..
Mahesh Chand10y ago
Nice. Good start. You can use Code Tag in the editor and select C, C++, C# option to format code so article will be nicely formatted and easy to read. Too much spacing in code.
Ankur Mistry10y ago
Helpful article, thanks for sharing
Humayun Kabir Mamun10y ago
Nice...
Debasis Saha10y ago
Nice One..