Create a To-Do List with MudBlazor

hello and welcome to this video where we're going to create a to-do list by using mud Blazer so we're going to use some of the components that we have inside the documentation of mud Blazer so first of all we want to go and look at the lists because when we create a to-do list we of course need something that we can list it into so we need to find a list that we want to use to display the list items and I actually would like to go with this one the icons with text just so we get a little nice icon here and then the thing that is on the to-do list we will also go and create a form just underneath the list so that we can add some items to it and we will also go and create a delete icon here at the right side so that we can remove things from the list so if we can go into the menu of the documentation here we can see that there is some form and input and underneath here we actually have a a text field and that's what we're going to use so if we click that one we can see here that there is some basic text Fields so we have the standard here the field and an outlined and I actually like this outline the most so that's the one we're going to create our to-do list with and finally we're going to the buttons where we then want to place a button just beside the input field so let's go and create a new blazer server app project so I'll open Bissell Studio 2022 and say create a new project and we'll just choose places server app and I will go and call the project for to-do list app and we say next and in here we want to choose the.net6 version and say create so first of all we need to go and install the mod Blazer so let's right click the project manage nougat package go into browse and then search format Blazer and then it's this one and we will choose the newest stable version as long as it is a sixth version then it is compatible with our.net6 application so let's say install and then I say I accept so next we need to go to the program.cs file and in here I just added the mud Blazer services and then also say that it should add the mud services to our project we then need to go to our Pages folder and inside our underscore layouts folder we will go and add these two lines so that we include the mult Blazer CSS and also the font that comes with mud Blazer so the final thing we need to do is to go to the button here and underneath this script we need to add a marked laser script so we will just go and say underscore content matte Blazer slash mud Blazer dot Min dot JS so that's how we include the mud Blazer Javascript file we then also need to go and include the components so let's go to the share folder and let's open the main layout.raser file and and in here we're going to insert the providers for the mod theme the mod dialog and the mud snack bar so that's actually just the default providers that mud Blazer want us to insert in this file they have green underlines so we need to say Alt Enter so we want to sell it that we want to use mud Blazer so it will add this using mud Blazer here at the top so now when mud Blazer is installed correctly we can go and just close some of all these tabs and then let's open our index.racer file so in here we can go and delete all the text and instead of calling it index we want to call it to-do list well I actually think you write it like this so to-do list and then we can go back to the documentation to get the list so we click on list and then we scroll down until we see this icons with text and if you just like me have some problems actually clicking on this show code then you can just go and click on the run because then we get all all the code in here so as we can see here we actually have the icons with text here so we can go and copy all this code inside this mod item so go and copy it and let's insert it here and then we actually want to go and delete all this inside the mod list and actually before we do anything else we also need to include mod Glazer so we just say using and then say Mark Blazer so now you can see all the green lines have disappeared so before we go and test this I actually also want to include the input field or the text field and then a button so let's go back to the documentation and we will expand this form and inputs and take the text field and as you can see again I cannot click the show code I don't know what is wrong with my browser but I can say run and then the one we need is the one in the bottom here so the outline one so let's go and copy this and insert it into our index.razer file and as you can see here we are going to bind the value to a variable called text value and it's okay we will go and create that variable after we inserted the button so let's go back again and let's find the buttons in the documentation so buttons and button and then I think that we just want to go with the primary button here so let's go and copy this and insert it so we cannot actually go and test this right now because we don't have the text value here so let's go and create the code section and then let's make a property which should be a string and we just want to call it a text value and I actually don't want to get unset it I just want to set it to an empty string so let's try to test this and see if it's working and it actually looks like it's working pretty good so we have the list here we have the outlined input field and we also have our primary button here but the next thing I think we should do is just because this is taking up a lot of the width of the screen so I just want to have it like a box that is centered inside our view here so the way we do this is just by closing the application now and then what we want to do is to actually add a mod grid where we're going to justify it where we say the value is Justified that's Center so everything inside the smart grid will be centered and you of course also need to close it off and we will close it off beneath our button here so just like this mod grid and then again what we want to do is to actually go and just indent this two times because we also want to have a mod item so just like this a mod item where it will take up the space of four so it's 4 out of 12. if you are familiar with bootstrap then it's actually just the same concept so because it's only taking up four in space and it will Center it that would mean that all this inside here would be in a box that has the fall in width and will be centered and of course I also close the mod item down here so let's go and see how this is looking and I think this looks much better now so our next goal is to whenever we type something in here and click on the primary it should be added to this list and of course this list is right now hard coded so we also want to make that Dynamic so let's go back to the project and first of all I want to go and copy this to-do list and put it inside here instead of the icons with text just so we get a little headline called to-do list and now what we actually want to go and do is to go and delete just two of these items so that we still have like a placeholder we can use so we can use this mod list item as a placeholder because in here we want to make a for each Loop but before we do that we also need a list variable down here that can take some strings so that we can actually go and for each these strings up here so we need a variable that can contain a list of strings and this is the way we're going to do that we will just be calling the variable for items so now we should be able to go and save for each up here and we wanna for each every item inside the items just like this so now we can take our placeholder here and go and clip it and put it in here but this time the text should not be single list item it should just be the item so just like this and I would also like to just keep this bookmark just to have some styling on the list so the next thing is to go and tell what should happen when we click on the mud button so we will make a function to handle that we are going to insert a new value to the list so now I just created this function called add list item it should be a public method that is returning a task and there's actually only two things that should happen in here because the first thing is that we want to take the text value and put it inside the items list and then after that we will just go and empty the text value again so we should even be able to say items and say dot add and we just want to put the text value in here and then we want to go and say that the text value should be equal to an empty string and then the final thing we need to do is to actually go and update the UI and the way we do that is by saying that we want to await the invoke async and what we want to invoke is the state has changed and this is basically the way you tell Blazer to update the UI with the new values that we for example have in our items list but as you can see we still have some red underlines here and that's because we need to make this method async so let's try to test this and see if it's working and if it's not we're going to fix the errors so right now we have a list that is empty and that is correct so let's try to add something to our to-do list so for example let's say buy food and let's say okay right now it says primary but we need to make this to say add to list but let's try to click it and of course nothing happens right now because we actually forgot to tell that when the button is clicked that we should execute this method but first of all let's go and say add to list and then we want to go and say on click should be equal to the add list item method so now the method will actually be run when we hit the mod button so let's go and test it again and again let's say that we want to buy food and add it to list and now you can see it pops up on the list so back in the code we will go and create an option so that we can actually go and delete the mod list item again so what I will do is to go and create a new on click event listener so let's just go and copy the one at the bottom and put it inside the mod list item and then we will call it for remove list item instead and that's actually one we're going to create now so let's also go and copy the add list item so that we have two methods now and we do want to call this remove list item so instead of saying that we want to add an item to the items list here we actually want to say that we want to remove it and this method should also take one parameter it should just be a string and we could just call it for item so what we actually want to remove is this item and we actually don't want to do anything with the text value so we can get rid of that text and we do want to use this state has changed to update the UI so the last thing we actually need to do here is to go up to our on click event listener and actually send the item with this on click call so that we have the parameter that we sended with this remove list item so that it comes in here so we can use it to remove it from the items so the actual way to do it is by using this Lambda expression and we just put the item directly inside the remove list item because this is the item that comes from the forage so let's try to see how how this works so we do have our list here where we can say one for example so add one to the list we can also add two add three and add four and now if we actually click on number three here you can see number three is going to be removed we do though get one problem because as you can see we have number two here then we have number four and let's say that we will add number two again and we actually will delete this one so I click on this one then you can see it actually deleted the one above and that's because it's just removing the first result that it finds in the list that match the string that we put inside you could go and Target the index instead when you make this list but the way I want to create it here is that if you have a to-do list you might not want to insert the same value twice so let's say that we wanna insert number two again then we should just get a message that say that it is already on the list so let's try to make that so let's go and close the application and it's actually when we add the list items that we want to make this check so the thing I created here is an if statement inside our add list items and basically what the if statement tell us here is that it looks inside the items list that we created and say does it contain this value that we have in our text value then it will run this code but because we have the exclamation mark we do the exact opposite so all this code does just mean if this value is not already inside the items list then we will edit so we also want to say else because this is here we're going to display the actual error message or just the warning that the value is already in the list so we could go back to the documentation and I am under the components and the alert because as you can see in here we do actually have some nice boxes that we can use to say that the items is already in the list and I think I will go and use this yellow one because this is a warning so we go and copy this and put it inside our HTML here so I'll just put it under the button and of course right now it will just be displayed all the time so what we will do is to say if and then we will have a property that will be called display warning and then we can put the mod alert inside this if statement because at first when we load the page for the first time now I'll just go and copy and paste this line here so that we can go and take the display warning put it in here say that it should be a bull instant and it should be false now it will look at the if the display warning is true then it will display the mod alert but if it is false it will not display the mod alert and we start out with the page being false or the display warning to be false so what we can do is to go and say that in the else statement that the display warning should be true instead and I actually don't know if we have to also use this one we can try to test it without it and then we of course want to go and display a message so I just wrote that the value is already in the list so let's try to go and test this so first of all I want to say one add it to the list say 2 say 3 and let's try to say two again and now we get the arrow here or the warning message the value is already in the list so now we cannot have two of the same values in the list we can see 22 and and let's try to remove number two here so you can see number two is disappearing let's try to edit again and say 22 should disappear and it also works now so you can of course go and style this so it look much better because that's what we have but place a phone now but I think this is a good way to stop the video we didn't actually create you know like an icon to just click that one but we just created the hold button to be deleted when we click on it so it really doesn't matter where you click on on the line it will just disappear alright thank you for watching and please have a nice day bye

Channel: ZetBit

Views: 2,649

Keywords:

Id: uSoVJRA5-IM

Length: 16min 59sec (1019 seconds)

Published: Sat Jun 24 2023