Build an Expense Tracker with Asp.Net Core MVC

hi all welcome to coda fiction in this video we are going to create an expense tracker application in asp.net co mvc from scratch the main agenda behind this tutorial is to learn developing an enterprise web application in asp.net core in this application i have used feature rich components like form controls grid chart elements navigational controls etc from syncfusion component library it's free and one of the most favorite component library among dot net developers these components helps us to focus on the domain of the project rather than implementing inevitable features of the controls or components from scratch i am sure you will agree with me once you develop the application along with this video so please watch till the end of this tutorial since this tutorial is lengthy feel free to change the speed of the video from this option here or you could use these shortcuts to increase or decrease the playback speed so here is my visual studio 2022 let's create a new project i will select this template here asp.net core web app for mvc you can easily find this template if you select c-sharp from the first drop-down and web from the last now select the template click on next i will name this project as expense tracker now let's save the project here for this project i am using the framework.net 6. since we are doing this project for a demonstration purpose i will uncheck this option for https now click on create so here we have the brand new asp.net go mvc application now before going forward i have a suggestion for asp.net core beginners if you have not implemented the basic credo operations like insert update or delete i highly recommend my previous video where i have explained the basics of asp.net core and implemented the basic credit operations with all the details link is the in video description and inside the icard top right corner if you already know these basics you are fine you can easily follow this tutorial the main agenda behind this tutorial is to get familiar with the components that is required for building a big enterprise application so without further ado let's get started with creating models for this application before that let's install required and you get packages for entity framework code for that you can right click on this dependencies here then select manage and you get packages then from this browse tab here search for entity framework core so here we have the basic package microsoft entity framework core now from this version drop down here select the same version as that of the asp.net code that we have inside this project you can see that inside the solution explorer just expand this dependencies so here we have the asp.net core framework right click on it then go to properties whatever the version number here select the same version number for the indicate package so just select the version here click on install now for this project we'll be using sql server database so we have to install this package here entity framework or sql server now select the same version and then install now here we have the final package entity framework called tools select the same version click on install now we have done with installation of required packages now let's create model classes for required entities so the first one is category for example salary medicine fuel gadgets etc etc and then we have the transaction model itself which is to feed the transactions that we have made in various expense categories in past days so let's add those two entities as a model here so add class category first of all we have the primary key itself category id we want this key as a primary key so i will add this attribute here key now we have to add the corresponding name space for that you can use the shortcut hold ctrl then press pd or dot simple now select this using statement here after that we have the title then icon meaning for each category we will be having an emoji icon to easily identify the category so here is the property icon finally the type of the category meaning whether it is income or expense now for this string properties here it is necessary to specify the corresponding sql server data type with that we can make use of this attribute column let's add the corresponding name space you can use the shortcut hold ctrl then press period type name work 50 now let's do the same for these two properties here in my visual studio here you could see a green squiggly line it's a warning indicating these properties are not nullable hence they must be initialized within a constructor of this class in order to disable this warning just hover the mouse on any of these properties then expand this icon and then go through these options just to silence this warning here now let's create one more model for transaction first of all we have the primary key itself which is transaction id in order to specify the property as a primary key we can add this attribute key now in this transaction entity we have to save the category id which is the id of the record from this category entity here in order to specify which type of transaction that we are dealing with that will be done with a foreign key so i will explain that in a bit now after category id we have the transaction amount then we have a string property not in order to specify the description of this uh transaction if there is any which is not mandatory so i will specify the data type as nullable string now finally we have the transaction date so here it is date time as date now let's specify the default date like this date time dot now which is the current date like this default value i have to specify the default value for the category icon as an empty string and then here we have the type property specifying whether we are dealing with an expense or income so by default we will specify it as expense because most of the transactions will be of the type expense in a day-to-day life now back to this transaction model here now let's specify the category id we just need to save the category id inside this entity so that we could do this we will be having a property of the type int as category id which is exactly what we have inside this category model here see which is the primary key of this category entity now in order to keep the integrity of the data that we are going to save we need a foreign key relation between these two tables based on this property category id meaning we can't save a transaction when its category id is not present inside the base table category here now in order to specify the foreign key we just need to use a navigational property with the same exact name as that of this entity category here here we have the navigational property of the type category model and we will name this property as category itself so this is how we specify foreign keys between two entities in an entity framework code there are other ways to create foreign keys but in this situation this navigation property is more suitable since this is a navigational property when we create the actual db through migration there will not be a column corresponding to this uh we have discussed the same in one of my previous tutorial about master detail crud operations in asp.net core related links are given in video description now finally let's specify the data type for this string property like we have done inside this category here so let me copy paste this column attribute let's add the corresponding using statement so here we have defined the entity framework models now let's specify the db context for entity framework that let's create a new clause here called application db context first of all we have to inherit this from the entity framework called base class tb context let's add the corresponding using statement now let's add a constructor here now during db migration these entity model classes here will be converted to corresponding sql server tables it will only happen if there is a property corresponding to these two model classes inside this db application db context class here that can add a property of the type db set which is of the type transaction model let's name this property as transactions now let me copy paste this property for the category this db set is of the type category and let's name it as categories as you know during migration the tables corresponding to these two properties will be named as we have provided here transactions and categories now through this constructor we have to pass the db provider that we are going to use whether it is sql server or mysql etc and the corresponding db connection string so here we have the constructor parameter db context options as options now we have to pass the same parameter options to the base class which is here db context as you know the instance of this application db context will be created through dependency injection so that we can do inside this program.cs file here so here we have the dependency injection for that we just need to do this builder dot services so here we have the builder object for adding each services into it we are calling this collection of iservice collections from that we just need to call this function at db context which is of the type application db context that we have just created let's add the using statement here now into this function we have to pass the value for the constructor parameter so here we have the lambda expression with this parameter options we just need to do this options dot use sql server function can be called so by calling this function we are telling that we are going to use sql server db in order to use this function we have to use this namespace here entity framework into this we have to pass the connection string for the db that we are going to use that we can do inside this app settings.json file for that we could do this here we have the connection string inside that we will provide a connection string with a name dev connection so first of all we have the server then database and then we are using the local authentication so i would say this thruster connection as true in order to execute multiple query batches at a time we can set this property multiple active result sets now let's provide the sql server instance name now let's provide a db name it will be transaction db so far there is no db with this name transaction db it will be created during the migration so here we have the db connection string now back to program.cs file now into this function we have to pass the db connection string that we have saved inside this file for that we can use the same object builder inside that we have this configuration property from that we can call this function get connection string now into this we have to pass the name of the connection string that we have provided here so let me copy paste this name so everything is set for the db migration now before doing the actual db migration let me open my management studio now let's connect with the sql server instance here now there is no database with the name transaction db now let's do the db migration for that first of all we have to build this project after successful build open package manager console in my case it is already here at the bottom if you can't see this package manager here select project from the solution explorer then go to tools then indicate package manager then package manager console now first of all we need to create a migration with that we could do this add migration and let's provide a name i will name it as initial create hit enter as a result of this command execution there will be a new folder migrations within that we have a c sharp file with the migration name initial create it contains the c sharp code for creating the sql server db or tables with the models that we have here okay now to create the physical db according to the models we have to execute one more command update database hit enter in order to verify whether this migration when successful or not you can go to the management studio here and let's refresh this databases node so here we have the new db transaction db let's expand these tables here now you could see the tables corresponding to the models that we have created categories and transaction let's check their design as you can see each of these columns are created as per the model that we have inside this asp.net project here see all of these properties are converted to corresponding sql server table columns now in order to verify whether we have created a foreign key corresponding to this category id here with that you can expand this transactions here and let's expand this keys and here we have the foreign key now there is one thing you should know the foreign key that we have created is of the type cascade delete so whenever a category record is deleted from here the corresponding records with that specific category id will be deleted from this table also that's what we meant by cascade delete not vice versa meaning when we delete a transaction record here corresponding category id record from this table is not get deleted it only happens when we delete our quotes from this primary table categories here now back to the project now let me close all of the tabs except this categories model here now i'm going to create a controller for the category in order to implement the correct operations for this entity so solution explorer right click then add controller from this left panel we have selected controller under mvc and select this template here mvc controller with views using entity framework now for this controller category will be the model and here we have the db context application db context now we have selected all of these options here now we'll name this controller as category controller click on add you might get a rest like this during the creation of the first controller inside a new mvc project this error here is because of version conflicts in install and you get packages so in order to fix it first of all let's close or open windows related to creating the controller for some of you you might be able to successfully create your mvc controller if you are having struggles to create your first controller because of the errors that we have just seen you can go to manage and you get packages then go to this tab here updates select all of these packages and go for the update after successful update back to solution explorer let's try to create the controller again controller name will be category controller click on add finally as a result of the scaffolding mechanism here we have the controller category you can see various action methods for the correct operation of the type get and post we don't need all of them we will get into that in a bit now inside this controller here we have the constructor of the controller and it is having this parameter of the type db context so the value of this db context as i mentioned in all of my previous videos the value of this db context class instance will be passed from the dependency injection in asp.net core it will be assigned to the private property here underscore context now in rest of the action methods in order to interact with the db this private property is used now let's run this application without debug mode for that you can click on this run icon here so here we have the default view of the application as you can see this is the home page and this is rendered from this default controller here home okay to be specific the index action method of home controller is rendered so here we have the action method index and you could see the corresponding view here okay index now you must be wondering this why am i having this dark background here if you have watched my previous videos you knows that i always recommend dark mode or dark background inside this uh chrome browser here i'm using this extension dark reader just to avoid the eye strains from the white screen see right now if you're watching this tutorial from a dark room you will definitely feel the eye strains because of the white screens here now in order to avoid the eye strains because of the bright screens i always use extensions like this in my web browser or i will be using uh dark themes on our editors so hope you understood my intention here now let's switch back to the dark mode as we go forward we'll be using custom css to make the background darker without the extension here okay now as we all know the default routing of this application is configured inside this program.cs file here so first of all we have the controller name then action name then if there is any query parameter that will be considered as the id here so by default it is home then index will be the default action name so that's what we have here everything is by default value home then action now let's now we give the index action method of this category controller here see here we have the index action method get off the category controller with that we could do this category for slash index now as you can see this index action method is trying to retrieve all of the requests from the categories table and which is to be displayed within this html table here okay now before getting into that let's configure this project for incorporating syncfusion components so here is the official website syncfusion.com now syncfusion is one of the most popular name in this field of ui component most of you might have already heard of them their components are available in almost all frameworks whether it is in web or desktop or mobile applications and most of you could use them for free so that's one of the reason for including their components in this project now let's check what syncfusion has for an asp.net code developer so go to products here you could see the asp.net core now let's go to the demo now for asp.net causing fusion got around 7d plus components which is more than what we need in almost all cases so here we have a list of topsync fusion components for an asp.net core project now if you click on any of them you can see the previews or demo now let's try this chart here so here we have the preview of the component chart and you could see the corresponding preview or source code which is responsible for the demo here okay and thereby you can copy paste the source code here and you can customize the component as per your requirement now for customizing and understanding async fusion component we have sync fusion documentation and api reference for that back to this demo page here at the bottom you could see this uh link for documentation so for each component available in syncfusion you could see a detailed explanation here how to use them and how to customize them as per the common requirement for example let's expand this date picker so here we have the various discussion on this same component and under this how to session we have various customizations of this component and along with this documentation here we have the api reference for each of the component available so basically an api list out all of the uh constructors properties and methods available for a component so that you can really understand the component in depth if you have any doubt you can go through their forum here so all of these are necessary links are given in video description you can go through them later now with that being said let's check how to add or configure our asp.net go mvc project to include these infusion components so here we have this infusion documentation now first of all we have to install the required and you get packages for the components so here we have the core package which is easy to asp.net core and along with that we have to install these two dependency packages below that we have various sub packages it will be necessary based on your requirement for example if you want to work with spreadsheet you have to install this package or if you want to work with word you can install this package here like that we have various sub packages here for this project for our project we only need this co package here so let me copy this package name from here and back to the project and let's try to install this indicate package so here we are within this browse tab now let's search the package here so here it is let's install this latest stable version so here we have successfully install the core package along with that i hope these dependencies will be installed now we have to configure this mvc project as mentioned inside this getting starter session here so go to this session here tag helpers in asp.net go mvc now first of all we have to import the sync fusion tag helper to view imports.cshtml so let me copy this back to the project and pasting here inside this views view imports so here it is now we have to add this starchy reference to the default layout page so here we have the layout page under shared folder we have to paste that inside this head tag here just about this side dot css i will tell you why the style sheet that we have inside this head tag is rendered in the same order as we have given here now this style sheet side.css is a global start sheet in any mvc project where we can add our custom css now the reason for keeping this style sheet at the bottom is that we can override the style rules defined in about style sheets here okay now back to the documentation we are almost done now we have to add a script reference like we have done with the start sheet let me copy this and we have to paste that just about the head and tag as you can see here so here we go now finally we have to register the syncfusion script manager with this script tag here for that we just need to copy paste this tag just above the body and tag so here we have the body end tag so i will paste it here now we can use this infusion components simply like this uh calendar tag here the only thing that we have left here using fusion licensing i will show you how to get a free community license from syncfusion in a bit now back to the category controller now first of all we start with this create new view here which is just to create new categories now as we all know by default mvc project are using bootstrap components that's why we have the bootstrap style shape reference up here see but in this project i will be using syncfusion components wherever possible now let's navigate the create view and its action method responsible for this view here so category controller inside that we have this get action method create and it is returning a view here and it should be the inside this folder category so here we have the view with the same name as that of the action method create and this is what we are showing inside this view here now i'm going to replace this normal text box with syncfusion text box so go to the documentation here so here we have the text box now let's check what we have inside this getting started session see all of these imports for the tag helper and style sheet are already done now we just need to add this element instead of the normal text box so i will just copy this text box from here and let's replace that here in this view so first of all we have to remove this label and this text box control for the title instead of that we can paste the text box here now for anything fusion component they recommend a unique id so i will name this component as title now the placeholder will be title itself so i will copy that from this uh validation component here we will be talking about violation in a bit all of the components or elements inside this form is created with an html controller using the model that we have here this is what we have mentioned during creating the controller and because of the scaffolding mechanism it creates the controller with required views inside this category folder we want to use the same model properties for creating the controllers here we don't want to take away of the benefit of reusing the model for creating views so in order to retrieve the values from this model into this text box we can do this value which is a property of this infusion component and we just need to pass title here like we have done with normal html controls you see here we have the tag asp4 which means the value of this text box is retrieved from the property icon of this model here which is what we are doing with this syncfusion component by passing the value from this property we are reusing the model for creating corresponding html elements now in order to see the available properties of the syncfusion component text box you can go through the api reference here now within this search box you can type text box and here we have the text box under inputs click on it then you could see the available properties for this component you see here we have the property value which set the content of the text box similarly we have various properties to customize the component as per our requirement now let me save the changes here and let's build this project now let's check how this thing fusion component looks like you see here we have the text box for title and which is different from the default html text boxes here from bootstrap i want to talk about this warning here this is showing because we are using this infusion components without registering the license for now let's ignore that we will get into that in a bit now let's change the appearance of this text box like this one here first of all the reason of this text box appearance is due to the default style sheet from our sync fusion which is what we have imported inside the layout page here this one material.css instead of that we'll be using a different style sheet so i will just comment this start sheet reference here now back to the documentation now inside this appearance session here you could see the built-in themes now for our project we'll be using bootstrap dark p with that here we have the corresponding style sheet reference so this dark theme will give a dark background for all of these inclusion components as i mentioned the current dark background is from this uh extension here from now onwards i will disable this extension for this website and then we'll be making use of this start sheet so first of all just copy this link reference and let's paste that here instead of this style sheet we have to use this one build the project back to the application boom that's it so here we have a sync fusion component and it is having a dark background now the end of web page background is not changed to the dark mode we have to do that by custom thesis but that back to the global start sheet here side dot css so here we have the bootie first of all let's set the background color to this custom color here and then i will set the foreground color to white so that will solve the problem for now further customization will be done as we go forward now we have stuck with the placeholder that we have provided inside the text box here you see it's always showing here instead of that either it should work as a placeholder or it should work as a label as we can see here so that back to the textbox documentation now if you scroll to the bottom you could see this session floating labels meaning the placeholder value that we have provided will act as a label for the text box for that we can make use of the property floor label type you could see the same api property inside this api documentation here so back to the project floating label type to always let's build the project back to the view boom that's it still the value is title which is because of directly passing it as a string instead of this just pass like this model dot title let's build the project again back to the view here we are getting a nut object reference error let's check the corresponding action method so here we have the action method which is returning the view and inside this view we are not returning an instance of the category model which is what we are expecting with the model of this view here so i will do this we'll just return a new fresh instance of the model new category build the project back to the view now it works perfectly fine now compared to the default text boxes here this sync fusion text box looks somewhat smaller now to fix that let's look what we have inside the documentation here go to this size mode under appearance as mentioned here we can make the components looks bigger we just need to add this class to the body of the application so based on the absence of presence of this class same fusion components will be made bigger okay so let's paste the class here and we have to do one more thing as mentioned here we just need to change the overall font size to x large so let's copy paste this to the global style sheet boom that's it now if you go back to the view here we forgot to add the name attribute for this control which is one of the important thing for a text box or a form control because the data from this text box or input controls will not be posted to the corresponding post action method of this controller here we have the post action method and we are expecting this title property here it will only be posted if the corresponding html element is having the same name attribute so we have to pass the name here title but you might be thinking it is better to use normal html elements instead of syncfusion components because we are adding attributes which are not needed with the default method because of this asp4 attribute the default sp4 attribute will append name and value from the map property to the corresponding input control so if you are a lazy person like me or if you have thought like that syncfusion has a solution like this one here here we have the attribute asp4 let me copy paste that here instead of this asp we just need to use this prefix ejs that's it now we don't have to separately mention the name and value of the control it will be applied because of this attribute here and we don't have to use this at the rate syntax it is already assumed instead of using two html elements here we are using single sync fusion component now like this we can use rest of the form elements from syncfusion alternatives so let's replace this icon controls with syncfusion components so i will just copy paste this for icon here and let's change these attributes accordingly so here it is now it's necessary to have a considerable gap between these form elements now currently the controls are wrapped within this bootstrap class form group instead of that i will use this bootstrap class margin bottom of the read three so i will be applying the same class for rest of the form elements inside the application now before going forward i know this thread a license warning is really bothering you so let's look how to configure the app for a community license from syncfusion so here we are inside the official website now click on free trial here at the end you will see a section called free products so here we have the community license which offers a free license for organizations with maximum five users and maximum one million dollar revenue i hope most of us are eligible for this community license so click on download here now we have to sign in with the credentials of either of these platforms so i will go for linkedin now if you don't have a linkedin profile please make one and use the same credentials and then sign in then accept the terms mentioned here now as a final step you have to provide the company name and phone number now i want to remind you something here make sure to provide a valid contact number they might want to know whether you are eligible for the community license or not now accept the terms and conditions from syncfusion now click on create so here we have successfully created the account now in your email inbox there will be a new email with the welcome message and here we have the link for creating a password this password is not necessary for the mvc application here but for future login operations you need this password so make sure to create one now currently there is no license added to this account now to add the community license you can go to this uh url here downloads forward slash community license i have given the link in video description so here we have the message saying congratulations on claiming your free community license now expand this drop down here go to my dashboard then under license and downloads go to downloads and keys so here we have the community license added to our account now we'll be using the keys here to configure the app now we have to register the license inside this mvc application the documentation here will guide you through the process so here we have the session for licensing first of all we have to generate the license keys which is just by uh selecting this option here get license key we have to specify the platform which is asp.net core and we have to select the version that we are using which is clearly mentioned inside the reference that we have used inside the layout page see here we have the version make sure to select the same version from this drop down here click on get license key so here we have the generator license now we have to register the license with the key that we have just created so here we have the steps for dotnet 6 and which is here so we just need to copy this paste that inside the program.cs file now let's copy paste this license key and let's build the project and let's check whether we have the same warning or not boom that's it now let's find a syncfusion alternative for this type control here actually it is meant to save or feed whether the category is of the type expense or income for that normally we use a group of radio buttons so that we can select one option at a time from multiple options in this documentation here it is mentioned under this button group here as you can see this controller is used to group buttons like this but instead of buttons we can use radio buttons also which is mentioned inside this selection and nesting for single selection from multiple options we can group radio buttons like this here each radio button is coming with a label along with it and the under radio groups is grabbed with a div with the class e button group so i'll be using this same group of radio buttons for this type control here first of all i will copy paste the demo code so here we have the accessing controls for the type let's replace that with the copied code here we have three radio buttons instead of that we only need two so let me remove the extra one here so as you can see type is equal to radio and we need an id and we have to assign same name for all radio buttons inside the group then only the corresponding value will be posted to the corresponding property type here so we have to use the name as type for both of these radio buttons now for the first radio button the value will be expense we have to show the same inside the label beside it so here we go now for the second radio button the value will be income for radio button we need one more property called checked and we want to assign a boolean value to mark whether this radio button is checked or not with that we can compare the value inside the model so inside the model we have the property type if it is equal to expense then this radio button will be checked let's wrap the entire ca sharp code within parenthesis now by default the value of the property type is expense it will be the case in most of the transaction so that's why we have set it as expense as a default value now let's copy paste this for this income radio button here instead of expense let's change this to income let's build the project and back to the application boom that's it now i want to show this group of radio buttons as a first element inside the form so back to the form let's move up here in the order and instead of the class form group we're going to use this clause here now as you can see we need some customization for this group of radio buttons like the shadow when we select a radio button from the group now in order to customize the control i'm going to add a custom css class here custom rbt glue now let's define the class inside the global style sheet here this is for radio button group so here we go first of all we will assign the hundred percentage and each of the radio button inside that will be having a fifty percentage width and then here we have some extra styles to make it uh more appealing don't worry i will be providing the complete project repository link in video description you can copy it from the build the project and back to the application boom that's it now let's try to submit this form so that we can create new categories so first of all select the expense category here so the first category will be travel now through this icon control here you can provide the emojis like you can see here so in order to provide an emoji here you can use the shortcut on your windows hold windows key then dot or period simple unfortunately in my system it's not working since i'm using the latest windows 11 os so if you are facing the same problem you can go to this website here emoji pedia and then provide a description of the icon that you are looking for so here we go let me copy this and paste in here now click on create boom that's it so hope you can see this category here travel with the icon that we have provided we'll be replacing this normal html table with sync fusion grid which is having plenty of features that you can benefit from so i will be getting into that in a bit now you can verify whether this record is inserted to the table or not so here it is now let's create one more category of the type income it will be salary now let's copy an image from here i will look for time so that it will imply something of professional submit the form that's it so the radio button group is working perfectly fine now before replacing this html table with the grid component let's deal with the edit operation or update operation for that here we have the hyperlink edit and here we have the edit form with corresponding category details now this view here is different from the create view that we have just designed here okay this is designed with the create view here and this edit form is designed with a separate view under this folder category here okay and you can see the corresponding get and post action methods for edit operation as always i will be combining this both create and edit operation into one action method and same in case of the view also let me show you that here first of all i will be removing this edit action methods both get and post and let me rename this create action methods here as add or edit let's do the same for this post action method also now let's delete this edit view here and let's rename this create view to add or edit now we have to modify these hyperlinks here so back to the index view here the action method will be add or edit and let's do the same for the edit hyperlink here so both of these hyperlink will make a get request to the same action method add or edit so we have to modify the corresponding get action method accordingly first of all i'll be adding a parameter id by default its value will be zero so for create hyperlink here we are not passing any parameter id you could see the id here passed to the add or edit so if id is not passed the default value 0 will be taken so if id is equal to 0 to the view add or edit will be passing a fresh instance of the model if that's not the case we have to return a form for the edit operation so in that case we have to return the category model for the given id but then i will just copy paste this line now in order to return the category for the given id i could do this underscore context dot categories dot find method can be called inside that we just need to pass the id now let's build the project and back to the application here now let's try this create new link it's perfectly fine returning a fresh form let's try the same for this edit operation boom that's it here we have the form populated with the given category id 1. let's try the same for this income record yes now we have to modify the view add or edit accordingly now most importantly we have to modify this form post action method here we just renamed it to add or edit now this form is used for both insert and update operation for edit or update operation we need an extra property which was an optional for the insert operation if you check the opposed action method here we have binded these properties from the form category id title icon and type for category id there is no input control inside the form so while posting this form the value corresponding to the id will not be posted to this action method here it was not required for the create or previous operation since we are combining both insert and update operation in case of edit operation it is a must with that let's add an input hidden field here name it exactly as the property name category id let's assign the value from the model now previously while designing the form for insert operation i forgot to replace this button with this infusion button so let's do that before going forward so you could see the documentation of a button here here we have the corresponding tag ejs button so let's replace this entire div with the button ejs button id will be submit this button should be of the type submit and the content which is to be displayed inside the button will be submit so here we have the submit button i want to change the color of this button which is what explained inside types and styles here we just need to assign corresponding color class to this property css class these class names are similar to the bootstrap color class names we have to show the button in green color so i will copy paste this property here back to the app that's it now let me remove these extra headings here and let's increase the grid column to 7 here so which is taking more than uh what we need so i will do one thing let's reduce the width assigned to the content in layout view so here we have the layout let me collapse this top nav here so here we have the bootstrap class container and we need to add a top margin here so margin top of the range five and let's wrap everything within a div with the class raw now let's justify the content at sender now for the content we'll be taking only uh 10 columns so call md10 now let's move this content to this column here now rest of the rearrangement can be done inside the edit view here let's grab everything within a div called widget this is a custom class that we are going to define now let's assign maximum padding from all the sides and let's move the form into the new div now let's define this class widget so here we have the style sheet side.css so here we have the widget class set the border radius and background color boom here we go now since we have a small form here we have left a considerable space on right side in order to fill up that i'm gonna add an icon to fill up the space available here which is also available in syncfusion you could see that under appearance icons it contains most frequently used icons the documentation here clearly explains how you can use these icons now let me enable this a dark mode here now you know what syncfusion component supports other icon libraries also hence i'm gonna stick with phone over some icons which is my go to icon collection so let's grab corresponding cdn reference phone awesome icons cdn reference most of the time i use cdnjs.com now let's copy this all dot windows css tag here let's paste that inside the layout page just before this site.css now back to the add or edit view we already took seven columns here now we have left five columns so let's use that for the our phone over some icon inside that will be having a div with the class that we have just created which is widget now we just need to find an appropriate phone over some icon for category so go to the corresponding website phone awesome dot com forward slash icons and i will be looking for this icon here shapes this one which is more suitable for indicating uh categories click on this i tag it will copy to the clipboard and paste it over here now to enlarge this icon we can use this phone over some class part 2 xl build the project back to the app excuse me sorry it is showing just beneath the form so here we have the call md7 div so let's place it after that now for the proper alignment we can use the bootstrap classes now for 100 percentage height we can use this class display will be flex justify content at center horizontally line items at center vertically now finally let's apply a different background for this icon here now let's remove this hyperlink back to list which is not necessary instead of that we'll be using breadcrumb from syncfusion and also let's remove this photo from layout okay that's enough with the design let's move on with the update operation for update operation we are showing the form with the corresponding the code details now when we submit this form we have to update the changes that we have made inside the form for the corresponding record so here we have the corresponding post action method add or edit so for insert operation we are just adding the category or model to the context now here we just need to add the if clause to check whether we have an insert or update operation we can check that from the category id itself if it is equal to zero we could say we have an insert operation otherwise we have an update operation so that's what we are handling inside this else block if we have an update operation we'll do this context dot update method can be called into that we can just pass the category model independent of whether we have an insert or update operation we just need to call this save changes async method and finally we will return the index view let me build this and let's check whether it is working or not now in order to check whether this is working or not let me append few aztec marks at the end submit the form it's not working something is not correct it should be related to the hidden field because that's the only change that we have made inside the form so here we have the hidden field and its value is category id which is as it is this string that we have passed here so instead of that just use this at the rate index model dot category id build the project back to the view now it's fine let's add few aztec marks at the end submit the form boom that's it so here we have the updated category now we'll be doing the delete operation later and we also need to implement form validation here before that i just want to replace this html table with the syncfusion grid which is what i'm most excited about so let's do that first now the list of inserted records are achieved inside the index action method here and which is displayed inside the index view for the category now let's get rid of this table here now go to the documentation now you could see the component grid now here we have the controller ejs grid now everything about this component is documented in detail here okay now let me show you how to use them in our project for listing inserted categories let's add the bootstrap grid system like we have done with the addo edit view now inside the second column here we can show an icon phone or some icon like we have inside this uh form here so here we have the component ejs grid so here we have the id now the list of categories that is returned from the index view can be made available inside the view with the model syntax here now we are going to assign that to this component with the property data source which is a property available for the grid so model if you want to know the available properties for the component you can go to the api reference like i have shown before search for the component you see the component grid under syncfusion ejs creates and here we have the list of properties available for the component now in order to configure columns inside this grid we can make use of this component grid columns for each column we could do this grid column specify the header text first before we have the category itself which is the title now with this property field we have to specify the uh property which is to be binded to this column here so we are going to assign this title property to the first column now let me copy paste this below now let's specify the type here and here we have the corresponding property and then we'll be having a column called actions inside this column we'll be showing the buttons for edit and delete operation we can do that in a bit now let's build the project back to the view boom that's it so this is how the default grid looks like now first of all i want to remove this grid lines here so that we can make use of this property grid lines is equal to none now let's add some custom css rules for the grid inside the global style sheet site dot css now for better clarity inside this custom css source i will add everything in ascending order so let's put the grid here now i will paste the css rules that i have prepared for the grid now please excuse me for putting these css rules directly without explanation if you are going for the explanation now this tutorial will be even longer so we don't want that you can see all of these classes are from this infusion library itself you can see them if you inspect the controller let's save and build the project and back to the view so this is how the component looks like with the custom css source that i have just added now for better demonstration of the features available inside this grid let me add few more categories into the form for that for now i will be using the url here add or edit in a bit we'll be adding a separate button to navigate the fresh form now in total we have 10 categories here now while adding categories we have mentioned the icon in a separate text field now we want to show the same inside this table here but that back to the category model we are going to add a new property just for the purpose of combining both of these title and icon and we'll be showing that property inside the first column here this property has nothing to do with the structure of the corresponding table so we have to mark this with the attribute not mapped now here we have the property of the type nullable string and let's name this property as title with icon now we are not going to use this property for assigning the value so let's remove this set accessor here now we could do this return so we just need to concat both icon and title in between them let's add a white space now let's use this property for the first column here build the project back to the view that's it now instead of showing this category type as expense and income i want to show them within bootstrap badge which you can see inside the documentation of the bootstrap here now i want to show them inside these badges here now if you have such a requirement for displaying the data within a column we can use templates within grid let me show you that here instead of directly passing the field as type we can use this property template now all of these are mentioned inside the documentation let me show you that first under columns you could see this column template you see here we have the template attribute and the template is defined here within a script of the type x template we'll be doing the same so let me copy this and just paste it over here the corresponding id will be type column let me get rid of this default div here now we can have the bootstrap badge like this class is equal to badge now here we have to put the property type from the model here for that we can use this index with the dollar sign just like the uh string interpolation in javascript type so this property will be replaced with its value during the rendering process now let's paste this id here now make sure to prefix the id with the hashtag like this now along with the badge we have to add the background color so based on whether we have an income or expense type we can change the background color for that we can have this if close just use the dollar simple and inside that we have the if clause let's specify the condition here if type is equal to income we will apply this background color bg success now here we have the else part now let me duplicate this pan and let's move it over here for expense background will be danger bg danger at the end we have to close the if close like this sorry now that's fine now before going forward let me apply my latest favorite phone for the application so go to google fonts name of the font family is inda so here it is select the weights uh 300 400 and 700 now let's copy paste this link reference inside the layout view i will just paste that just above this site.css now open site.css and let's apply the phone family here and let's apply in general with this asterisk selector so this will apply the phone family to all the components and here we have to exclude phone awesome icons so we can have this and if you want to exclude the syncfusion icons you could do this save this build the project back to the view that's it now we'll be populating this action column in a bit before that let's apply the uh features like sorting and paging into this grid component here we'll be using the default feature without any modification you can check the documentation for further customization so for sorting we could do this allo sorting is equal to true now we could do the sorting like this now let's enable pj for that first of all we have to set the property allow page now here you could see the default paging now in the previous custom css source that i have applied for the grid i have customized these paging components also now if you want to customize that also we can use this tag page settings we can specify the page size here for now let it be five so here we have the first page and here is the second page now what about this last column actions inside that we have to show the buttons for edit and delete operation before that let me assign width for last two columns so that we can make use of the property width so these two columns will take the width as allocated here and rest of the space will be allocated for the first column now in order to render the buttons for edit and delete we have to use the template like we have used for this second column now let me copy paste this script template the id will be action column template let's paste that here now let's get it off this if close now let's enclose everything with this div display will be flex plex raw then justify content start now first of all we need an html element for the edit operation so here we have an anchor element and let's apply these bootstrap classes here now for an edit operation we just need to make a get request to this action method add or edit with the corresponding id so we'll be passing the corresponding url here over slash category over slash add or edit and here we just need to provide the id for the corresponding record with that we can make use of the string interpolation as you can see here category id and remember this these properties category id and type are present inside this data source that we have assigned now within this hyperlink we'll be showing a phone awesome icon for a pencil let's save this and build the project back to the view something went wrong i think we have provided the id without the prefix pound simple yes it is the pencil icon for the edit operation is shown here but it's not clear now let's try whether it is working or not so here we have the record for travel category now let's change this title to the previous value submit the form it is working properly fine if you click on any of these button you could see the outline so let's deal with those uh appearances so back to the start sheet here we deal with button styles so here we have the button from bootstrap let's customize it for the focus and active state outline set it as none then box shadow to none now let's add few css rules for the hyperlink let's disable some default uh hyperlink styles for that we'll be using this class no anchor decoration and for the hover state also text decoration to none and let's inherit the color let's apply this class to the hyperlink here let's build the project back to the view that's it now let's implement the final delete operation for that by default inside the controller we have two action method one is of the type get and one is of the type post okay and here we have the corresponding view delete as i have shown in previous tutorials in order to implement the operation we only need the delete post action method and we will make a post request using a form element from the front end so i will get rid of this get action method here and let me remove this delete view also and this method is no longer needed in this project so let me get rid of that now let me check what are the unused methods or action methods inside the controller here you could see the action with the details of the type get it's not that helpful to show the details of error code so i will just remove this get action method here and let's remove the corresponding view also now back to the index view along with this edit button we need a button for delete operation and also it should make a post request instead of a get request as you can see here the edit button is implemented with an anchor element here and it is making a get request to this action method add or edit of the type get but for the delete operation it is always recommended to use a post request we can delete the course within get request but it is not a best practice because it is easy to make a get request with just passing the url inside the web browser it's not that easy to make a post request we can even add more security into a4 let me show you what i mean along with this angle element we'll be adding a form and let's specify the action here let's specify the post url category 4 slash delete then the id of the record which is to be deleted so delete and the category of the corresponding raw will be replaced here and let's specify the method as post inside the form we just need a button of the type submit let's add few bootstrap classes and here we have the custom class no anchor decoration just to disable styles similar to the anchor element inside the button we'll be showing a phone awesome icon and let's apply the text color as danger from bootstrap so this is how the button looks like now if you click on this submit button it will make the post request to the corresponding action method here and the corresponding record will be deleted because of the default code within it first therefore it will check whether the db set is null or not and then it will retrieve the corresponding record for the given idb which is received with the id parameter here if there is a record then corresponding record will be deleted and finally we will be redirected to the index method now before making a post request for the delete operation it is always recommended to get a confirmation from the user side because delete is a loss of data so that i will be using the javascript confirm method so here we have the on click event inside that we will just return the value from the confirm function now we have to pass the question here are you sure to delete this record now there will be a syntax problem because we have enclosed this javascript code within the string and inside that we have a nested double quotes in order to avoid the confusion instead of directly providing the double quotes you could do this and simple then code then a semicolon and let me copy this and let's replace these double quotes also now there is something we should be aware of now for any post action method created through scaffolding mechanism you could see this tag here validate and the 4g token you could see the same for this add or edit post action method also now let me brief you how it works the get action method of add or edit will return a view which is here which is this form here whenever mvc renders a form into the view it will also add the anti-forgery token and while posting this form here the same token will be written to its post action method so during the validation process it will verify whether the received anti-forgery token is same as that we have generated and returned during the get action method now the same should be happen in case of this form that we have created the only difference is that the anti-forgery token will not be there by default inside this form because we are adding that as a template inside this script type here so we have to explicitly mention we need an anti-forgery token for this form for that we could use this html dot and the forgery token okay let's build this project and back to the view let me delete this commission category now let's confirm the operation boom that's it so here we have implemented liquid operations using scene fusion components similarly next we are going to do the correct operations for the entity transactions apart from these syncfusion components we have discussed we will be discussing about syncfusion alternatives for commonly used components like drop down list date picker numeric updown etc before that i want to add something common to all the pages inside the application which is the title and also the breadcrumb which is used for showing the location of the page inside the application first of all start with the fab icon of this application which you can see inside the web browser tab up above so the default fab icon can be seen inside the application inside this www root here so this is what i have done i have created a logo which is a png file okay and with the help of this website here i have converted that png to file icon which you can see here inside this folder okay we just need to drag and drop these files inside this folder here confirm the replace operation back to the application let's reload this it's not showing the new fab icon so i will do this in my chrome web browser control h for history now let's clear the browsing data and then we just need to select this option for cached images and files clear the data back to the app let's reload the view that's it now inside this tab title you could see the action name index and then the name of the application if you go to the for it's different create which was the previous name of the view and then the name of the application which is applied inside the layout view so let's correct that here here we have the layout view and this is for the title is applied the view data title is applied from our views that you can see inside this index.cshtml here now let's remove this from here and from the add or edit view here we are not going to use this view data and let's change this title here we just need the app name which is expense tracker now let's add a heading session describing what this view is all about for that back to the layout view just above this render body we are going to add a new div using the bootstrap grid system now here we have a flexbox div now let's apply a bottom margin here and here we will be having the breadcrumb component in a bit just about that let's add a div to describe the view and here also we have some bottom margin inside that we have an h3 element now we'll be saving the title from each of the views that we have into this view data here we'll be using this key page title so let's pass the same from our views so here we have the index view here i will set it as categories and let me copy paste this into this add already view now inside the view we have a form for both creating a new category and editing an existing category so based on the value of the model id we can decide the title so this is what we do we have a ternary operator with the category id if it is equal to zero we'll be showing create a new category else edit category let's build the project and back to the view that's it so here we have the index view let's go to the edit view so the title is edit category now let's check the title inside the fresh form for that i will edit this url up here so here we have the corresponding title now let me go back to the list of categories at present if you want to create a new category we have to edit the url manually in order to avoid this let's add a button inside the heading session here so back to the layout we'll be adding a new div here inside this we can have the button before that we need to enclose this heading in another div like this and we'll be applying this bootstrap class plex grow one okay now let's wrap the heading with the new div here now this is how it works inside the second div we'll be having a button and rest of the space after the div will be allocated to the heading div here so here we have the button anchor let's apply the bootstrap classes and here we have the link reference and this will be passed through the view data so it will be assigned from this page action url now the text will be assigned from another view data page action text now this anchor button is not necessary in all the views only when this view data is assigned so we'll be having this if clause will be showing this anchor button only when this view data key is assigned now i want to show this action button inside this index view only not inside this add or edit view okay so let's assign those few data inside the index view for creating fresh category the url will be like this category for slash add or edit boom that's it now in order to create a new category we can make use of this button here now in order to go back to the list of categories or the index view we'll be adding the breadcrumb component just below the title here you can learn more about the component bread come from this syncfusion documentation here see in order to add the component we could do this ejs breadcrumb also for the id let's keep it as it is we can make the customization in a bit let's build this back to the view so by default it looks like this now instead of this separator as a forward slash i want to use phone awesome icon as a separator so let's make the modification here we can use this property separator template so here we go html raw since we are passing the html element into this property we have to use this raw method so here we have the span element and let's apply the corresponding phone over sum classes here make sure to close these tags accordingly otherwise you will get the red squiggly line as you can see here let's build the project back to the view so that's it now let's go to the edit view so here we have the corresponding breadcrumb now if you want to go back to the list of categories you can click on this hyperlink here now in this breadcrumb i just want to disable the default hyperlink styles here so let's customize that inside the global style sheet for now we'll just paste the custom css here so basically this infusion component will be having this class by default and here we have suppress the default anchor element styles now it looks fine so that's enough with the category controller let's create a controller for the transaction entity and let's do the correct operations like we have done here so we'll be following the same procedures so first of all let me create the transaction controller select the transaction model and i will name this controller as transaction controller now click on add so here we have the transaction controller created through this cap folder mechanism and hence it has the default action methods now to implement the current operations we'll be only using the action methods like we have used inside this category controller here so first of all i will remove the extra action methods here we don't need this djs action method we'll be renaming this create action methods into add or edit in a bit now let's remove this edit post and get action methods we don't need this we don't need this get delete action method and this function will not be used so let me get rid of that now let's rename this action method to add or edit like we have done with the category controller now let's make the corresponding modifications inside the views folder here so here we have the folder transaction we don't need these views delete details and edit let me rename this view here to add or edit okay that's enough now let's build this project and back to the view sorry something went wrong sorry i accidentally removed the folder for controllers so go to the recycle bin so here we have the folder let's restore it back to the solution explorer here we have the controllers folder let's build the project again now let's navigate into the transaction controller so here we have the index view of the transaction controller first of all let's correct the heading part here so let me copy paste these view data from the category index view into the transaction index view page title will be transactions page action text will be new transaction okay and here we have the corresponding action url transaction for slash add or edit and let's get rid of these extra hyperlinks here build the project back to the view okay that's it as you can see this header part is already designed inside the layout view that you can see here so here we have the layout view and inside this div we have designed the header that we have just modified and the dynamic values that we want to apply is patched from the corresponding view index okay now let's start with the transaction form here so this is the default form with the bootstrap ui now let's replace them with syncfusion alternatives so back to the addo edit view of the transaction controller first of all let's get rid of these heading part here now let me move this category add or edit along with the transaction addo edit so here we have the view data that we have passed from the category o let's copy paste this into the addo edit view here so basically here we are trying to dynamically provide the page title based on the primary key in case of this view transaction id is the primary key if it is equal to 0 the title will be create new transaction if transaction id is a non-zero value then the title will be edit transaction now let's compare this arrow edit view with the category here first so far we have applied this class called md7 so let's apply the same clause here now the form will be wrapped with a div like this let me collapse this form and after the form we have displayed a for our sum icon just to fill up the space so i will just copy paste the same div into the transaction form here let me duplicate this let's open the category form okay now let's apply a phone or some icon like this so here we have the corresponding phone over some icon let's build the project sorry here we have the error object reference not set to the instance we forgot to pass a fresh instance inside the add or edit action method oh now let's pass the first instance of the transaction here build the project reload the view now let me get rid of this back to list hyperlink so here it is now let's replace these controls one by one with syncfusion components before that i think it would be better to shoot the background color between these two widget divs here same in case of this category form so here we have the transaction addo edit view the background color of this tip is applied from this custom css and that of the second div widget the background is applied with this style attribute here here the background applied inside the widget class is overridden with this style here in order to switch the background color we just need to move this style attribute to the form widget here that's it now let me do that for the category add or edit view also build the project back to the view boom that's it i think this is better because this background gives more attention to the form here let's reload the view now first of all i want to replace the date picker here so back to the transaction add or edit view here we have the form first of all let me replace the form groups with the bootstrap class that we have applied inside the view here which is mb3 so i will do this open the find and replace window for that you can use this shortcut hold ctrl then press f point form group class and let's replace them with mp3 make sure we have selected current document now click on this replace all button now here we have the date picker let me drag and drop this here so that it will become the first element inside the form now let me remove this input label combination now back to this infusion documentation here you could see the component date pickup so this is the component that we are going to use with the given documentations here you can customize the component as per your requirement so let me copy paste this into our project id will be date we have not yet implemented the validation we will do that once we completed with the current operations of this transaction now like we have done inside this category add our edit view will be mapping the corresponding model with the property here ej is 4. we have done the same for all of the controls inside the category form now let's do that for this component here ejs4 so here we have the transaction model inside that we have the property date and we'll be mapping the component into this property let's add the placeholder it will act as a label for the component and also we have to set this property as always plot label type now there is a property for this typical component which is format with that we can specify the date format that we want to show inside the component so it will be mm meaning the abbreviation of the month then date and then the last two digits from the year so this is how the component looks like i think this is more than what we need the default value of this date property is already assigned inside our model here so that's what we are seeing by default if you want to customize the component as per your requirement you can go through the documentation here there are plenty of customizations available just go through them now we have to find a syncfusion component for this category id as of now we already have a collection of categories here we just need to show them inside a drop-down list here and once we select a category the corresponding category id will be passed to this property category id so go back to the documentation here here we have the component drop down list we'll be doing some customizations on this component because i always concerned about the drop down list in any of my projects so first of all let me copy paste this component let's get rid of these uh category id controls and let's replace them first for the id ddl meaning drop down list or category now let's map this component to the category id property from the model now we have to provide a data source meaning we have to pass a collection of options to be shown inside the component the detailed documentation is explained inside this data binding session so first of all from our transaction component we'll be retaining a collection of categories okay that i will be creating a new method and this is not an action so we have to mark them with the attribute a non-action method not something that can receive requests like these action methods here okay so here we go populate categories so here we have a variable category collection in order to retrieve all of the categories that we have we already have the auto suggestion from the visual studio so in order to use them just use the tab so basically we are using the db context from that we have the categories db set it will return all of the categories that we have from our category table now i just want to convert this into a c sharp list so to list function can be called so all of the categories that we have inserted into the corresponding table will be the inside this collection here now along with that for a drop down list we need a default first option so here we have an object of the category model as default category let's create a new instance of the class and let's populate the corresponding properties category id will be zero then the title it will be choose a category now let's insert this default category into this collection here so this will be inserted at the zeroth index meaning the force element inside the collection now let's save this into the view back with the key categories so with this function we have just saved the collection of categories into the view back now let's call this function inside the add or edit get action method here let me replace this default view data here which is also returning the collection of categories instead of that we will do this now let me copy this view back and let's apply them into the component here add view back let's build this project and back to the view so here we have the drop down if you expand the drop down you could see some ghost options without showing any text so there are some customizations left first of all we need a placeholder which is to be shown as a label and let's float the placeholder now inside these options we have to specify which property that we want to show inside the text and which is the corresponding option value for that we can use this sub tag from the component e drop down list field category id will be treated as the option value so this property must be the inside the data source that we have applied here okay and inside the option we want to show the property title so we can use this property text now let's check whether it is working or not boom that's it now instead of the property category title we are going to use this property here title with icon so that we can also see the corresponding icon which is more pleasant on the eye so let's replace that here that's it now let's add the provision for filtering options from this component here which is explained inside the documentation here under filtering for that initially we just need to set this property allow filtering as true now if you expand the drop down you could see a search box here so let me try travel it's not working because these options are having an emoji so in order to avoid this problem we can set this property ignore accent as true and also set the filter type as contains now it is working properly fine now if you want to limit the height of this pop-up here we can set that with the property pop-up height so that's all about the drop down now let's replace this amount control here by default it is using a numeric text box so let's use the corresponding alternative which is numeric text box so here is the component so let me copy this and replace the same inside the view here id will be amount let's map the corresponding model property and then here we have the placeholder and let's set the float label type build the project back to the view so here we have the syncfusion numeric text box here we have the up and down arrows we should set the minimum value as 0 then we can assign this property min with zero and for formatting the amount here we have the property format into that we can specify the format c0 meaning currency without a decimal point so here it is here we have the formatted amount and here we can't go below zero so that's all about the numeric text box now let's replace this final input text field for note which is just to enter the remarks or description of the transaction it will be a normal text box like we have used inside the categories form here like this title so let's copy paste the corresponding component from the form let's get rid of these default html elements and here it is this is for not placeholder will be node and the corresponding property mapping is to the property node so this will be a normal text box we want to make it a multi-line text box for entering multiple line descriptions so that we have to set this property multi-line let's try whether it is working or not so that's all about the form controls now let's replace this submit button here that i will copy paste from this category form so here we have the category arrow edit view and let's copy paste this button so here we have designed the form as per our requirement now when we submit this form form data will be posted to this action method create which was the default action method we have changed that into add or edit now let's check what we have inside the action method add or edit of the type post so this will be enough for the insert operation so if the model is valid the insert operation will be happen and we will be redirected to the uh index view if not the same we will be returned with the validation address and here again the collection of categories is written for populating the drop down instead of this we can make use of this function here validation of these entities transaction and category will be done later for now let me tell you this this property category of the type category is added as a navigational property just to form a foreign key between these two entities category and transaction so during the validation we will get a validation error for this navigational property because while posting data from this form this form will not be posting values for this property category only these properties will be binded so in order to ignore violating this navigation property here we will make this property as nullable by just adding this question mark at the end now let's build this project and let's check whether the insert operation is working or not when we start using an expense tracker application first therefore we will be entering the cash that is what we have currently or you could say cash in hand and i have added a category here open balance let's enter the amount here say 10 000 and here we have the description cash in hand and let's set the date first january of this year submit the form boom that's it so here we have successfully created a transaction now we'll be replacing this table with syncfusion grid after the edit operation here first of all we have to change this hyperlink text action method to add or edit so here we have the index view of transaction to add or edit now this hyperlink will make a get request to the add or edit action method of the transaction controller here currently this action method will retain a fresh form for the insert operation now to incorporate the edit operation first of all we'll be adding an id parameter by default its value will be 0 if id is equal to 0 then we have an insert operation else we have an update operation so we have to return the form with the corresponding values populated inside the form that i will just duplicate this line and let's move it over here let's copy paste the similar statement from the category controller here we have transactions db set so here we are returning the corresponding transaction record for the given id so let's build this project and back to the view and let's test this edit hyperlink here that's it now inside this form like we have done with the category we need to add one more input hidden field for the primary key like we have done with the category here this hidden field is added just to return the value of the primary key when we submit the form so let me copy this and pasting over here inside the transaction form name will be transaction id and let's modify this property accordingly now let's update the post action method and or edit for the update operation inside the action method we already implemented the insert operation the insert operation will be happened if the primary key is zero so here we go transaction dot transaction id if it's equal to zero else we'll do the update operation context dot update transaction that's it build this project and let's check whether the update operation is working or not let's change this amount to 12 grand submit the form boom that's it now let's deal with the transaction grid it is almost similar to the grid that we have inside the categories here we don't want to go through the same explanation again so i will copy paste the code from this grid into this transaction index view and we'll be explaining things that are new to the transaction grid so here we have the category index so here we have the enter bootstrap draw inside the first column we have the grid and inside the second column we have this phone awesome icon actually instead of this background color i will use the background color from the widget class that is applied here okay now let me copy this entire row and let's paste that inside the transaction index here we'll be using the same phone over some icon that is used for the transaction for so let me copy paste this now let's deal with this script here id will be transactions let me move this tab along with this transaction controller here from this index action method we are returning a collection of the transactions that we have inside the table and we are assigning the same into this data source property we need to show the grid as it is so these properties regarding uh appearance of the component will be as it is now let's modify these columns here first of all we want to show the category of the transaction so here we have the transaction model regarding category we have this category id and this navigation property category there is no category title as it is so let's add a note matte property which is of the type null level string category title with icon along with the title we need the corresponding category icon inside the property we only need the get accessor inside that will return a string after the ternary operator so first of all we will check whether the category is done or not if it is null we'll be retaining an empty string otherwise we'll concat the category icon with the category title in between them we need a white space now let me explain how this works let's check the transaction controller index action method in order to retrieve the list of transactions we only need to retrieve the corresponding db set transactions now what does this function does is for each transaction we have based on the category id corresponding category record details will be fetched into this navigational property category and that's what we are using inside this get accessor here there will be situations when category navigation property is null in that case we will return empty string otherwise we will concat those two properties let me copy this property name and let's use that inside this grid inside the first column okay so the header text will be category inside that will be showing the category title with the icon as a second column we want to show the date of transaction so field is equal to date as it is and let's set the width accordingly and then here we have an actions column before that we need the amount so let me duplicate this column here this is for amount instead of directly providing the amount property from this model if the transaction is of the type and expense will be showing the prefix minus and that of income will be plus amount for that i will create another not map property then i will just copy paste this property here formatted amount first therefore we need to decide the prefix plus or minus based on the type of transaction into that we'll be concating the amount and let's format that into our currency so here we have the corresponding format type c0 currency without decimal now inside this strainery expression we have to decide the prefix so here we have the condition i will uh wrap the condition again in another pair of paranthesis if category is equal to null or category type is equal to expense then the prefix will be hyphen or a minus simple and let's append a white space here else plus will be used as the prefix okay now let me copy this property and let's use that here for now let me comment this action score let's build this project and back to the view boom that's it as you can see the date is not in proper format we can fix that in a bit before that let me add few more transactions so that we can understand how this grid looks like with real-time transactions so let me go to the new transaction window and i will be adding few transactions here so finally i have made 10 transactions in order to see them all at once i will change the page size to 10. so all of the features that we have discussed with the category grid will also work here paging is working and you can sort these columns accordingly now let's format this date column here for that we can make use of this property format so plum double d double y and along with this we have to specify the type as date not type of type in order to align the data inside these columns we can make use of this property text align let it be left and let's align this amount column here to right now let's add the final column for actions but then let me uncomment this column here inside this category grid we have used a template with this script tag here i will be copying the same into the transaction grid so here it is id as action column template same is assigned here first of all we have a button for the edit operation here we only need to change the name of the controller and this primary key also transaction id and here we have the form for the delete operation and let's assign this action attribute accordingly everything else can be keep as it is let's build this and back to the view that's it now let's try to update this transaction let's change this amount from 250 to 300 submit the form so here it is now if we click on this submit button for the delete operation it will take us to the corresponding post action method delete here there is nothing to change the default code will do the same as we have done inside the category controller now in order to check the delete operation let me add one more transaction sum is the form you could see the newly added transaction inside the second page now let's delete this confirm the operation boom that's it there is no second page now finally inside these forms for transaction and the category we have to implement the form validation so first of all let's start with the category first of all we have to provide validation rules inside the model category here here we only have one validation rule which is for this property title so in order to submit a category form user must provide a value for this property title for that we can use this attribute required and inside that we can provide the error message now back to the corresponding form which is add or edit for category now along with this infusion component here we have the default span it is there by default from this scaffolding mechanism okay so if there is any validation regarding this title property it will be shown inside this pack and here let me change the font size with the bootstrap class like this now let's get rid of the remaining span for validation these are not required inside the form so in this project i'm only implementing the server side validation so let me comment this line so that we can disable the client side validation now you can go through their documentation for client-side validation let's search for validation here you could see how validation can be done in various components for example let's check this documentation here so here we have a form with the form controls and using the javascript code they are specifying the rules for the validation so if you want to implement the client side validation please go through these documentations now back to our project let's try to submit this form without a title boom so here we have the validation error message now let's implement the same inside this transaction form also open corresponding model transaction first of all we have the category id so it should not be zero so there should be a value selected from this drop down here this is invalid we should select an option other than this default option here but that we can make use of this attribute range and here we have the minimum value and here we have the maximum value that of integer and let's specify the error message please select a category now we have to have a similar validation for the property amount so let me copy paste that here amount should be greater than zero now let's open the transaction add or edit form so here we have the drop down for category now let me copy this span from here or the drop down so the validation error for the property category id will be shown here and let's apply the extra class fs6 there is no validation for the date picker by default current date will be selected so let me remove this span from here validation error regarding amount will be shown here let's add the extra class fs6 there is no validation regarding note let's comment this script session here build the project back to the view let's try to create a new transaction submit the form so here we have those validation error messages so that's all about the validation again if you want to implement the client side validation you can go through the documentation that i have shown here if we get into that the tutorial will be even lengthy so i will leave that up to you as a practice let me close all of the tabs except this layout view here and let's create a dashboard controller i will select mvc controller empty dashboard controller now let's add the corresponding views for that first of all we have to add the folder with the same name dashboard and let's add a view let it be razor empty view index dot cshtml which is the name of the default action inside the controller here index now let me make this controller dashboard control as the default control inside the application for that go to the program.cs file let's change this routing here let's replace this home controller to dashboard now rest of the coding will be done inside this dashboard controller and its view index here we are already running this application in my browser so let's build this project and back to the view now let's navigate the dashboard controller you can provide the controller dashboard here since we have made it as a default controller this will be enough or you could click on this home button from this breadcrumb so currently we are showing the index view of the dashboard controller now before going forward with the dashboard let me allocate a space for the sidebar in this left side here for that i will be using this infusion component sidebar so here it is more about this component will be discussed once we are done with the dashboard for now we'll just allocate a space for this component so here is the component ej is sidebar now for that sidebar i'm gonna create a partial view along with the layout here so right click here then add view select razer empty view i will name it as underscore sidebar now we want to show this sidebar inside this layout just before the content content will be shown here and the sidebar will be shown here in the left side that we can add this sidebar partial view into the layout page here so here we go partial and provide the name of the view that we have just created sidebar that's it now let's add this infusion component sidebar into the new partial view here we have the id sidebar now let's assign everything here okay for now that's enough let's build this project and back to the view that's it now we need to assign a left margin for this content equal to the width of this sidebar otherwise the content will go under the sidebar right so back to the layout so here we have the div inside that will be showing the content from various controls now i'm gonna wrap this div with another div and let's assign this class main content now let's apply a left margin for this class let it be here main content margin left is equal to the same width that we have applied for the sidebar that's it now before going with the dashboard let me change the background of this sidebar here so that we can make use of this id that we have applied here sidebar let me create a new session for the sidebar inside this style sheet so here we have the background color and let's apply a right border and finally some padding now back to the view that's it so here we have the sidebar we'll get into that later once we are done with the dashboard here since we have added the sidebar in the layout page you could see the same in other controls also let's reload this here we go now inside the dashboard first of all i want to remove this heading part which you can see here along with the heading we have a breadcrumb you don't need to show that inside this dashboard and also if you check the layout view here from the bootstrap grid system we are only assigning 10 columns out of 12 for the contents like these here but for the dashboard we need 12 out of 12. for that inside this dashboard index view let's pass something inside the view data saying we are currently showing the dashboard so inside this key is dashboard let's pass true now back to the layout view inside this content this raw div is containing the heading part which shows these html elements including the breadcrumb so i will add an if close here if let's check the view data that we have assigned here if it is not assigned we can say current view is not from the dashboard so we will be showing this heading part here let's reload this dashboard boom that's it the heading part remains here for the other contents now let's conditionally apply this grid column here first of all we'll start with this at the rate wrapping let's check the view data if it is null then we will apply this class else the entire columns now let's add components one by one first of all i want to show the total income total expense and the balance in the given date range so back to the dashboard controller here for demonstrating the dashboard components i'll be considering last 7 days transactions so first of all i will create the date variables with start date and end date now for the start date we need to minus six days from the current date let me duplicate this for the end date which is today itself now let's retrieve all transactions in this q1 date range list which is of the type transaction model let's add the corresponding namespace and here we will make an async request context dot transactions sorry we forgot to inject the uh db context so we just need to add a constructor for this controller but then we can use this snippet ctor first of all we will be having a private property of the type application db context as underscore context and here we have the constructor parameter of the type application db context the value for this parameter will be passed from the dependency injection and we can make use of this private property to interact with the db like this now for this transaction entity we have a foreign key navigational property which is category here we also need to fill datas into this navigation property so that we could do this include now let's filter the transactions based on the date and finally let's call this async function here now since we are using an async method we have to change this action method return type as task action result now in order to use this include function we have to import this entity framework here now inside this list of transactions we have all the transactions that we have to consider for rest of the dashboard here now let's find some of amounts for income transactions so here we go total income you can calculate that from this collection selected transactions we have to filter all the transactions where the transaction type is income so here we have the uh navigational property category we have the type property and it should be equal to income now let's call the aggregate function sum over the column amount now let's save this to the view back and let's convert this to a currency format now we want to find the total expense for that i will copy paste this below now let's find the balance amount meaning total income minus expense now let's save the same into the view back now let's show a cart element inside the dashboard for each of these three summaries it will be shown inside the dashboard at the top so here we have the dashboard index let's add some summary widgets then here we have the bootstrap grid let's add some bottom margin here we have the first widget now let's apply the flexbox as raw now here we have the custom class widget we have already added this class in our style sheet now here we have some additional classes summary since we are dealing with income inside this widget we have added this custom class income now inside that we have two divs like this inside this div we'll be showing a phone over some icon let me copy these flex classes from here instead of flex raw we have flex column justify content center and let's apply padding from all sides of the range five now here we have the phone over some icon now for the second div let's copy paste these classes from the force div for aligning the content horizontally and vertically in center we will apply this clause and let's apply some padding on axis of c range 3. inside that will be having a span and we will apply this bootstrap text class lead and here we have the title for the widget total income just beneath that we have the h1 element and let's apply these bootstrap classes now we can use the view back that we have stored here we have to use the prefix at the rate simple here we go now let me build this project and back to the view so here we have the total income we will fix this misalignment here in a bit let's add rest of the widget for that i will just copy paste this div here this is for expense now based on the custom class that we have applied here we'll be changing the appearance of the elements inside it total expense now let's replace the same inside this few back key now let's do the same for this balance widget for balance the corresponding view back key is balance itself now let's add the css rules for these custom classes summary balance expense and income so here we have the style sheet side.css and i'll be adding the custom css for the widgets under this accessing session here as always i will be pasting this user source directly here so here we have applied some stars based on the presence of the summary clause and the containing phone over some icon color will be decided based on the presence of these classes and here we have added an extra rule which is required for the chart elements that we are going to add in a bit so here we have defined the custom classes that we have used inside the index view here now here we forgot to wrap these widget divs with the bootstrap column divs so let's add that here class is equal to call md4 now let's build this project and back to the view that's it now you could see the bracket wrapping for this balance here in last 7 days total expense is greater than total income so when we subtract total income with total expense we will get a minus value in order to avoid this bracket wrapping we can do this for that we can make use of this class culture info now let me add the corresponding namespace now this deals with the local conventions for data stack string date amount etc now we are going to modify the default culture so here we go we will create a specific culture and we will specify it as us now let's change the number format currency negative pattern is equal to 1. now instead of calling this tostring function we can make use of the string function format here we have the new culture and let's pass the currency format here and here we have the amount that we want to format back to the dashboard that's it now in order to avoid the negative balance let me modify the list of transactions now let's reload this dashboard that's it for better user experience you can add a drop down list on top of this dashboard so that the user can choose the date range of transactions for the charts and other widgets below it whether it is last 7 days or last 30 days or this year etc now let's address of this infusion chart elements so here we have the syncfusion demo page for asp.net core i have given the link in video description and let's go for the charts here now first of all i want to show expense by category meaning how much we spend in each of the expense category in this left side menu we have plenty of sim fusion components for visualizing and summarizing the data that we have inside the application first of all i'll be using this component here donut under accumulation chart so this is how the element looks like and here we have the corresponding responsible code with this chart element we want to show the expense in various expense categories now you could see the detailed documentation on these chart elements inside the documentation here okay so here we have plenty of components related to chart and at this top here you could see various common things that you can apply across all of these chart elements now in order to make use of this donut chart we have to use this element here accumulation chart so back to the index view here we have done with these summary widgets let me collapse these one by one now we will be adding a donut chart then followed by a spline chart here also we'll be using the bootstrap grid system so let me copy paste this div here inside that we have the grid column with four columns inside that will be showing the donut chart along with that we'll be having another column with eight columns for spline chart first of all we'll wrap everything with the class widget and there is one more custom class which is chart the corresponding css rules are already added into the style sheet now let's add a title and here we have the custom class and let's apply the padding from all the sides of the range four and here we have the heading expense by category now just beneath that we'll be using this syncfusion component ejs accumulation chart and let's provide an id donut chart we'll work on it in a bit actually this custom class title is not needed so let me remove that let's build this project and back to the view so that's it here we have the chart currently it is empty by default these chart elements will have a white background so in order to overwrite that we can use this property from the syncfusion component background let's build this project and back to the view so here we have the donet widget currently we are not passing any data into the component so there is nothing inside that so let's patch the required data from the dashboard controller now if you check the demo here it is passing the data from the view back and you could see the view back inside this controller donut controller see it is a list of this object donut data which is having these properties x value y value and the text so this x value property is treated as the name or title of the slices and the percentage that is shown here is from this property text and this y value will determine how much of this donut is to be assigned for each of these slices here so we'll be creating a similar list of objects inside the controller so here we have a separate session for the donut chart expense by category which is what we expect in an expense tracker application right and we'll be saving this list of data into the view back down at chart data let me copy paste this here donut chart data we'll be using the same list of transactions that we have already retrieved into this list now let's filter all the expense transactions group transactions based on the category so here we have the aggregate function grouped by group by category id now let's select the properties accordingly instead of creating a separate class and creating the corresponding instance we'll be using an anonymous object so here we have the new keyword first for the amount which is summed after the grouping now this amount property will be treated as this property here y value now let's pass the text which is what we are showing inside the portions here so the corresponding property will be formatted amount we are using the same sum you are just formatting this amount into a currency format now let's provide this property x value which is the title for each of these options here so here it is category title with icon that we have to use this first function hope you know the need of this first function since we are dealing with a group query here we are coincating the category icon with the title after all let's call this method to list now let's pass this view back to our donut chart for that we have to create another child component called accumulation series so here we have the parent series collection inside that we have the accumulation series now let's pass the data source with the view back now we need to map each of these properties here property names to these corresponding mappings here x value y value and text for that we have these properties x name is equal to title with icon y name will be this amount property here now the label for each of these labels here with these percentages will be assigned with another child tag accumulation series data label and with this property name we can map this property here formatted amount which is what we want to show on these portions so let's use this property formatted amount okay that's enough with the data label here we have a typo inside this property data source you can easily detect the misspelled property from its color itself the highlighted color will be different from the properly typed property let's correct this to data source let's build this project and back to the view boom that's it currently as you can see the labels on these portions are not shown in order to show that we can explicitly mention that with the property visible as true it's not necessary to assign the property with the boolean value true you just need to keep the property here let's build this back to the view that's it now here we have a pi diagram instead of a donut chart now in order to make this switch into donut chart we just need to do this we just need to assign this property inner radius so the inner 60 percentage of the pi diagram will be removed let's build the project that's it so these are called labels the amount in dollar now if there is a situation where these slices are consistent then there is a possibility of overlapping of these labels in order to avoid that we can add this boolean property enable smart labels so this is what we call labels and these mapping to these slices here are called legends now let's customize these legends for that we'll be adding another tag accumulation chart legend setting first of all let's assign the position as top now as a prefix to these legends here we have a complex icon which you can see along with all of these um legends instead of that we just need a circle so that we can make use of a property from this tag accumulation series legend shape let it be circle now we have a perfect circle now if you click on these legends here you can toggle the visibility of the corresponding portions inside the chart if you want to disable that provision you can add this property toggle visibility to this tag here by default it is true to disable the feature just pass false here now let's change the font style of these legends for that we can use this child tag legend settings text style first of all let's set the color as white and let's say in the size also let's build this that's it now there is one more feature that i want to enable on this chart here which is tool tip that we just need to add another tag e accumulation chart tool tip settings now you could see a tooltip along with each of these portions here so that's all about the donut chart which is describing expense in each of the category now let's add one more chart which is spline chart which you can see inside the demo here spline chart so this is how it looks like you could see the corresponding documentation here under chart so here we have the basic overview of the chart element and if you go through the documentation you could see under this basic chart by using the same component ejs chart we can choose various types of chart with this property type so this is a line chart which you can see here this is what we call line chart okay now this is another type of chart step line which you can see here step line like this there are plenty of options but in our program we'll be using spline chart which you can see here okay so back to the index view so here we have the second div for the spline chart into that i will copy paste this widget div here now let's modify it accordingly with this chart we are comparing income versus expense now instead of this donut chart we'll be using this compound and ej is start and here we have the id spline chart let's build this project and back to the view so here we have the chart element now before going forward with the chart component here let me add few more transactions into the app now back to the dashboard reload the view and here we have the updated donut chart i forgot to solve these categories by the amount that we have here so let's do that inside the action method here we just need to call this aggregate function order by descending so the first category will be having the maximum expenditure and we want to make this sort on this column amount that we have created here let's build the project so here we have the categories in the sorted order we'll be changing color of these portions in a bit now let's go ahead with this spline chart here now first of all let's start from changing this white background with that i will copy paste this background property from the donut chart now like we have added a series collection here we need the same inside this chart component also so here we have the parent tag series collection inside this we can have any number of series like we can see inside the demo here here we have three series each of these curved line represent a series in our component here we'll be showing a series for income and a series for expense by date so on the x-axis we'll be showing the last seven days so each of the series whether it is income or expense will be showing some of the amount for that particular day so in brief inside this collection we'll be having two series so this is for the income let me duplicate this for the expense now let's generate the corresponding data from our action method here so here we have the spline chart session where we are comparing income versus expense first of all let's deal with income now before getting into that let me create a custom class here called spline chart data it contains three properties first for a string property day for saving formatted date this is for income and one more for the expense now let's create a list of the type this spline chart data class so here it is i will name it as income summary we are only considering last seven days transactions here so i will use this collection selected transactions let's filter income transactions now let's group based on the date of transaction now let's select the properties that will be creating an instance of the clause spline chart data new spline chart data now let's populate the properties accordingly first of all day we have to call this method first from that access this property date and let's do the uh date formatting here we only need the day and month and finally the sum of the income for the day now finally let's call this function to list now let's create one more collection for the expense so i will copy paste this and let's change accordingly instead of income we'll be using this property expense now if you look at the data passed to this demo here here we have a list of object and each of these objects represent a day in this graph meaning a point on this x-axis here and in that same object we have to pass value for three different series here see here we have three values for each of the series that we have so in order to pass a similar list of objects like this we have to combine both of these list of income and expense by their date so that's what we are going to do here first of all let me create a list containing last 7 days date now we can make use of this function enumerable and let's specify the range here values including 0 up to 7 the value 7 will be excluded in this range now we can call this function select so here we are basically making seven iteration inside that we are just incrementing the date by one day so the start date is the inside this property here on each iteration we will add the value from the uh iteration variable i so usually its value will be zero meaning there is no change then on each iteration it will add one day to this start date now we want to convert this date to this same format here finally let's call this method to array now you might be wondering let me correct this convention let's change this to uppercase now you might be wondering why do we need this third list in last seven days there might be days but there is no transaction either of the type income or expense so in order to prevent from skipping a date without any transaction we are using this list here so we don't skip any of the day in between now let's combine these three lists and we'll be saving that into the view back with the key spline chart data so here we have the link to expression day from the list last seven days is joined with the income list on this condition day which is the formatted date from this last seven days equals income dot d and the result can be referred as day income joint so basically this become an inner join meaning only the request that satisfies this condition will be selected that's not what we want we need all the dates from this list independent of whether we have an income transaction on that day so we have to use left join that we could do this just calling this method default if empty now into it let's join the expense list here also we are using the left join so let me copy paste this now finally let's make this selection here we have the anonymous object with these properties day is equal to the day from the list of days here then income and here we go we will be checking whether income is null or not meaning there will be dates without any income transaction if that's the case we'll return zero else the income from the table income now here we have the expense now we will be making use of this view back in this series here so first of all we have the data source property into that we can pass the view back that we have created here now we have to map the data on x-axis and y-axis that we have these properties x name into that we'll be mapping this property day and then we have the y axis so that we can use this y name property with this series we are dealing with the income transactions so we'll pass income which contains the sum of income transactions on a particular day now we have to specify a name for this series it will be income now we have to specify the type of the chart which i will copy from this documentation here now let me copy paste this for the expense series and let's modify these properties here let me build this and back to the view no data is displayed yet unlike this donut chart or pie chart these charts with x-axis and y-axis we have to configure the accesses separately that here we have the tag chart primary x-axis and we can configure the y-axis with e-chart primary y-axis now inside the x-axis we have to tell which type of data we are going to render as you can see inside the documentation here these are the various four types of accesses based on the data that we are going to display you could check the same inside the api reference also just ignore this first prefix and then type the rest without the hyphen and you could see the corresponding api documentation here chart primary x-axis for this class we don't have any properties listed like we have seen for other component classes instead you could see the inherited class here chart axis so let's search for this class chart axis so here it is inside the properties you could see this property value type so these are the various accepted values for this property double meaning a numeric axis date time renders date time then category something referring to a category and here we have the final value type which renders log access in our project here on x-axis we are showing the date property which is actually the formatted date so it is a string so which comes under this type category so we can specify the value type of the x-axis like this value type category let's build this project and back to the view boom that's it on x-axis we have the last seven days date and amount is shown on y-axis zero amount is here not at the base its position will vary based on the data that we have assigned into the chart now let's configure this chart one by one first of all i want to remove this rectangular border here for that we can make use of this tag chart area inside that we will set the border width as 0. now let's remove these horizontal and vertical lines representing points on each axis for that we can make use of these existing tags primary x-axis and primary y-axis so here we go we will set the grid line width as 0. let me duplicate this and let's move this into the y-axis it is too much right so let's keep the horizontal lines with some custom stars i will set the width as 1 and let's apply a light color now instead of a solid line we will use dash line so here we have the proportion of the width or the dash and in between white space okay sorry by mistake i have changed the area border let me cut this and paste into this y-axis and here we will keep the width property as zero now let's remove these tick lines along with these x and y axis values so that we can use this tag major tick lines width is equal to 0 let's duplicate this and let's move this into the y-axis build this that's it now let's say the thickness of these lines here for that we can use the width property on these series tag here width is equal to three let me copy paste this for the expand series also okay now let me show you how to change the color of these series lines here we just need to use the property palettes from the e chart so here it is palettes and here we will be passing an array of strings in she shop so i will apply these two colors here let's build this that's it now similarly you can change the colors of these donut chart slices you can use the same property palettes so let me copy paste this into the accumulation chart here in accumulation chart the property is the inside the accumulation series here i will be passing 10 hexadecimal colors let's build this and back to the view here it is so that's how we can customize the color now let's deal with the legends like we have done inside the donut for that after this series collection we'll be adding another tag e chart legend settings let's copy paste that from this uh donut chart here let's replace this accumulation chart with chart build the project back to the view so here we have the legends let's move this to the right side but that we can use this property alignment and let's assign it as paw now we have to apply a tooltip like we have applied here that also i will copy from this donut chart remove this accumulation let's build this back to the view so here we have the tooltip now the tooltip is different for different series at a given date instead of that we want a shared tooltip so that if we place the cursor here we could see both income and expense for this given date here with that just set this property shared see now to keep this even minimal i'll remove this y-axis line here but that we can use this tag inside the primary y-axis tag line style set the width as zero that's it now after these two charge components here let me add a widget for showing recent five transactions inside the app so let me collapse this start session here now let's deal with recent transactions so here we have the bootstrap grid system and here we have the column with half of the width inside that we can add the widget div then we have the title that i will copy from this donut chart here recent transactions and the content will be shown inside the div and here we are applying the padding from all these sites except from top so this will apply horizontal padding and here we have the bottom padding now in order to show the recent transactions i will be using the grid component that we have used in other pages inside the application so here it is ejs grid and here we have the id now back to the action method let's retrieve the recent file transaction so here we have the view back a white and here we have the context and let's make use of the db set transactions now let's populate the navigation property for the category and let's order this by date in descending order so that we will get the recent transactions and let's take the five transactions after sorting and let's convert this into a list now we can pass this view back to this grid here data source is equal to the view back that we have just populated now let's copy paste the columns from this transaction grid here except the last action column so that's all about the grid so here we have a typo data source let's build this and back to the app boom that's it so here we have the grid containing last five transactions now if you want to remove this horizontal line inside the grid you can set that here grid lines is equal to none now for better convenience you can provide a button beneath the screen for navigating the transaction index view so if necessary user can see all the existing transactions now in order to fill up this empty space here i will add a dummy widget so along with this bootstrap column i will add a div with the same width and here we have the widget div and here we have the child div into that we will be applying the flex classes like these these two classes will make the content at center horizontally and vertically inside the div we'll be showing a phone over some icon here we have the text widget saying plus widget this is a phone over some icon representing a plus icon okay so here we have the dummy widget in order to have the same width as that of this recent transactions widget we just need to apply this bootstrap class hundred so that it will apply the hundred percentage fifth to these two divs that's it so here we have done with dashboard now before getting into the sidebar or side menu let's replace this now bar with a matching background now the accessory now bar is created with the bootstrap now bar here here we have the layout.html and here we have the number which is responsible for the now bar here now you can see various bootstrap now boss if you go to the corresponding documentation so go to the website getbootstrap.com then inside the documentation let's search for naba and i will be copying this sticky number which will be uh fixed at the top so here it is let me copy this and let's replace it here let's remove this light background now let's apply some padding for this container both horizontally and vertically the first item will be a phono some icon corresponding to a magnifying glass and this is where you can implement the search option inside the application so this will be the first icon now rest of the icons will be wrapped within a div like this here we have a phone over some icon for showing our remainders inside the application now let me duplicate this and this will be corresponding to the notification regarding recent messages or chats let's build this and back to the app so here we have the top navbar now let's customize that inside the style sheet so i will add a new session for now bar here now let me paste the styles here so basically here we have applied a background color then customize the appearance of the phone over some icons and the hover state of the phone awesome icons and also i have added the styles for an image which i will be adding in a bit so this is how it looks like now along with this one over some icons let me show you a profile picture so that you can implement the features like logout option and the profile details and account details so here we have the profile picture let me copy this and pasting into our ww root folder here now let's add the image element here here we have the relative path profile dot jpg now in order to customize its appearance i will be adding this custom class profile pic so here we have the session for profile pic styles now let me paste the styles here let's build this project back to the view so that's it that's all about the navbar let's scroll to bottom you see the number is fixed at the top and the content is scrolling just beneath that now let's complete this application with a sidebar inside the sidebar we'll be having a vertical menu so for this sidebar we have a separate partial view which you can see along with the layout here sidebar and we have rendered this inside the layout with this tag partial now first for inside this sidebar i want to show a menu a vertical menu containing all the links inside the application for that there is a syncfusion component called menu so here we have the component menu so here we have the component ejs menu and we'll be assigning the list of hyperlinks that we want to add into the menu with a list like this so let's do the same inside our application here first of all anything inside this sidebar should be wrapped with this tag content template and here we have the component for the menu ejs menu here we have the id now with this property items we have to pass a list of the hyperlinks that i will add inside this view itself first of all we have a list of object meaning a dynamic list let it be menu items and let's initialize the list here now we can provide this list into this property items here now into this list we can add menu items for each pages inside the application so here we go menu items dot add method can be used inside that will be creating an anonymous object first of all we have the text property and this property will be displayed inside the menu item so here we have the first menu item for the category now here we have to provide the relative url which is oh slash category now let me copy paste this for transaction so here it is transactions and here we have the corresponding url now let's build this back to the application so here we have the menu items you want to make it a vertical menu not horizontal for that we add this property orientation as vertical that's it here we have a vertical menu now if you want to have child menu items for these menus you can add that as a sub item inside the menu item here for example let me add some child items into this menu item category you could see the same example inside this demo here we are using this property items to add sub menu items let me copy this same and i will paste that here build the project see here we have those sub items these sub menu items can also have the properties like the parent for example url text items etc now if you want to show these sub items beneath the main parent instead of showing it as a separate pop-up you just need to set this property hamburger mode see this time the sub items are shown below the parent so that's how you can add sub items to a menu item in this application we don't need these sub items here so let me remove that now along with these menu items we can display a phone over some icon for that you can use this property icon css here i will pass classes for a phone over some icon now let's do the same for this transaction menu item now here we have the icons now let me add a dashboard item which i want to show about this category for that you can add the menu item before this category here so the menu items will be shown in the order that we have added here so this is for dashboard here we have the relative url and let's provide the phone over some icon build this back to the app that's it now you can check these menu items here now let me add few more demi menu items for that i will duplicate this this is for reports then settings okay you see here we have the dummy menu items now if you want to group these menu items into different groups you can use separate let me show you that here so these first three menu items will be under a group for that let me copy this and pasting it above this text will be shown as the name of the group let it be general and then we just need to set this property separator and rest of the dummy menu items will be under a different group called extras build the project back to the view see here we have the category separator now let's customize this menu inside the style sheet so here we have the session or the menu for customizing the component i will be using this id property here menu now let me paste the corresponding css styles here so these sponge styles are applied to the component menu and these classes are the default classes applied to the syncfusion component elements okay back to the app that's it we have to change the background color of the menu which we have given as an inherited color from the sidebar so it should be taken from the sidebar for sidebar we have already applied the background color here this one so in order to work this we have to add one more style we just need to change the background color of wrapper of the menu component which is the inside the sidebar with this class e menu wrapper i will set the width as 100 percentage and we will set the background color as inherit so this will inherit the background color from this sidebar and the menu will inherit the color from this wrapper let's save this that's it this is a default html component used to wrap the scene fusion component menu now just about this component let me show the logged in user details so back to the partial view sidebar just above this menu let me add a div and here we are applying a custom clause called profile wrapper now first of all let's show the logged in user profile picture the same is added inside the now bar here so let's copy that from the now bar itself layout view and here we have the element and just beneath that we have the user details let's apply the flex classes padding from start of the range 3 and here we have the h6 element and let's ignore the default margin inside this element we will be showing the name of this application let it be valid app and just beneath that will be showing name of this logged in user so here we have the bootstrap class text muted for now we'll provide a demi name ashton cox now to the parent div here let me add one more custom class titus so we have to add the styles for these custom classes inside the style sheet so here we have the session for the profile pic and let me paste the corresponding styles here this is for the wrapper and this is for the titles let me build this project back to the view that's it now just about this profile details i want to show the app logo which is exactly looks like this fab icon for the app here which i have already created you could see that in my desktop here logo so let me copy this and let's paste that into the directory ww root now back to the partial view sidebar for the logo here we have the parent div logo wrapper inside that we have another div with the class app logo inside that we can show the app logo let's pass the relative path here logo.png now let's add the corresponding styles here so let me add a new session here for the logo this is for the wrapper and here we have the app logo let's build this back to the app that's it so here we have the app logo now everything inside the sidebar is added now we just need to make this sidebar collapsible and expandable for that we just need to enable docking inside the component sidebar just set this property enable dock now to expand and collapse this sidebar we need an icon for that i will be adding a phone over some icon so i have selected this phone over some icon let me copy the tag and pasting here and later inside the javascript code we need to work with this icon so i will be providing an id here sidebar toggler so here we have the icon that we have just added now to float this icon to the right side here i'm going to add another div and here i will apply this bootstrap class with hundred so the in-between space will be occupied by this div now let's style this icon we can use the id sidebar toggle now we have to add a click event for this toggler so that when we click on it this sidebar will be collapsed for that inside the sidebar we can have some javascript codes first of all let's subscribe to the dom loaded event and here we have the function which is to be executed when the content is completely loaded inside that first of all i'll be creating a variable called dog bar into that let's assign the dom element here sidebar so here we go document dot get element by id which is the javascript default function and here we just need to pass the idvg's sidebar so this will give you the html element from that you can call the default properties and methods of the html element in order to work with the syncfusion functions of the component sidebar here we have to retrieve the syncfusion instance which is by calling this function ej to underscore instances and let's retrieve the force element now let's add the click event for the toggle so document dot get element by id and let's retrieve the toggle so here we have selected the toggler add the on click event now from this instance we just need to call this method toggle so this method will switch the current state from open to close and close to open so that's all about the event so here we have a typo this is ej2 not ejs let's build this and back to the app since we have enabled docking this now bar is taking over the space of the toggler previously we have applied a left margin for the content with the same width as that of this sidebar here now let's add the same margin for this now bar also so here we have the styles now bar now here we go nav dot now bar and here we have the left margin 290 pixel back to the app so here we have the toggle see the toggler is working now we have to reduce the width when the sidebar is in close state for that we can assign this property dock size let it be 100 let's build this see this time we have a reduced width during the closed stage we have to hide few things for the better appearance of the sidebar here for that if you inspect the sidebar you could see the classes applied into the component here we have the sidebar and here we have the classes indicating whether the sidebar is close or not if it is closed you could see this class e hyphen close now if you expand it it will be applied with this class e open so based on the presence of the classes e open or e clause we can show and hide the elements within the sidebar here so that's what we are going to do inside this sheet side.css so here we have the session for the sidebar and here we go so here we have changed the padding when it is in closed state hidden app logo when it is closed will hide the menu item text here and also the titles inside the profile details will be hidden so that's what we are going to do with the presence and absence of these classes e open and equal so you can check that further let me save this back to the app let's try that again see now we want to change this icon based on the state of the sidebar when it is in closed state we have to use the opposite icon to this icon here with that inside this sidebar i will be only applying the base class so this is the top law and i will only apply this basic class for solid and the icon content will be applied from this side.css based on the absence and presence of the class e close and e open so here it is here i have used the content uh which you can see along with the i tag here here we have the i tag and you could see the corresponding unicode and that's what we have applied with the content so this is for the left ankle and here we have the right ankle let's check whether it is working or not let's toggle it boom it's working now finally i want to show you a bonus tip which is docking to a target let me show you that inside the demo itself so here we have the demo that i have bookmarked let's check the sidebar so here we have the default sidebar and let's check this docked sidebar now if you toggle the state you see this content is taking this piece where the sidebar is shrinked now let's do the same for this sidebar also with that first of all let's wrap the now bob with a div having the class dot target so here we are wrapping this now bar with this class dog target now let's provide the same class inside the sidebar property target dot the target class let's build this the height of this sidebar is reduced we can fix that in a bit now you could check the docking now let's remove the scroll bar from this sidebar back to the style sheet here we have the sidebar set overflow as hidden now to remove this whole body sidebar here we can hide the overflow of the body now we are not able to scroll inside the dashboard in order to fix that we will be adding this crop bar to the main content div here this one so back to the style sheet overflow on y direction or y axis direction make it auto now in order to work this we have to assign some height and let it be 100 vh so here we have the scroll bar for the main content still it is not viewing the entire height so i will reduce the height here to something 92 now it's working properly fine now the dog side bar will be having the same height that of the target div here which is the number so both of these are having the same height in order to have the full height here the target div must be including this content also so i will change the targeted div so that it will wrap including this uh main content div here let's build the project back to the view that's it see it is working properly fine now you might be having this question why this enter div which is this target div here dog target is wrapping the enter nav and this main content here why not the main content is expanding and collapsing while we close and open this sidebar here that behavior will be only applicable to the first element inside the dog target here which is this number now if you want to verify that you can do this let's add a div create to this now bar here and inside that we have some text let's build this back to the app so this time this is the first element this time only the first div is expanding and shrinking so that's all about the dogged sidebar now finally i want to disable this feature here if you swipe to the left this sidebar is getting closed so in order to disable this feature i will reset this property of the sidebar enable gestures so that's all guys here we have created the mvc expense tracker application with the help of syncfusion component library you can download or clone this project from the github repository link that i have given in video description for more tutorials like this you can go through the video that i have given in video description under the title related videos thanks for watching this tutorial please consider subscribing to this channel called affection if you haven't yet please like and share this tutorial with your friends and colleagues so that they can also benefit from this have a nice day bye

Channel: CodAffection

Views: 197,224

Keywords: Expense Tracker App in Asp.Net Core MVC, Asp.Net Core MVC Tutorial, SyncFusion, SyncFusion Components in Asp.Net Core MVC, Grid in Asp.Net Core MVC, SyncFusion Tutorial in Asp.Net Core MVC, Datepicker in asp.net core, Asp.Net Core grid with sorting paging and filtering, MVC Form Design with SyncFusion Components, SideMenu in MVC, SideBar in Asp.Net MVC, Chart in MVC, Doughnut Chart, Design a Dashboard in Asp.Net Core MVC

Id: zQ5eijfpuu8

Length: 161min 17sec (9677 seconds)

Published: Mon Jul 25 2022