如何在 xamarin.forms 的新页面中显示存储在 firebase 实时数据库中的数据？

Question

我创建了一个realTimeDatabase，我在其中存储了一些数据，例如公司名称。当我点击 "store data" 时，我进入了一个标签页。那么我怎样才能只将公司名称可视化为 tabbedPage 的标题？

Answer 1

您只需要从您的 RealtimeDataBase 获取数据，然后将其绑定到您的页面，

例如：

型号公司:

public class Company
{
    public int CompanyId { get; set; }
    public string CompanyName { get; set; }

}

创建FireBaseHelp，运行firabase：

public class FirebaseHelper
{
    FirebaseClient firebase = new FirebaseClient("https://androiddemo-f9385.firebaseio.com/");

    public async Task<List<Company>> GetAllCompanies()
    {

        return (await firebase
          .Child("Companies")
          .OnceAsync<Company>()).Select(item => new Company
          {
              CompanyName = item.Object.CompanyName,
              CompanyId = item.Object.CompanyId
          }).ToList();
    }

    public async Task AddCompay(int companyId,string companyName)
    {

        await firebase
          .Child("Companies")
          .PostAsync(new Company() { CompanyId = companyId, CompanyName = companyName});
    }

    public async Task<Company> GetCompany(int companyId)
    {
        var allCompanies = await GetAllCompanies();
        await firebase
          .Child("Companies")
          .OnceAsync<Company>();
        return allCompanies.Where(a => a.CompanyId == companyId).FirstOrDefault();
    }

}

创建标签页CompanyPage:

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class CompanyPage : TabbedPage
{
    public CompanyPage(List<Company> allCompanies)
    {
        foreach (var item in allCompanies)
        {
            Children.Add(new MyCompanyPage(item));
        }
    }
}

创建 MyCompanyPage.xaml.cs ，tabbedpage 的子页面（在此处设置 BindingContext 以绑定您的数据）。

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyCompanyPage : ContentPage
{
    public MyCompanyPage(Company company)
    {
        InitializeComponent();
        BindingContext = company;
    }
}

MyCompanyPage.xaml ,根据需要绑定公司名称:

<?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:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         Title="{Binding CompanyName}"
         x:Class="XamarinFirebase.MyCompanyPage">
 <ContentPage.Content>
    <StackLayout>
        <Label Text="{Binding CompanyName}"
            VerticalOptions="CenterAndExpand" 
            HorizontalOptions="CenterAndExpand" />
    </StackLayout>
 </ContentPage.Content>
</ContentPage>

然后在 MainPage 中，当您单击一个按钮时，它将查询 FireBase 并获取数据。

  private async void BtnRetrive_Clicked(object sender, EventArgs e)
    {          
        var allCompanies = await firebaseHelper.GetAllCompanies();
        Navigation.PushAsync(new CompanyPage(allCompanies));
    }

你可以阅读 Data Binding 和这是效果的gif（添加三个cpmpanies并在tabbedpage中显示它们）：

如何在 xamarin.forms 的新页面中显示存储在 firebase 实时数据库中的数据？

How to show data stored in firebase RealtimeDataBase inside a new page in xamarin.forms?

c#

database

firebase

xamarin.forms

data-retrieval