locked
How to bind and pass from parameters on button command RRS feed

  • Question

  • User324314 posted

    I have a simple form screen, on click on button I need to pass those from elements to api call. I am not able to pass command parameter as model value . Here is my code.

    Xaml page

        <ContentPage.Content>
            <ScrollView>
             <StackLayout Spacing="20" Padding="20" >
                   <Label TextColor="#77d065" FontSize = "20" Text="Your Personal Details" />
    
                    <Entry x:Name="FirstName" Placeholder="First Name"
                           Text="{Binding firstname}"/>
                    <Entry x:Name="LastName" Placeholder="Last Name"
                           Text="{Binding lastname}"/>
                    <Entry x:Name="Email" Placeholder="E-Mail"
                           Text="{Binding email}"/>
                    <Entry x:Name="Telephone" Placeholder="Telephone"
                           Text="{Binding telephone}"/>
    
                    <Label TextColor="#77d065" FontSize = "20" Text="Your Address" />
    
    
                     <Entry x:Name="Address" Placeholder="Address"
                           Text="{Binding address_1}"/>
                    <Entry x:Name="City" Placeholder="City"
                           Text="{Binding city}"/>
                    <Entry x:Name="PostCode" Placeholder="PostCode"
                           Text="{Binding postcode}"/>
                    <Entry x:Name="Country" Placeholder="Country"
                           Text="{Binding country_id}"/>
    
                    <Entry x:Name="State" Placeholder="State"
                           Text="{Binding State}" />
    
                <Button x:Name="nextBtn" Text="Next" TextColor="White"
                    BackgroundColor="#77D065"
                    Command="{Binding NextBtnCommand}" VerticalOptions="End"/>
    
                </StackLayout>
            </ScrollView>
    
        </ContentPage.Content>
    

    Xaml Code behind

                        BindingContext = new GuestCheckOutViewModel();
    
                        GuestUser user = new GuestUser()
                        {
                            firstname = FirstName.Text,
                            lastname = LastName.Text,
                            email = Email.Text,
                            telephone = Telephone.Text,
                            address_1 = Address.Text,
                            city = City.Text,
                            postcode = PostCode.Text,
                            country_id = "99",
                            zone_id = "4231"
                        };
    
    
                        nextBtn.CommandParameter = user;
    

    And view model

         public class GuestCheckOutViewModel : INotifyPropertyChanged
            {
    
                public GuestUser GuestUserResult { get; private set; }
                public ICommand NextBtnCommand { get; private set; }
    
                public GuestCheckOutViewModel()
                {
                    NextBtnCommand = new Command<GuestUser> (GuestCheckOutNext);
                }
    
                void GuestCheckOutNext(GuestUser guestUser){
    
    
    
                    Debug.WriteLine("name {0}", guestUser.firstname);
                    Debug.WriteLine("name {0}", guestUser.lastname);
                    Debug.WriteLine("name {0}", guestUser.email);
                    Debug.WriteLine("name {0}", guestUser.telephone);
    
    
                    OnPropertyChanged("GuestUserResult");
    
                }
    
                public event PropertyChangedEventHandler PropertyChanged;
                void OnPropertyChanged([CallerMemberName]string propertyName = "") =>
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    
            }
    

    How can I use command and databinding in this simple form page

    Tuesday, July 25, 2017 7:15 AM

Answers

  • User101185 posted

    Here is full MVVM implemented POC app please check on Github-https://github.com/pratius/XamarinMvvm

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, July 25, 2017 8:39 AM
  • User76049 posted

    Read this blog post.

    https://blog.xamarin.com/simplifying-events-with-commanding/

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, July 25, 2017 8:41 AM

All replies

  • User101185 posted

    Here is full MVVM implemented POC app please check on Github-https://github.com/pratius/XamarinMvvm

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, July 25, 2017 8:39 AM
  • User76049 posted

    Read this blog post.

    https://blog.xamarin.com/simplifying-events-with-commanding/

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, July 25, 2017 8:41 AM
  • User324314 posted

    @pratiuskumardubey said: Here is full MVVM implemented POC app please check on Github-https://github.com/pratius/XamarinMvvm

    I followed as it is, its working for me. Thank you

    Tuesday, July 25, 2017 10:18 AM
  • User381680 posted

    @AfsarunnisaMd Hello, Can you explain more how you do after have seen the example on github ?

    Monday, January 21, 2019 1:41 PM
  • User76049 posted

    @theocang said: @AfsarunnisaMd Hello, Can you explain more how you do after have seen the example on github ?

    It's well documented

    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/commanding#using-command-parameters

    If your not sure about the MVVM pattern and ICommand you need to read a bit more about the framework.

    There's a good blog post here to help you get started http://redpillxamarin.com/2017/02/01/207-commands/

    Monday, January 21, 2019 3:01 PM
  • User381680 posted

    @NMackay Yes thanks for the docs. But I have follow exacly the second website and the commandParameter="Binding ." send the object i pass in itemsource of the listview.

    So I don't understand. Thanks

    Tuesday, January 22, 2019 8:39 AM
  • User345378 posted

    Define a name for your ContentPage XAML: <ContentPage xmlns= ... xmlns:x= ... xmlns:local= ... x:Class="App1.Cart" x:Name="BrowseItemPage">

    And then set the Binding attributes for your button: <Button Command="{Binding BindingContext.RemoveItemCommand, Source={Reference BrowseItemPage}}" CommandParameter="{Binding .}"/>

    In your code behind:

    public class CartViewModel { // ... public ICommand RemoveItemCommand { get; set; } // ...

    public CartViewModel() { RemoveItemCommand = new Command(async (object obj) => await ExecuteRemoveItemCommand(obj)); } // ...

    private async Task ExecuteRemoveItemCommand(object sender) { await Task.Run(() => Console.WriteLine(sender)); }

    }

    I hope this can help you, best regards.

    Wednesday, March 20, 2019 3:25 PM