Как связать запись со страницы с помощью ViewModel

Question

Я пытаюсь реализовать систему входа в систему следующим образом:

public Command LoginCommand => new Command(async () =>
        {
            LoginModel model = new LoginModel("dnetTest", "dnetTest"); // (get value from entry instead of "dnetTest")

        if (model.CheckInformation())
        {
            bool isSuccess = await LoginService.Login(model);
            if (isSuccess)
            {
                await Application.Current.MainPage.DisplayAlert("Пријављивање", "Успешно сте се пријавили", "OK.");
                Application.Current.MainPage = new MainPage();
            }
        }

Моя страница регистрации также имеет:

 <Label Text="Korisničko ime"/>
 <Entry x:Name="Entry_Username" Placeholder="Korisničko ime"/>
 <Label Text="Lozinka"/>
 <Entry x:Name="Entry_Password" Placeholder="Lozinka"/>
 <Button Text="Prijavi se" Command="{Binding LoginCommand}"/>

Итак, мой вопрос - как связать Entry_Username и Entry_Password с LoginModel в LoginViewModel? И есть ли способ связать его, не используя x: Names?

Answer 1

Быть честным; это очень простой вопрос MVVM, который легко найти, решение которого находится в нескольких блогах и на страницах. Но позвольте мне помочь вам начать.

И есть ли способ связать его без использования x: Names?

Весь смысл привязки данных заключается в том, что вам не нужно делать жесткие ссылки на эти элементы управления. Мы хотим отделить логику от пользовательского интерфейса, чтобы мы могли легко заменить один или оба, не касаясь другого. Например, скажем, что вы хотите реализовать новый дизайн, если вы используете привязку данных, вы можете просто показать текущие свойства в модели представления (или модели страницы, как на нее ссылаются в пространстве Xamarin), если вы ссылаетесь на эти в вашем новом интерфейсе.

Если бы вы имели все виды x:Name ссылок, вам нужно было бы не только прикоснуться к своему пользовательскому интерфейсу, но и к модели представления, а также просмотреть все ссылки на эти поля и заменить их.

Использование привязки данных в основном способствует повторному использованию и тестированию.

Что касается вашего конкретного случая. Я не вижу ваш полный код, поэтому здесь будут сделаны некоторые предположения. Во-первых, я собираюсь предположить, что ваш LoginCommand сейчас живет в собственной модели представления. Вы уже используете привязку данных там, что хорошо. Я не понимаю, зачем вам нужна отдельная модель для модели представления и логина, возможно, ваш LoginModel больше похож на сервис. Кроме того, я предполагаю, что вы делаете это вручную, без помощи инфраструктуры MVVM. Хорошо знать, что происходит под капотом, но я бы порекомендовал взглянуть на использование инфраструктуры MVVM, например, FreshMvvm или Prism.

На странице входа, содержащей ваш XAML, я назову LoginPage.xaml, на котором должен быть файл LoginPage.xaml.cs code-behind. Там, зайдите в конструктор и укажите эту строку:

public LoginPage()
{
    InitializeComponents();

    // This line is relevant here
    BindingContext = new LoginViewModel();
}

Видя, что ваш LoginCommand уже использует привязку данных, это, вероятно, уже здесь.

Теперь, в вашем LoginPage.xaml, измените свой XAML на этот:

 <Label Text="Korisničko ime"/>
 <Entry Text="{Binding Username}" Placeholder="Korisničko ime"/>
 <Label Text="Lozinka"/>
 <Entry Text="{Binding Password}" Placeholder="Lozinka"/>
 <Button Text="Prijavi se" Command="{Binding LoginCommand}"/>

Обратите внимание, как я удалил атрибуты x:Name и добавил атрибуты Text на два элемента управления Entry.

Далее перейдите в LoginViewModel.cs и добавьте два свойства, например:

public string Username { get; set; }
public string Password { get; set; }

Всякий раз, когда текст изменяется в элементах управления Entry, эти свойства должны содержать значение соответствующим образом. Теперь вы можете изменить код, который вы разместили на что-то вроде этого:

public Command LoginCommand => new Command(async () =>
{
    // Notice how I changed this line
    LoginModel model = new LoginModel(Username, Password);

    if (model.CheckInformation())
    {
        bool isSuccess = await LoginService.Login(model);
        if (isSuccess)
        {
            await Application.Current.MainPage.DisplayAlert("Пријављивање", "Успешно сте се пријавили", "OK.");
            Application.Current.MainPage = new MainPage();
        }
    }

Это должно работать для вас!

Как уже упоминалось, я бы рекомендовал заглянуть дальше в MVVM в целом, а также в фреймворки MVVM. Вот официальная страница документации , хорошая реферат Адама Педли и кое-что Я написал себе некоторое время назад.