您的位置:首頁>正文

使用Xamarin開發可移植移動應用進階篇

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

public class ValuesController : ApiController { // GET api/values [HttpGet] public List 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/5public bool UpdateDate(Models.ContextTable datemodel) { // var date = JsonConvert.DeserializeObject(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/5public 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 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 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 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> 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 Items = new List(); if (response.IsSuccessStatusCode) { var content = await response.Content.ReadAsStringAsync(); try { Items = JsonConvert.DeserializeObject>(content); } catch (Exception ex) { } } return Items; } }

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

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

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

public class ContextViewModel: INotifyPropertyChanged { //初始化倉儲public ContextDataStore DataStore =new ContextDataStore(); //設置綁定對象public ObservableCollection Items { get; set; } //設置刷新命令public Command LoadItemsCommand { get; set; } public event PropertyChangedEventHandler PropertyChanged; private int page = 1; private int rows = 10; /// /// 初始化各種資料與監聽 /// public ContextViewModel() { Items = new ObservableCollection(); LoadItemsCommand = new Command(async () => await ExecuteLoadItemsCommand()); //監聽添加的消息MessagingCenter.Subscribe(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(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(); } /// /// 刪除的方法 /// /// /// public async Task 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; } /// /// 載入資料的命令 /// /// 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) { } } /// /// 重新刷新資料 /// 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頁面如下:

這個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(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,然後編寫了介面上的各種交互事件.

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

如下:

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

public partial class ContextModelPage : ContentPage { private int isUpdate = 0; public ContextModelPage() { InitializeComponent(); MessagingCenter.Subscribe(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, "Updat eItem", 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(this, "GetModel"); base.OnDisappearing(); } }

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

(轉自博客園)

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

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

·海量IT學習資料白給你, 加群搶:584539956

加群申請填寫:“IT大俠” 你可能就是下一個IT大俠哦!

同類文章
Next Article
喜欢就按个赞吧!!!
点击关闭提示