How to Bind Data-Data Binding In .NET MAUI using MVVM Architecture in .NET MAUI-LEST YOU FORGET EP 6

welcome to macro code if you're new to this channel consider subscribing so on today's series we are going to proceed with uh our net ma app so what we going to do today we are going to do a data binding so data binding is a process where a connection between a user interface and the data it displays is actually established so we're going to see how we are going to achieve that and basically we are going to do it on our form that we created yesterday on ADD a new student form so what we did for those who are new to this uh video uh we created a class library for netm as you can see and we named it uh we actually named it uh Student app. Bus so we have our model which is actually the student model as you can see then we also have our view Model A students P list page and we have the add new students page view model so what I'm I'm going to do we are going to try to have some binding to do data binding on our form on our zal form so so first thing first I'm going to install uh community so let's just add nugget so then I'm going to say community tool kit toolkit so I want us to install Community toolkit mvvm so let's [Music] see so I'm going to install Community toolkit this one so install it then we are going to use this so accept so after we've done that you can actually verify that this is uh on uh already installed on our package so you'll see on our packages we have the community tool toolkit mvvm so the next thing that I want us to do come to our view model so on our view model here uh on the add new page I want us to Define our students so you can say public so they'll do public then student so I'm going to use a class here then I'll say student then I can do that so here I want to extend uh you can do observable object so if I do that I need to import I need to to to import something so I'll actually install the same here on our business let me install Community toolkit so I want to install that so I'll install it on our class Library so when that is installed let's come to our view model it's already installed so then we we'll have an option now to import the community tool kit component observable object so after we have done that so I'm going to now instantiate this I can say this is new then I'll say new student so when I do that so let's see you can actually can actually do that we can actually leave it as it is then on our data binding I want us to Define uh I want us to do something so actually for those who are new to this channel you can consider subscribing and watching some of our previous videos on this uh Series so we are going to do this series for a complete net Mari app so what I want us to do is I want us to also add a I want us to add a button so I I I want us to add a a public then I say I'll say a sync so for this button say void then we can say add student then I'll do that so I'll actually decorate this here with something called I relay relay command it should be relay command so if you do that you can can install that so we able to have so this is actually now a button so here I'll do partial then that will actually solve our problem should be public class no be here so we should be able to do public partial class then we have now our button here so to to bind the data you can see this is our view model so I'll go and take our student so I I'll take our student and uh our student here I'm going to say student so I'm going to say sorry you can try to maybe we can try to just bind this so let's go to our our add new student page so when it comes to our entry so yesterday we defined the label you can see first name then we have the entry uh we expecting test so here I'll do binding then I'll actually have my student then I'll say sorry so I'll have the student model then I'll say I want this to be first name so I'll do that so I'll also do your binding then I'll say student then I'll say middle name so the same here I'll do binding then I do student middle so this should be last name last name then here we'll do binding then Ure we actually specify the same same names on our on our model so I'll specify here binding so here will be students sorry so this will be students dot that one I'll also do binding then I'll do students do so this is address so we take the name of the address here we put on our there then you can also do binding do binding then student dot so I'll put in the name here over was it the name of the email yes so the email address then you can also do binding student so I'll then put in so that is gender so I'll put in gender here then I can also say binding student dot so this is country so you'll put in here country so country then then last one is uh so we'll do binding then students then we say City so we've now done The Binding to our form so the next thing that let's see these in action so I also want us to have our Command our button so we'll say this button is actually Ty we bind this to the command that we created so you see this one add student so you'll actually have this as our button so when you click this then it will actually come here so another thing that we can do so we can try to say now variable data equals to this so you say this do student so you'll be able to get all the data here so let's try to launch our app and see if we can have the data come here so that is it so let's see so if you're new to this channel consider subscribing so this is now so if we add some data on this for we will be able to see the data and we can actually save this to our database or even send the data to an API so let's see how it will work so our app has launched so if we come to add students you'll be able to see our form so let's try to add uh some data so we say mcro code code then we say test then we say test and we do test then you also do test we do test then you can also do test the last one you can do test so when we click save we should be able to see this uh it will be able to hit here so let's see so so something there is not happening so if we do this zo test then you can can hit so the button is not being CED so what we need to check is on our form we need to see if we did The Binding so you can see here we did The Binding on on this one so we can actually do here you can do the same as public this one then you say VM then you can actually remove this and you can do that so so if we come to our my program. CS file we see we have our model there so come to our main ad students form so this is where now we need to have so here I think we need to do something you see we we've done add student but now on our this one should be add student command so when you come to our zaml we should be able to add uh something here we should say command so if we do that we should be able now to see the command in action so the name instead of having so this relay command will actually had a keyword called it will add so the full name should be add add uh student command so you can see we have two references so this will actually generate the code and you can see this is the command so you can see it is ADD student so this is the command add student command so these is what we need to to add so this command is this is what needs to be here so it should be add student command but when defining you should actually Define it as ADD student because if you add command text in front of add student the command will be add student command command so it is better you have just add student then it will give you add it will add the command word in front of that text that you've just provided so let's see how it will work so that was the reason so here we should have defined add student command and not add student so our app is launching let's see so let me just launch it think we have an error let's see what is the error so we have an error message here this will be yes so we've changed this to student details so what we need to also do we need to change here to student details student details we renamed it so that it does not have the same name as the model so we just do that just do that so then I think that is now f and we can relaunch our app we see how it goes so if you're new to this channel consider subscribing and watching some of our videos You Go app is launching then you'll be able to see the data that comes with our action so there you go the app is launching so if we come to add student so actually provided their provided their breakpoint so if we save student test say test also say test also say test sorry say test also do test so here is test say a test then you can also say this is a test and you can do here test so if we click save let's put in a break point here receive so if we click save you can see so this is uh our break point if we proceed there you go you can see our data is null so what we need to to do we need to instantiate it here so we'll do that then we say don't know if this will accept then we do that so if we do that we'll be able to get the data so we've instantiated so let's let's see so let's relaunch our app and see so we getting n here and this this is actually the reason so we need to do that so when we save we should be able to get the results so subscribe if you're new to this Channel and consider watching the videos so our app has launched so as you can see so let's go to student again uh let's put in some just's put in some text here some random text so you can put in some text can put in some text here here here can put in here put in here so if we click save there we go so if we still into we'll be able to see that our model has some data so you can see we have a middle name and these all phone number did you provide data on the phone number yes so this should be so if we continue we can actually do some text here then if we save again step into we able to get the data so for number we expecting in that's why you'll see so then we this is now how we've binded this form and actually get the data from user input so I think that is it so if we proceed what we need to change you see on our on our model on our page we able to see this activity indicator but we should be able to see this once we click add button so what how can we achieve that so I want us to do something small we come to our view model then I want us to say public we say is uh say bull then we say is uh running so if we do that we can do this then at the top here we annotate with observable property so if we do that this should this should solve our problem then once we click the button we should say is running should be set to true then we can set it to fult down here and this one we can if we do that we can now come to our add mode add H student page then instead of doing is enable true we now bind it so we say binding we have it there will be using that result so whenever it's running you show it and uh you make it visible and you make it running so we can do that so let's launch our app and see so on our view model this is how it is so let's see how our app looks like there you see so if we come to our up add then you provide some text here so you do that do this do this so I want us to see something you see we don't have the activity indicator running but if we click save so let's see if we click save there's something wrong yeah there we are we have our we have our so if we proceed there next I think you are not able to see it let's see again I can do that so I think that is so that that is the best way of showing that so you can see it is not running but whenever we just click save it should be able to be to start running [Music] here [Music] yeah

Channel: Macro Code

Views: 140

Keywords: C#, AmigosCode, .NET, .NETFramework, .NETCORE, Sundeep, Saradhi, freecodeCamp, ProgrammingWithMosh, MikeDane, IamTimCorey, TeddySmith, FireShip, DaniKrossing, Stefan Mischook, ASP.NET CORE, Coder Foundry, Jose Montemagno, .NET 7, Frameworks, Nick, Nickchapsas, Jake Wright, Keep On Coding, QuestPond, Amigos, Developer Filip, TechWorld With Nana, Techworld, GotoConferences, CRUD, SERVER, BoostMyTool, MAUI, .NETMAUI, CRUD MAUI, SQLITE, ProgrammingPragnesh, Gerald, NETMAUI, MVVM, MAUICAMERA, RESTFulApi, NetCode-Hub, NET8.0

Id: TlpUxE0rMow

Length: 22min 1sec (1321 seconds)

Published: Sat Nov 25 2023