技术教程 编程教程 C#使用Xamarin开发可移植移动应用进阶篇(10.综合演练,来一份增删改查CRUD) 正文

C#使用Xamarin开发可移植移动应用进阶篇(10.综合演练,来一份增删改查CRUD)

2023-03-14,,

前言

系列目录

C#使用Xamarin开发可移植移动应用目录

源码地址:https://github.com/l2999019/DemoApp

可以Star一下,随意 - -

说点什么..

呃 也有半个月没更新了. 本来这篇的Demo早就写完了,文章也构思好了.迟迟没发布..是因为实在太忙..

项目要上线..各种  你们懂的..

正赶上自己十一人生大事..结婚..所以..忙的那叫一个脚不沾地啊.

今天的学习内容?

使用我们前面所学的技术,写一个增删改查.

效果如下:

正文

废话不多说,直接开始吧.

1.采用了的技术

列表ListView,采用继承重写的方式,实现简易的下拉刷新

采用HttpClient的方式访问后端的WebAPI.

使用了一系列的Xamarin提供的插件.

采用了MVVM的方式,来编写我们的业务代码.

2.WebAPI

前面我们说过,我们访问的是后端WebAPI,内容很简单..就是一个增删改查.

多余的我就不多说了,直接贴出代码如下:

    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 - ) * 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() > )

                {

                    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() >)

                {

                    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() > )

                {

                    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 = ;

        }

        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 = ;

        private int rows = ;

        /// <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 = ;

            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.

至此,就完成了整个的简易增删改查的编写.

写在最后

本系列到此,就已经进行了一大半了..后面会继续更新一些安卓库的绑定等内容,敬请期待.

C#使用Xamarin开发可移植移动应用进阶篇(10.综合演练,来一份增删改查CRUD)的相关教程结束。

《C#使用Xamarin开发可移植移动应用进阶篇(10.综合演练,来一份增删改查CRUD).doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!