使用Xamarin開發可移植移動應用進階篇-增刪改查

多餘的我就不多說了,直接貼出代碼如下:

public class ValuesController : ApiController
{
// GET api/values [HttpGet] public List<ContextTable> Get(int page,int count)
{
using (Models.School_TestEntities entites = new Models.School_TestEntities())
{
var date= entites.ContextTable.OrderBy(c => c.ID).Skip((page - 1) * count).Take(count).ToList(); return date;
} }
// PUT api/values/5
public bool UpdateDate(Models.ContextTable datemodel)
{
// var date = JsonConvert.DeserializeObject<Models.ContextTable>(value);
using (Models.School_TestEntities entites = new Models.School_TestEntities())
{
var model = entites.ContextTable.Where(a => a.ID == datemodel.ID).FirstOrDefault();
model.Title = datemodel.Title;
model.AddTime = datemodel.AddTime;
model.Context = datemodel.Context;
if (entites.SaveChanges() > 0)
{
return true;
}
return false;
}
}
public bool AddDate(Models.ContextTable model)
{
var date = model; using (Models.School_TestEntities entites = new Models.School_TestEntities())
{
entites.ContextTable.Add(date); if (entites.SaveChanges() >0)
{
return true;
}
}
return false;
}
// DELETE api/values/5
public bool Delete(int id)
{
using (Models.School_TestEntities entites = new Models.School_TestEntities())
{
var date = entites.ContextTable.Where(a => a.ID == id).FirstOrDefault();
entites.ContextTable.Remove(date);
if (entites.SaveChanges() > 0)
{
return true;
}
return false;
}
}
}

3.編寫服務倉儲

就是編寫一個訪問WebAPI用的倉儲.代碼如下:

public class ContextDataStore {
HttpClient client; string RestUrl = "http://192.168.3.74:53470/api/values"; public ContextDataStore()
{
client = new HttpClient();
client.MaxResponseContentBufferSize = 256000;
} public async Task<bool> AddItemAsync(ContextModel item)
{ var uri = new Uri(RestUrl+ "/AddDate/"); var json = JsonConvert.SerializeObject(item);
var content = new StringContent(json);
content.Headers.ContentType = new MediaTypeHeaderValue("application/json"); var response = await client.PostAsync(uri, content); if (response.IsSuccessStatusCode)
{ var date = await response.Content.ReadAsStringAsync(); return Convert.ToBoolean(date);
} return false;
} public async Task<bool> UpdateItemAsync(ContextModel item)
{ var uri = new Uri(RestUrl + "/UpdateDate/"); var json = JsonConvert.SerializeObject(item);
var content = new StringContent(json);
content.Headers.ContentType = new MediaTypeHeaderValue("application/json"); var response = await client.PostAsync(uri, content); if (response.IsSuccessStatusCode)
{ var date = await response.Content.ReadAsStringAsync(); return Convert.ToBoolean(date);
} return false;
} public async Task<bool> DeleteItemAsync(int id)
{ var uri = new Uri(string.Format(RestUrl + "/Delete/?id=" + id, string.Empty)); var response = await client.DeleteAsync(uri);
if (response.IsSuccessStatusCode)
{ var content = await response.Content.ReadAsStringAsync(); return Convert.ToBoolean(content);
} return false;
} public async Task<IEnumerable<ContextModel>> GetItemsAsync(int page,int rows)
{ var uri = new Uri(string.Format(RestUrl+"/Get/?page="+page+ "&count=" + rows, string.Empty)); var response = await client.GetAsync(uri);
List<ContextModel> Items = new List<ContextModel>(); if (response.IsSuccessStatusCode)
{ var content = await response.Content.ReadAsStringAsync(); try
{
Items = JsonConvert.DeserializeObject<List<ContextModel>>(content);
} catch (Exception ex)
{
}
} return Items;
}
}

4.編寫ViewModel來與界面進行綁定交互

詳解請查看系列目錄中的MVVM篇

代碼如下(注釋中有解釋):

public class ContextViewModel: INotifyPropertyChanged
{ //初始化倉儲
public ContextDataStore DataStore =new ContextDataStore(); //設置綁定對象
public ObservableCollection<ContextModel> Items { get; set; } //設置刷新命令
public Command LoadItemsCommand { get; set; } public event PropertyChangedEventHandler PropertyChanged;
private int page = 1; private int rows = 10; /// <summary>
/// 初始化各種數據與監聽 /// </summary>
public ContextViewModel()
{
Items = new ObservableCollection<ContextModel>();
LoadItemsCommand = new Command(async () => await ExecuteLoadItemsCommand()); //監聽添加的消息
MessagingCenter.Subscribe<ContextModelPage, ContextModel>(this, "AddItem", async (obj, item) =>
{ var _item = item as ContextModel; var date = await DataStore.AddItemAsync(_item);
if (date)
{
LoadDate(); await obj.DisplayAlert("提示", "添加成功!", "關閉"); await obj.Navigation.PopAsync();
} else
{ await obj.DisplayAlert("提示", "添加失敗!", "關閉");
}
}); //監聽更新的消息
MessagingCenter.Subscribe<ContextModelPage, ContextModel>(this, "UpdateItem", async (obj, item) =>
{ var date = await DataStore.UpdateItemAsync(item); if (date)
{
LoadDate(); await obj.DisplayAlert("提示", "修改成功!", "關閉"); await obj.Navigation.PopAsync();
} else
{ await obj.DisplayAlert("提示", "修改失敗!", "關閉");
}
});
ExecuteLoadItemsCommand();
} /// <summary>
/// 刪除的方法 /// </summary>
/// <param name="id"></param>
/// <returns></returns>
public async Task<bool> DeleteItem(int id)
{ var date = await DataStore.DeleteItemAsync(id); if (date)
{ var item = Items.Where(a => a.ID == id).FirstOrDefault();
Items.Remove(item);
OnPropertyChanged("Items");
} return date;
} /// <summary>
/// 載入數據的命令 /// </summary>
/// <returns></returns>
async Task ExecuteLoadItemsCommand()
{
try
{ //Items.Clear();
var items = await DataStore.GetItemsAsync(page,rows); foreach (var item in items)
{
Items.Add(item);
}
OnPropertyChanged("Items");
page++;
} catch (Exception ex)
{
}
} /// <summary>
/// 重新刷新數據 /// </summary>
private async void LoadDate()
{
Items.Clear();
page = 1; var items = await DataStore.GetItemsAsync(page, rows); foreach (var item in items)
{
Items.Add(item);
}
OnPropertyChanged("Items");
page++;
} protected virtual void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}

嗯.還是說明一下 這個ViewModel就類似於MVC中的控制器,起到一個承上啟下的作用.與頁面交互並把這些交互信息傳遞給倉儲,由倉儲來訪問WebAPI

5.編寫界面,綁定數據

我們創建一個ContentPage頁面如下:

<?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:local="clr-namespace:DemoApp.HTTPClientDemo.ViewModels"
xmlns:Controls="clr-namespace:DemoApp.HTTPClientDemo;"
x:Class="DemoApp.HTTPClientDemo.ListViewPage">
<ContentPage.ToolbarItems>
<ToolbarItem Text="添加" Order="Default" Clicked="ToolbarItem_Clicked" />
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout>
<Controls:MyListView
ItemsSource="{Binding Items}"
VerticalOptions="FillAndExpand"
HasUnevenRows="true"
LoadMoreCommand="{Binding LoadItemsCommand}"
x:Name="listdate"
>
<ListView.ItemTemplate>
<DataTemplate >
<ViewCell>
<ViewCell.ContextActions>
<MenuItem CommandParameter="{Binding}" Clicked="MenuItem_Clicked" Text="修改" />
<MenuItem x:Name="DeleteBtn" CommandParameter="{Binding ID}" Clicked="MenuItem_Clicked_1" Text="刪除" IsDestructive="True" />
</ViewCell.ContextActions>
<StackLayout Padding="10">
<Label Text="{Binding Title}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16"/>
<Label Text="{Binding AddTime}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="13"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</Controls:MyListView>
</StackLayout>
</ContentPage.Content></ContentPage>

這個ContentPage中,我們使用了StackLayout布局,ListView,ToolbarItem 等控制項.綁定了我們前面編寫的ContextViewModel(後台代碼綁定的,在下面)

編寫這個ContentPage的後台代碼如下:

public partial class ListViewPage : ContentPage
{
ContextViewModel viewModel; public ListViewPage()
{
InitializeComponent(); this.BindingContext = viewModel = new ContextViewModel();
} private void MenuItem_Clicked(object sender, EventArgs e)
{ var mi = ((MenuItem)sender);
ContextModel date = mi.CommandParameter as ContextModel;
Navigation.PushAsync(new ContextModelPage());
MessagingCenter.Send<ListViewPage,ContextModel>(this, "GetModel", date);
} private async void MenuItem_Clicked_1(object sender, EventArgs e)
{ var mi = ((MenuItem)sender); int id = Convert.ToInt32( mi.CommandParameter); var date = await viewModel.DeleteItem(id); if (!date)
{ await DisplayAlert("提示", "刪除失敗,請檢查網路", "確定");
}
} private void ToolbarItem_Clicked(object sender, EventArgs e)
{
Navigation.PushAsync(new ContextModelPage());
}
}

這裡,我們綁定了ContextViewModel,然後編寫了界面上的各種交互事件.

以上,我們的列表也就算完成了,下面我們來看看我們的增加和修改頁面.(也就是顯示詳細數據的頁面)

如下:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DemoApp.HTTPClientDemo.ContextModelPage">
<ContentPage.Content>
<StackLayout>
<Label Text="標題:" />
<Entry Placeholder="請輸入標題" x:Name="titel" />
<Label Text="時間:" /> <DatePicker Format="yyyy-MM-dd" x:Name="times" />
<Label Text="內容:" />
<Editor HorizontalOptions="FillAndExpand" HeightRequest="200" x:Name="contexts" />
<Button Text="保存" x:Name="BtnSave" Clicked="BtnSave_Clicked" ></Button>
</StackLayout>
</ContentPage.Content></ContentPage>

這裡我們採用了前面系列中講過的Label ,Entry,DatePicker ,Editor ,編寫後台代碼如下:

public partial class ContextModelPage : ContentPage
{
private int isUpdate = 0;
public ContextModelPage()
{
InitializeComponent();
MessagingCenter.Subscribe<ListViewPage, ContextModel>(this, "GetModel", (obj, item) => {
//DisplayAlert("提示", "傳過來的參數為" + item, "確定");
this.times.Date = item.AddTime.Value;
this.titel.Text = item.Title;
this.contexts.Text = item.Context;
isUpdate = item.ID;
});
}
private void BtnSave_Clicked(object sender, EventArgs e)
{
if (isUpdate>0)
{
ContextModel model = new ContextModel();
model.AddTime = times.Date;
model.Context = contexts.Text;
model.Title = titel.Text;
model.ID = isUpdate;
MessagingCenter.Send(this, "UpdateItem", model);
}
else
{
ContextModel model = new ContextModel();
model.AddTime = times.Date;
model.Context = contexts.Text;
model.Title = titel.Text;
MessagingCenter.Send(this, "AddItem", model);
}
}
protected override void OnDisappearing()
{
MessagingCenter.Unsubscribe<ListViewPage, ContextModel>(this, "GetModel");
base.OnDisappearing();
}
}

這裡,我們編寫頁面的點擊等交互事件,然後我們採用通訊中心(MessagingCenter)的方式來傳遞修改和刪除的信息給後台的ViewModel.至此,就完成了整個的簡易增刪改查的編寫.

（轉自博客園）

·2017年【中公教育】特別推出2017年就業促進計劃，500萬就業基金助你成為IT達人

詳情請戳：http//www.ujiuye.com/zt/jycj/?wt.bd=bgz

·海量IT學習資料白給你，加群搶：584539956

加群申請填寫：「IT大俠」 你可能就是下一個IT大俠哦！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！