Xamarin-CallSever Part 2

Chào mọi người. Hôm nay mình sẽ tiếp tục với Xamarin về CRUD với sever. Bài trước mình đã get và show list employees. Giờ mình sẽ thêm các chức năng view detail, edit, add new và delete vào. Bài này mình cũng sẽ update một tí về navigation trong các page để nó ra hình 1 cái gọi là user flow.

Chúng ta thêm các method cho EmployeeServices: PostEmployeeAsyn- thêm mới 1 employee PutEmployeeAsyn- cập nhật thông tin cho employee đã tồn tại DeleteEmployeeAsyn- xóa 1 employee đã tồn tại

   public async Task<bool> PostEmployeeAsyn( Employee employee)
        {

            RestClient<Employee> restClient=new RestClient<Employee>();
           return await restClient.PostAsync(employee);

        }

        public async Task<bool> PutEmployeeAsyn(Employee employee)
        {
            RestClient<Employee> restClient = new RestClient<Employee>();
          return await restClient.PutAsync(employee.Id,employee);
        }

       public async Task<bool> DeleteEmployeeAsyn(Employee employee)
       {
           RestClient<Employee> restClient =new RestClient<Employee>();
           return await restClient.DeleteAsync(employee.Id, employee);
       }

Tại Views: Tại trang Employee chúng ta sẽ thêm Một button thêm mới employee và navigation sang trang NewEmployeePage với Model trống, đồng thời thêm sự kiện tap vào item của list sẽ navigation sang NewEmployeePage để xem detail và update/delete employee

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Demo.Views.Employee"
             xmlns:ViewModels="clr-namespace:Demo.ViewModels;assamely=Demo">
    <ContentPage.BindingContext>
        <ViewModels:EmployeeViewModel/>
    </ContentPage.BindingContext>

  <StackLayout Orientation="Vertical">
        <Button Text="Add Employee" Clicked="Button_OnClicked" BackgroundColor="Blue"/>
        <ListView x:Name="EmployeeListView" ItemsSource="{Binding EmployeeList}" HasUnevenRows="True"
                  ItemTapped="ListView_OnItemTapped"
                  >
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <StackLayout Orientation="Vertical" Padding="12,6" >
              <Label Text="{Binding Name}" FontSize="Large"></Label>
              <Label Text="{Binding Department}"   FontSize="Medium" Opacity="0.6"></Label>
            </StackLayout>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </StackLayout>
</ContentPage>

Defined sự kiện

  private async void Button_OnClicked(object sender, EventArgs e)
        {
            var employeeViewModel = BindingContext as EmployeeViewModel;
            if (employeeViewModel == null)
            {
                await Navigation.PushAsync(new NewEmployeePage());
                return; ;
            }
            await Navigation.PushAsync(new NewEmployeePage(employeeViewModel));

        }

        private async void ListView_OnItemTapped(object sender, ItemTappedEventArgs e)
        {
            var employee = EmployeeListView.SelectedItem as Models.Employee;
            if (employee != null)
            {
                var employeeViewModel = BindingContext as EmployeeViewModel;
                if (employeeViewModel != null)
                {
                    employeeViewModel.SelectedEmployee = employee;
                    await Navigation.PushAsync(new NewEmployeePage(employeeViewModel));
                }

            }
        }

Đơn giản chúng ta lấy binding object hiện tại được selected và nếu nó khác null thì sẽ navigation sang trong NewEmployee với object binding được chọn.

Về Navigation thì xem đơn giản nó là 1 stack và có push và pop. Khi chúng ta navigation đến trang mới thì push trang mới vào stack và khi back về trang trước thì pop nó ra. Hoặc poptoRoot để pop tất cả các page và đưa về trang

Tạo 1 NewEmployeePage. Page này dùng để làm form tạo mới cũng như xem detail, update và xóa employee. Sau khi thành công chúng ta sẽ navigation về trang chính để xem lại list employee.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:ViewModels="clr-namespace:Demo.ViewModels;assamely=Demo"
             x:Class="Demo.Views.NewEmployeePage">
    <ContentPage.BindingContext>
        <ViewModels:EmployeeViewModel/>
    </ContentPage.BindingContext>
  <StackLayout Orientation="Vertical"
               Spacing="18">
    <Label  Text="Name" />
        <Entry Text="{Binding SelectedEmployee.Name, Mode=TwoWay}"/>
    <Label  Text="Department" />
        <Entry Text="{Binding SelectedEmployee.Department, Mode=TwoWay}"/>
    <Button Text="POST Employee" Command="{Binding PostCommand }"></Button>
    <Button Text="Delete Employee" Command="{Binding DeleteCommand}"/>
  </StackLayout>

</ContentPage>

Chúng ta có 2 field để show thông tin Name và Department của employee và 2 nút: Post Employee ( Create/Update employee) Delete Employee ( Xóa employee) Ở đây mình sẽ binding sự kiện Click các button bằng binding command là PostCommand và DeleteCommand. Khi làm với MVVM thì các bạn cứ nghĩ đơn giản bạn muốn binding bất kì loại object hay event nào vào cũng được. Có khi là cả 1 customcontroll vào item của list cũng được. 2 command được mô tả trong đối tượng EmployeeViewModel

  public ICommand PostCommand
        {
            get
            {
                return new Command(async () =>
                {
                    var employeeServices = new EmployeeServices();
                    var result = SelectedEmployee.Id > 0 ? await employeeServices.PutEmployeeAsyn(_selectedEmployee) : await employeeServices.PostEmployeeAsyn(_selectedEmployee);

                    if (result)
                    {
                      // load lại nội dung cho content của list  và naviga lại trang trước.
                         await InitializeDataAsync();
                         await Navi.PopAsync();
                    }

                });

            }

        }

        public ICommand DeleteCommand
        {
            get
            {
                return new Command(async () =>
               {
               var result=false;
                   var employeeServices = new EmployeeServices();
                   if (SelectedEmployee.Id > 0)result= await employeeServices.DeleteEmployeeAsyn(_selectedEmployee);
                   If(result){
                    // load lại nội dung cho content của list  và naviga lại trang trước.
                     await InitializeDataAsync();
                     await Navi.PopAsync();
                   }

               });

            }
        }

Tại trang NewEmployee sau khi request create/update/delete lên sever thành công chúng ta sẽ reload lại list employee và back trở lại trang trước bằng việc Pop navigation. Thế là xong, chúc các bạn vui vẻ