如何通過單擊按鈕獲取 Xamarin Forms 中的表單字段

Question

我正在嘗試通過使用 ICommand 界面單擊按鈕來獲取 MVVM 設置中視圖中的字段值。 最終目標是通過單擊按鈕獲取這些字段，然后將這些字段保存到 SQLite 數據庫中。 我提供了與 model 具有相同字段的視圖、代碼隱藏和 ViewModel，以提供完整的圖片，因為我正在尋找它們如何組合在一起並且在任何地方都找不到好的示例。 許多鏈接返回到有關制作時鍾的 MSDN 頁面，但這對表單提交任務類型沒有多大幫助。

這是視圖：

<?xml version="1.0" encoding="UTF-8"?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TermManager.Views.AddCourseView">
   <ContentPage.Content>
     <ScrollView>
        <StackLayout>
            <Label Text="Add Course" VerticalOptions="Center" HorizontalTextAlignment="Center" IsVisible="true" FontSize="Large" FontAttributes="Bold" TextColor="DarkBlue" Margin="10" />
            <Entry x:Name="CourseTitle" Placeholder="Course Title" Margin="3" />
            <Label Margin="3">Start Date</Label>
            <DatePicker x:Name="CourseStartDate" Margin="3" />
            <Label Margin="3">End Date</Label>
            <DatePicker x:Name="CourseEndDate" Margin="3" />
            <Picker x:Name="CourseStatus" Title="Course Status" Margin="3" TitleColor="DarkBlue">
                <Picker.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        <x:String>in progress</x:String>
                        <x:String>completed</x:String>
                        <x:String>dropped</x:String>
                        <x:String>plan to take</x:String>
                    </x:Array>
                </Picker.ItemsSource>
            </Picker>
            <Entry x:Name="ProfessorName" Placeholder="Professor's Name" />
            <Entry x:Name="ProfessorPhone" Placeholder="Professor's Phone" />
            <Entry x:Name="ProfessorEmail" Placeholder="Professor's Email" />
            <Button x:Name="SaveCourseButton" Command="{Binding SaveCommand}" Text="Save" BackgroundColor="DarkBlue" TextColor="White" Margin="3" />
            <Button Text="Cancel" BackgroundColor="DarkRed" TextColor="White" Margin="3" Clicked="CancelCourseAddition" />
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

代碼背后：

using System;
using Xamarin.Forms;
using TermManager.Models;
using TermManager.ViewModels;
using System.Collections.Generic;

namespace TermManager.Views
{
public partial class AddCourseView : ContentPage
{
    public int TermId { get; set; }

    private AddCourseViewModel viewModel = new AddCourseViewModel();

    public AddCourseView()
    {
        InitializeComponent();
        BindingContext = viewModel;
    }

    protected async void CancelCourseAddition(object sender, EventArgs args)
    {
        await Navigation.PopAsync();
    }

    async void SaveButtonClicked(object sender, SelectedItemChangedEventArgs args)
    {
        var vm = sender as AddCourseViewModel;

        Course course = new Course
        {
            CourseStatus = vm.CourseStatus,
            CourseTitle = vm.CourseTitle,
            StartCourseDate = vm.StartCourseDate,
            EndCourseDate = vm.EndCourseDate,
            ProfessorEmail = vm.ProfessorEmail,
            ProfessorName = vm.ProfessorName,
            ProfessorPhone = vm.ProfessorPhone,
            TermId = vm.TermId
        };

        //viewModel.SaveNewTerm(course);
        await Navigation.PopAsync();
    }
}
}

查看 Model：

using System;
using Xamarin.Forms;
using TermManager.Models;
using System.Windows.Input;
using System.ComponentModel;

namespace TermManager.ViewModels
{
    public class AddCourseViewModel : INotifyPropertyChanged
    {
        public int CourseId { get; set; }
        public int TermId { get; set; }
        public string CourseTitle { get; set; }
        public DateTime StartCourseDate { get; set; }
        public DateTime EndCourseDate { get; set; }
        public string CourseStatus { get; set; }
        public string ProfessorName { get; set; }
        public string ProfessorEmail { get; set; }
        public string ProfessorPhone { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;
        public ICommand SaveCommand
        {
            get
            {
                return new Command((e) =>
                {
                    var item = (e as Course);

                    var test = item.CourseTitle;
                });
            }
        }

        public AddCourseViewModel()
        {
        }

        //public async void SaveNewTerm(Course course)
        //{
        //    await App.Database.SaveCourseAsync(course);
        //}
    }
}

任何有關如何正確實現抓取這些字段而不使用x:Name="FieldName"來填充 model 的幫助、建議或提示將不勝感激。

Answer 1

您正在尋找的是Binding ，如果事實上您已經將它與Command和Button單擊事件一起使用。

同樣的方式，您可以將 ViewModel 中的屬性綁定到 View 到控件的特定屬性中。

例如，讓我們采用您的Entry之一：

<Entry x:Name="CourseTitle" 
    Text="{Binding CourseTitle, Mode=TwoWay}" 
    Placeholder="Course Title" 
    Margin="3" />

使用條目的文本屬性，我們告訴從 ViewModel 綁定CourseTitle的值。

您可以在此處閱讀有關數據綁定的更多信息

但是要使上述工作正常，您需要添加一個額外的步驟。 您的 ViewModel 已經實現了INotifyPropertyChanged ，但您的屬性必須在其值發生更改時發出通知。

像這樣的東西：

public string _courseTitle;
public string CourseTitle
{
    get => _courseTitle;
    set
    {
        _courseTitle = value;
        RaisePropertyChanged(nameof(CourseTitle));
    }
}

您將對要綁定到 UI 的所有其他屬性執行此操作，並通知您更改。

並添加此方法：

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

更多關於 Xamarin 中的 MVVM 在這里

現在，您只需在 UI 中與您的 ViewModel 屬性匹配的控件的 rest 中添加相同的內容。

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TermManager.Views.AddCourseView">
<ContentPage.Content>
    <ScrollView>
        <StackLayout>
            <Label Text="Add Course" VerticalOptions="Center" HorizontalTextAlignment="Center" IsVisible="true" FontSize="Large" FontAttributes="Bold" TextColor="DarkBlue" Margin="10" />
            <Entry x:Name="CourseTitle" Text="{Binding CourseTitle, Mode=TwoWay}" Placeholder="Course Title" Margin="3" />
            <Label Margin="3">Start Date</Label>
            <DatePicker x:Name="CourseStartDate" Margin="3" />
            <Label Margin="3">End Date</Label>
            <DatePicker x:Name="CourseEndDate" Margin="3" />
            <Picker x:Name="CourseStatus" Title="Course Status" Margin="3" TitleColor="DarkBlue">
                <Picker.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        <x:String>in progress</x:String>
                        <x:String>completed</x:String>
                        <x:String>dropped</x:String>
                        <x:String>plan to take</x:String>
                    </x:Array>
                </Picker.ItemsSource>
            </Picker>
            <Entry x:Name="ProfessorName" Text="{Binding ProfessorName, Mode=TwoWay}" Placeholder="Professor's Name" />
            <Entry x:Name="ProfessorPhone" Text="{Binding ProfessorPhone, Mode=TwoWay}" Placeholder="Professor's Phone" />
            <Entry x:Name="ProfessorEmail" Text="{Binding ProfessorEmail, Mode=TwoWay}" Placeholder="Professor's Email" />
            <Button x:Name="SaveCourseButton" Command="{Binding SaveCommand}" Text="Save" BackgroundColor="DarkBlue" TextColor="White" Margin="3" />
            <Button Text="Cancel" BackgroundColor="DarkRed" TextColor="White" Margin="3" Clicked="CancelCourseAddition" />
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

大注：

有了這個，您將不再需要像在后面的代碼中那樣手動設置值。 只需將值設置為 ViewModel 中的屬性值，它們就會填充您的視圖。

希望這可以幫助。-