如何在 xamarin.forms 的新页面中显示存储在 firebase Realtime DataBase 中的数据？

Question

我已经创建了一个实时数据库，我在其中存储了一些数据，例如公司的名称。 当我点击“存储数据”时，我进入一个标签页。那么，我如何才能像 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 ，标签页的子级（在此处设置 BindingContext 以绑定您的数据）。

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

MyCompanyPage.xaml，根据需要绑定 companyName：

<?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 并在标签页中显示它们）：