如何在MVVM

时间:2018-01-19 11:55:52

标签: xamarin mvvm xamarin.forms viewmodel

我有一个api网址here,提供以下回复。

  

的Json

{"status":200,"message":"Operation done successfully","data":{"enableNext":false,"products":[{"image":"http://bresa.lazyhost.in/upload/product/1/Tjtqr8.jpg","id":1,"code":"PROi6v8X5261","name":"Spandex Stretch Lounge Sofa with Couch Seat Cover SlipCover","description":"nice sofa , very comfortable for sitting in Living room","tags":"chairs, sofa, ","price":"1000.00","quantity":100,"images":["http://bresa.lazyhost.in/upload/product/1/Tjtqr8.jpg"]}]}}

以上回复的模型类如下。

  

CarouselModel

namespace CameliaMaison.Models
{
     public partial class CarouselModel
    {
        [JsonProperty("status")]
        public long Status { get; set; }

        [JsonProperty("message")]
        public string Message { get; set; }

        [JsonProperty("data")]
        public List<CarouselData> Carouseldata { get; set; }
    }

    public partial class CarouselData
    {
        [JsonProperty("id")]
        public long Id { get; set; }

        [JsonProperty("name")]
        public string Name { get; set; }

        [JsonProperty("path")]
        public string Path { get; set; }
    }
}
  

ViewModel

namespace CameliaMaison.ViewModels
{
    public class CarouselImagesViewModel
    {

        private List<CarouselData> items;

        public List<CarouselData> Items
        {
            get { return items; }
            set
            {

                items = value;
            }
        }

        public CarouselImagesViewModel()
        {
            var responseObj = MyHTTP.GetApiData().Result;
            foreach(CarouselData item in responseObj){
                Items.Add(item);
            }    
        }
    }

    public class MyHTTP
    {
        public static async Task<List<CarouselData>> GetApiData()
        {
            HttpClient httpClient = new HttpClient();
            HttpResponseMessage response = await httpClient.GetAsync("http://bresa.lazyhost.in/api/banners");
            CarouselModel categoriesData = new CarouselModel();
            var content = await response.Content.ReadAsStringAsync();
            if (response.StatusCode == System.Net.HttpStatusCode.OK)
            {
                categoriesData = JsonConvert.DeserializeObject<CarouselModel>(await response.Content.ReadAsStringAsync());
            }
            return categoriesData.Carouseldata;
        }

    }
}

我需要解析JSON并存储在Model Object中,并通过MVVM填充listview中的数据。但是,实现似乎有问题。我无法弄明白,内容页面类如下。

  

ProductsListPage.xaml.cs

public partial class ProductsListPage : ContentPage
    {
        public ProductsListPage()
        {
            InitializeComponent();
        }

    }
  

ProductsListPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:constants="clr-namespace:CameliaMaison;assembly=CameliaMaison"
x:Class="CameliaMaison.Views.ProductsListPage"
Title="Employee List">
  <ListView x:Name="ListView">
    <ListView.ItemTemplate>
      <DataTemplate>
        <TextCell Text="ABC" />
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</ContentPage>

1 个答案:

答案 0 :(得分:0)

首先,您必须在视图页面上有一个按钮。

<Button Command = "{Binding GetInfoCommand}" />

您必须创建一个视图模型。像这样:

public class CarouselModel: INotifyPropertyChanged
{
    //get a reference from the another class where you make the call to get the json
    Tasks ts = new Tasks();
    List<CarouselData> _carouseldata ;

    public List<CarouselData> CarouselData
    {
        get { return _carouseldata ; }
        set
        {
            if (value == _carouseldata ) return;
            _carouseldata = value;
            OnPropertyChanged();
        }
    }
    public ICommand GetIInfoComand
    {
        get
        {
            return new Command(async()=>
            {
                CarouselData= await _apiServices.GetInfo();
            });
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

在tasks.cs类中,您必须在获取json的地方使用调用。这很简单。 :)

==编辑==

在您看来,您必须替换textcell。这样的内容:

<ListView x:Name="ListView">
<ListView.ItemTemplate>
  <DataTemplate>
    <TextCell Text="{Binding Name }" />
  </DataTemplate>
</ListView.ItemTemplate>

您还可以获得视图模型的参考,并将其放在listview之前:

        <ContentPage.BindingContext>
            <CarouselModel/>
        </ContentPage.BindingContext>