Shopping Cart using ASP.NET MVC with Entity Framework

in the last class we had done an MVC project okay with products and we did insert delete and retrieve as well as I think uh updating okay all these things we had done in that particular project so um what I'm doing is I'm in this class I'm going to continue that products table okay and I'm going to make a small shopping cart idea okay I'm not going to do the full thing because full thing requires a lot of tables and lot of connections and stuff I'm gonna keep it simple uh just to take you to the cart not to go to the order and stuff okay I'll just take you to the card I'll leave the order part to you if you can't do it I'll help you in it okay you can try it on your own but uh for the record program I'm only expecting till the cut so showing the final list of items added to the car that's all okay so that's what we are going to do right now it's gonna be a simple one I'll try to complete as soon as possible guys okay so uh before I proceed let's see what we have already done in the last class let me quickly go through that and then we'll go to the new ones okay so first thing we are working on an MDC model which means model view can controller all right that idea we are working on and this project basically has two controllers one was the home controller the other one was product controller okay in home controller basically there was just three pages index about and contact I did not touch this page rather we went to another product controller why because I wanted to keep a separate controller just to handle products in my table all right so with that in mind I kept it as productcontroller.cs in which we basically have index which is the list of all products and then we have uh create which creates a new product data okay and then the other one we had edit which will edit an already existing data and then we have uh Delete okay so like that we had different different functions and for each of these controller methods we have a corresponding View okay and the logic or the model for all these things were created by entity data model which is area.net entity data model which is uh your Entity framework basically so we already have a product dbmodel.edmx which we created using the systems uh Wizard and we got a model already ready this model basically has one thing called TBL product okay which is my um my tables object okay so uh I have all these things in product controller I have index page if I go to the view I'll right click here and say go to the view I'm not adding a view I'm just already existing view I'm adding it I'm going to that view and I displayed all the products in that particular thing using uh the at model this is the model I followed which means when you pass from the product controller to this I'll have list of all data which is there in the TBL products table and with that I went through a for each Loop in the model and we displayed all these things one by one okay so image I displayed using the name of the file and I gave the location because it's a fixed location and then I gave this okay and then then um for edit and delete I've given a hyperlink so that when you click on it I'll take you to the corresponding method in my same controller method is edit controller is product method is delete controllerless product okay and I've passed a parameter saying ID so ID will be passed along with this so I've given these things and then uh to add a new product I'll take you to create method or create view of product controller so let me go to product controller let me right click on Create and say go to view okay so here again I have created a simple table with some simple forms input type equal to submit all those things all right and for everything I made the system create an editor for me based on the model which you have passed to me okay except for the file because it's not taken as a binary rather I took the file and stored it in a hard disk and then I took the location and showed it in the database so I just gave it as input type equal to file I gave a specific name which I'll be calling here in the controller to take that value okay I think you can refer the previous video to understand how this project works all right so that's how we are done and we did all those let me just run the project let me just show you what we have done so far and then we'll move on uh to the today's today's project okay let me run this and when you open for the first time okay by default the control which will be called if you don't specifically mention will be the home controller and index action of the home controller will be called please remember that by default if you do not mention anything okay index method will be called obviously the controller by default controller which is looked for is home controller all right so let me just come back here so home controller was called because I did not specifically call a controller and index page of that particular home controller is called all right so now let me just put slash product okay let me not call index also just let me just call slash product basically what I'm trying to do is call the product controller when you call a controller without specifically telling what action of the controller you are calling it'll by default call index so let me just call product okay product will automatically retrieve all details from the index method of your product controller which is basically the list of uh products okay all products which are available um in the last class I deleted already one record so let me just add a few products now because I might need it for my shopping cart so let me just add a few more projects okay so let me just put something um let me just choose an image if you don't choose an image also it's not a problem okay so I'll leave it up to you guys uh let me just choose some image and keep okay I'll put the same image only if you want to get modified it's your wish okay so uh another image has been added let me add another product all right so uh some images I've added and some products I've added you can see the product ID this is not going to be shown to the user this is for the admin part because if you are able to edit and delete files which means you are the admin okay so in the admin part I'm showing product ID but the user I'll not show product ID okay I'll only show the product name and the price and the quantity and etc etc okay so this is the images which I have and uh some image I mean I think I'll edit one image so that it will not be all the same so let me choose a new image for that particular purpose let me just put um some college logo or something and update the product okay so now there are three uh different products okay so with that let me go back and if I want to edit if I just click on edit I'll take you to the page where I'm editing one particular product okay and I've given new data and once you give the new data and click on update it takes me to uh update this particular thing and then goes back to main page okay not this main page this main page product all right and when I click on delete I have asked in such a way that uh you get a message saying are you sure you want to delete that particular product and if I say okay it will go to delete it otherwise it'll just stay there okay so that's all we have done and we have done a simple crud operation using MVC all right now I am going to take this into our project now as a user as a simple user if you come to my website I would like to show all the images or all the products in my uh table in the home page and when you click on add to cut I want to take that item and add it to the cart okay please note I am not using a database for cart instead of that I'm using session cart okay please remember that I'm using session for the cart here so with that in mind let me just start with the program so before we begin all these things let's start always with the model okay so what will be the model of your cart okay let's just picturize this guys all right so how will the model of a cart B okay in cart what will be normally there okay just think about what will be there in a cart by default card will normally have a product okay from the database the product will come then you have something called quantity how much of that particular product is there in the cart okay so for example when you add it for the first time when you add a particular product let's say click on add to cart on a pen okay when you add the cut by default it'll show you that you have added a pen which costs let's say five rupees per piece and how many piece have you added first time when you add it is one piece okay and then you can update that quantity or you can add that product or whatever you want to do okay and you can see that the new uh version of that particular quantity is there so basically we have two things in the uh cut one is uh the items in the card will be uh the product and it's all all its details from of the product second thing which is unique from that will be the quantity please note quantity will not be stored in the database what database has is not uh that quantity it says the total that's the stock what I have in my database let's say 200 300 and all I have it in the database but I won't be purchasing 200 uh pens and pencils and stuff so what we do is we keep that database let me just open the database quickly once okay I hope you guys remember the database structure so in case you have forgotten I'll just show you that okay and remember that all these data is required of a particular product but what is not coming from the user is the quantity not this quantity guys this quantity is just telling how many products I have in stock but in the cart it's not your stock which is shown it's shown how many items this user has added to the cart okay that is a different quantity so let's create a simple model all right I'll go to the database I mean the models folder and right click on it and let me add a new c-sharp class A simple class okay and this class I am going to name it as item okay so let me just name it as item uh I'll just choose class and I'll name it as item that's it okay now in this model OKAY based on what model am I going to create the cart based on this model all right so what will be there sorry what will be there in that particular item all right so first thing I'm going to do is public TBL product please note uh TBL product has been accessed directly here previous all programs if you notice I had given that thing on the top okay I had to include them because if they were not available by default in that folder I hope you guys remember here look at this I had given that whatever name project name dot models I had imported that into my project then I started using it okay but here I am Nina do it I'm directly calling TBL product let's find out why okay look at the solution Explorer where TBL product is is inside a product DB model so I need not directly I mean I need not give a reference because you are in the same folder since we are in the same folder I need not create a reference or need not add a namespace here I can just keep it like this okay so let me just give it as a product so where did I stop okay like this you can write get and set also but instead of using this big format we can just type prop okay it's just a property when you just tab twice it'll come like this let me just give TBL product okay please note I'm just giving a class here and then let me name it as product sorry product that's enough okay so wherever you see product is an object of TBL product okay second one another property I'll add which is integer only because I want to take the quantity okay so I'm putting it in capital let us that you know this is part of this model item model product and quantity that's it only two things I'm going to create because this is just a model by which my data is going to be stored product quantity okay by the way don't think it's only two records just think what is this this is not a data type this is a class which means I'm passing an object okay so which means what and all this object will have this object will have everything what I just showed you ID name price quantity pick of a particular product okay and that particular product will have a particular quantity for example if I add a pen all right the product will be pen and what is the ID of the pen what is the image of the pen all those things will be stored in this object and how many pins did you add to the cart will be stored in quantity all right so please remember this is your item so I've created a simple item model that's it now next thing what I am going to do here is I am going to create or let me first display let's do that first display part because I want to show all the products which are available in my database on the home page of my website okay where is my home page it is there here home controller okay when you open the page immediately this will come right index about contact and all so I'm going to write it in index page which means when I show you index page I want you to show me all the products in that database in my uh main page without any uh what do you call it the table structure I want it like one by one like how Amazon or Flipkart will show you uh images of a particular product okay so I'm not going to go in that detail of the CSS I'm just going to display the product details one by one okay so you want to display all the products right so let's write a code here for the controller okay home controller you know the code by now so I'm not gonna repeat that okay so let me just import first because I'm going to use that um uh what is that model so I'm going to call MVC check MBC is my project name dot models okay so I'm going to import that and then here what I'm going to write is I'm going to cut this and write it inside using okay and what uh using what okay let me just write product DB entity same like how we are done in the last class okay product DB entities DB is equal to new product DB entities all right so one thing is done second thing is I need to collect all which means list of TBL product okay let me name it as products and is equal to I need to fetch everything so how do I fetch everything I can write a simple query all right so I'm going to write uh from uh data in DB Dot TBL products select data because no restriction right dot to list I wanted to convert whatever you get into a list and then pass it on to the view that's it okay please note I've just taken all the data from the products table and passed it on to my view where is the view for it let me right click on it and say go to view because already there is a view you know where this view is coming from this is from the main page that Jumbotron and all those things are there so let me just remove that okay so let's write our own uh code here okay so let me just remove that Jumbotron first and make sure that this page this view of index has idea of who came or who gave you this particular data so for that let me just close other things first okay let me open only what is required home controller okay so here uh please note view of Home controllers that's why we are going there and what is passed to the view a list of TBL product okay so let me go back to um index.html CS HTML and then I'll say at model okay and I'll call why am I calling it here because you are inside another folder called View and the controller is I mean the TBL product that object is stored in models so how do I call it I call my project name and then say models then I say TBL product but you are not passing one object what I have referred is just one object since you're not passing in one object I'm going to write list off this object that's it okay a list of this object you are passing so whatever right now you handle or you go to the model you have all the records of uh whatever is there in the database that's all all right so with that in mind let me go to the uh home page okay so we are in the home page already now all I'm going to do is I'm going to write a simple code which will put everything inside one okay you can write it like this or you can also put a container normally we have like that we write everything inside a class called container that's in bootstrap we normally write that okay so let me just cut this put it here okay and already what they have written I'm going to delete everything I don't want these rows okay because these are all basic information what they're given I just kept it like this I deleted whatever they had and I created my own okay now what I'm going to do is inside this um class container let me just put a H1 okay and I'll put list of uh products available I'll just put like that products available all right and inside that I'll put a class called row and inside that class called row let me write a simple for each Loop because I want to display each and every item which is there in that model so I'll write for each VAR item in model because everything right now is stored in the model of this particular page all right so I've got all the information now all I need to do is show each product so um please note where the cursor is blinking whatever code I write will be repeated for how many other items are there in that model how many items are there if I have right now I have three which means three bottles will be created okay three uh data will be created here so what I'm going to write is I'm going to write a simple div okay um let's write I think we'll write it with the bootstrap grid view so I'm going to write class as equal to um I'll put it as a column in small screen it should take four I'll just put call sm4 all right you'll understand it when it runs so first thing what I want to display is normally shopping carts are not good with text they show a lot of images first so first let me put an image okay an image tag okay SRC is equal to uh please note you know how to navigate to that place okay so I'll say content and then uh images and then I want at item dot prod underscopic done okay and Alternate text let me just show uh the item dot uh name product name will be the alternate text if at all it is not available the image is not available at least you'll see the name of the image the name of the product okay and then let me just put width as uh say 150 and height as uh 150. only this much information about an image I have given okay so once the image is done also if you want you can put bootstrap extra if you want okay I'm not doing it I just put if 150 to 150 it'll look like a square all right and then I would like to show an image okay not an image actually I want to show the name of the product okay image already I've shown now I haven't shown the name of the product okay for that I'm going to use a span tag okay uh and in that span I'm gonna say style is equal to the reason why I'm putting this is because I want this information one after the other okay uh you'll understand when you when you write like this if you don't follow just try to remove this and you'll see how the code will look like I don't want to waste time I'll get into this okay and also I'll say class is equal to H3 I want to show it like a H3 tag so I did not write much uh thing and I'll also put the color as text hyphen info that's enough okay and inside that I think I'll put the product name so I'll add item dot prod name done okay same thing I'll copy I'll paste it below all right so span style display equal to block on all those things class I'll change it into H4 instead of H3 okay and here let me just put a bold because this is the price okay so next one I'm going to just pay the price of that particular product and let me put price and if you want you can put dollar or whatever you are comfortable with okay so let me just put rupees and I'll say rupees some whatever price you have okay if you want to Dollar you put dollar whatever symbol you want to use there okay so I'll just say this much uh is the price per item or you can just type per item okay so this will be coming from C sharp wherever I have written after the space will be considered understood as uh HTML all right so that's it so per item this much you are going to give okay now what I've shown is I've shown an image of the product name of the product as well as uh the price of the particular product no much information I've given because I don't have descriptions in the table if you want you can add descriptions also okay now last thing what I'm going to do is add to cut okay so I need a hyperlink okay so I'm going to write the hyperlink shortly but before that what will be the this one I'll just say add to cart all right please note this you can change it into a icon uh or you can add icon as well as texting it is your wish I leave it to you okay so I put a h of f is equal to now here you want to give the uh where should I take you to that I'll write later not right now okay and let me just change that button to class uh BTN BTN hyphen uh I can give it as primary instead of success whatever color you want okay use use your color now uh the reason why I've left this blank is because I would like to take it to another controller where I'll take cart alone separately so card controller after writing I'll bring this code here okay so let's just check whether this works first then we'll move on to the cart controller all right so let me run this project now I am going to call by default this index.cs HTML let's see how it comes okay and if any changes are required we'll do that changes then we'll move on okay so here this is the output of my program um okay so here you see that uh the image of the product is displayed and then you have the pen okay and then you have uh the item okay how much per item so I've displayed it in a neat file fashion if you want to uh you can check whether it is responsive because we had given a bootstrap called hyphen SM equal to four all right so that's what we have got the products each product has an add to cart button right next to it because I have given like this so there's an image there is a name of the image as well as below that you have the price of that particular uh product okay so um like that we have got an output if you have how many other controls are there that many times it will repeat and it will show you different different products okay so that I leave it up to you guys so how do you keep the images and all those stuff okay so uh now when you click on add to card you want something to happen that right now I've not written anything so let's write the controller for that then we'll come back here okay so let me stop the project let me go to the solution Explorer now I'm going to add one more controller because just to handle all the card that's why I'm I'll divide the project as much as possible so that it's easy for us to map them together so I'm going to write I've already written a code for retrieving all the records of the product and displaying it in the home controller and to to do the admin part of the product I have product controller now the last part what I'm going to do is cut okay so let me just add a new controller okay I'll choose this time not read write actions I'll choose an empty controller because uh right now I'm not trying to perform curd operation I want some other operation here okay so I'm going to choose an empty mvc5 controller and let me click on ADD okay so here this controller I'll name it as cart controller so I'll put cart controller let me click on ADD scaffolding will not give you much data here because I want to write the code so I'm not write much here okay okay okay so now you see nothing as much as there it's just a card controller which obviously has one method one action method called index which will be the default view which will be called as soon as you call it okay so with that in mind what I'm going to do is uh I'm going to write nothing here because as soon as you return uh a view I want to show whatever is there in the cart now before I proceed with this guys I need to understand I'm not going to store the items you put in the cart in your database okay rather I am going to put whatever items you are putting in the cart in the session variable of your system okay please note I'm gonna use session for the card because it's normally recommended to use session till it is finalized okay but some major websites what they'll do is they'll add it to the database they'll create a new cart object and then put it in the database but right now in this project I'm not going to take it that complicated let me just keep it in the session which is the most simplest way of having a shopping cart okay so uh with that in mind let me move on uh I am going to create some specific methods here okay some first one I'm going to create this add to cart and then I'm going to show um let's say uh remove from cart okay so I'll do add to cart remove from card two things I require and then also I will create one more method which will be part of the controller to check whether the item what you're trying to add is already in the cart okay please note I'm gonna create three functions in this apart from the index okay one is add to cart one is remove from card third one is to check whether it is already in the cart or not okay so with that in mind let me start uh first let me write um add to cart okay let me just leave it as it is let me come down I'll add public okay uh let me put the result as action result only like previous one okay let all be action result only except for uh to check whether it is there in the cart or not okay so and what is the name of this I'll put it as ADD uh to cart I'll create a method called add to cart okay and what should I pass okay should I pass anything while adding to cut when you click on add to cart should I pass something yes you're supposed to pass which item are you adding to the cart so you need to pass something which is here I'll pass the product ID is that fine okay so I'll just pass product ID because uh I want the ID of the product okay which product you are adding to the cart I need to know that so I'm writing uh add to cart in product ID okay I hope this is clear to you guys all right so before we write anything else let me just fix this error that error is because it is saying it is not returning anything so let me just first write the return what should I write as soon as you have added the item to the card show me the card so I'll take you to the index page of the cart once you have clicked on it so how do I do that okay so I'll write return uh redirect to action yeah here it is redirect to action give the name of the action okay what action do you want me to take me to I want you to take back to index done so there's no error now now I'll write the code Okay so please note um what am I going to add to the cart all right the item which I'm going to add to the card is put in item what will be there in item there will be an object of a product okay please note an instance of a class and also a data type called quantity which is integer all right so basically what is that instance of a class one row in the table and a particular number will be stored in the uh cut okay so what I'm going to do here is I'm going to write a simple if else condition okay the first if is that is the session of card null which means is it the first time you're adding the first item you're adding to the cut I want to check that okay so let me write if session of cart is equal to equal to null okay I hope this if condition is clear please note I've just used a simple if else condition just try to understand what is the if else condition if the cart session is null which means nothing is there in the car do something if already something is in the car then I'll have another condition okay first let me write the first time the first time you create an item okay so what am I supposed to do okay first you are supposed to create a list of uh item please note what we have created is just one item okay if I create a list of this which means I have a list of items in the cart okay so with that in mind let me write a simple list of item okay please note item comes from model which is not imported here so also I'll write using um myproject name dot models okay so now I'm going to write a list of item it will work all right so now I put I'll let me just put it as items okay instead of items let me use another word so that it's easy for us to follow but okay what is the card card is list of items okay what is it an item an item has um a product object as well as the quantity of that particular product simple okay so list of item is equal to new list of height done okay now after this I'm going to add card dot add add what okay I wanted to add an item okay please note I want you to add a new item let me just type new item or or else you can also write it different way I I thought already in one line but let me keep it like this I'll create item space I item is equal to new item okay please note what I have written here is new item I'll just write it like this so that it's easy for I hope you remember the syntax okay with that I'll stop here I'll write product what is product product is equal to please note uh product is equal to um I need to find the object of uh that particular product who has this ID how do I get that you already know how to do that I need uh that what is that product DB entities so since I need it everywhere now and now you use it um like a block of code I'm going to write it outside so that it'll be always available I'll write product DB entities DB is equal to new product DB entities done okay so now I'm gonna do DB dot TBL products dot find okay whichever uh product ID you are passing that product second thing what I need to pass here is a quantity quantity is equal to one the first time you add product is this and quantity is this okay so if this code is confusing or the one what I have written is not uh very much familiar to you it's there's another way of writing it I'll show you item create a new item item dot product is equal to new uh sorry not new we can just call DB dot TBL products dot find whatever product for follows this particular product ID done next one item dot quantity the first time it's always one first time you're adding okay always B1 so I put quantity also as one okay I hope this is clear and once you have got this idea all I need to do is to that cart list what you have here cart dot add okay item which means now this card list has item okay all I need to do right now is to add this particular car to the session so how do I do that session of cart is equal to this cut that's it okay uh let me repeat this code guys I'll make it into one line of code shortly but this is for I've divided the code into line so that you can follow it all right but I can finish it in one line also I'll show that shortly but just follow what is happening I create a list of item call cart okay why am I creating a list of item because I'm not gonna take it as one item what you are adding to the session is going to be more than one item can be added to the cart all right so I'm going to create a list of item called card and I create an object of the item called uh what we have created as a model I'm gonna if I create an object of item what will be uh the properties in that product and quantity what is product it expects an object of TBL product okay so let me just go back so item dot product is equal to find from the database TBL product which which has this particular product ID what you have passed okay find a product which has this product ID and quantity always the first time will be just one okay and then I'm gonna add add to this card and my cart is right now filled with one product detail a product as well as its quantity is there last line what I'm doing is since the session cart was blank now I'm saying session cart is cart okay now let me write it another word uh or this entire four line sentence what I have written can be written using one line of code also let me just write cart dot add okay please note I'm writing it continuously new item okay uh new item I'll put bracket I'll say product is equal to BB dot TBL products dot find product ID okay comma quantity is equal to 1. done I hope this is clear right this one line of code what you see here is what they have written here as four lines of code okay so it depends on you how you whichever is comfortable for you since we have if you understood all the logic what we have come across so far this could be simple okay cart is the list I added a new item and part of the new items object I need to pass two parameters product and the quantity Where will you get the product from from the DB find the TBL products with the product ID of whatever your past done this is one line of code guys I'm right I'm writing the one line of code but I put this in common so that you know both are fine okay so the commented part is equal to this part keep that in mind okay so with that in mind let me move on to the else part okay now what if uh the first time you added 10 okay imagine that the cart is empty you clicked on add to cart pen okay a pen has been added and one quantity has been given there otherwise what if the second time you're clicking on add to cart on um pen itself or another one called pencil so let me take the first scenario if you have clicked on now first you added add to card of pen pen got added to the card then I'm clicking on pencil what am I supposed to do okay first get whatever is there in the card right now when will you come to this else part if session of cart is not equal to null because if it is null you would have written this code since it is not equal to null you are coming here so what I'm going to do here is first I am going to take whatever is there in the cart okay so how do I take that let me just create another item list okay let me name it as cart only is equal to whatever is there in that session of cart okay um give me a minute okay sorry so I'm going to write a session of uh session of car okay this will not work the reason is you are trying to retrieve something called object this returns an object and this uh unboxing you have not done properly so how do I unbox it properly all you need to do is make sure that you Typecast okay type casted into what data type you want what data type you want list of item done now what what will cart hold whatever you've already added okay if you have one item it will hold one item if you have n number of items n number of items will be there in this particular card right now okay please remember that now with that in mind let me move on okay uh I'm going to create whether when I'm adding this I also need to find out if this item is already in the cart okay so how do I do that so first let me write another method outside the add to cart okay what method we have written right now let me write a simple method just follow this method guys public in okay let me return a number uh is let me write it in capital letters only is in cart I'll put that method and what should I pass I should just pass a product ID okay okay so what what am I basically doing going to do in this particular website is uh sorry in this particular method is um if you call this function called is in cart and pass me a particular product ID I will return -1 If the product is not there and the index of the item if the item is there okay so let me just write return -1 in the beginning itself that the error will go off okay when will it come to return minus one if you don't find the item in the cart I am going to return -1 if I find an item in the car I want you to return the index of that item stored in the cart okay let me write the code for that same code what I wrote here I'll copy paste okay so I hope by now you understood what I've written here list of item of card whatever is there in the list I'm fetching I'm unboxing it into a list of item Typecast in other words okay and then I kept it ready so all I need to do is I need to go through each and every element in that particular list so for end I equal to 0 I is less than uh card dot count so how many other elements are there or items are there in the session car okay what am I going to do if simple I'm going to say cart of I Dot okay product dot you'll find product ID okay if the cart that particular location product product ID is equal to equal to whatever you have passed okay so I'll say product ID if it is equal to then what am I supposed to do I want you to return that value return that particular I okay guys that's all just look at this code and try to understand what is happening okay so um let me just try to take it up in an Excel sheet okay so just to understand how this card thing works okay give me a minute okay okay so uh just think that this is the card okay okay I hope that you can see this okay so now I have items or products okay let's say products are here okay and let me just put uh pen and pencil and eraser something like that just an example okay so let me think like this one two three all right now the first time you add something to the cart okay the first time the very first time you're adding look at the condition what we have written uh if the car is equal to null what am I supposed to do I am supposed to create an object of item what is there in item uh object of the product as well as the quantity okay the first time you add item to the thing quantity will be one only so what I'm going to do is basically I'll take these two okay I'll put it okay I'll just copy that I'll put it in the cart okay also I'll put the quantity as one okay please note that that's what I have done the cart this is one element in the card I will put the index of the cart here okay I'll just put I this is the index of the cart okay and index of the card it is 0 right now okay and in the zeroth index I added that pen okay then I come out then I clicked on pencil so I'm adding pencil to my cart okay so when I add pencil to the card first time when you add obviously the count will be one only so quantity this will be the quantity of item in that okay so in the cart I have quantity as well as the product all information of the product because this is an object of that particular product what is the index one okay now next time when you add an item let's say eraser that will get added to the cart because the card is not empty it will go to the else part and it'll add it to the card and the quantity is one and the uh I is 2. the index of that particular thing is two okay with this in mind now let me think if I clicked on pen once again if I added that pen product once again to the cart what should happen okay it is coming and checking whether that particular item is already there or not okay let's understand this method alone guys okay so I'm if I call this method passing a particular product ID I want you to find out that particular product is there in the card so how do I write first I get whatever is there in the session what is there in session I get this okay and since there is more than one item obviously because it's a array or a list okay so what am I going to do I'm going to say go through the entire list which means I need to go through all the items in the cart okay fine what is my if condition say my if condition says first time when you run I is 0 so I'll go to 0 okay imagine that I'm I'm trying to click on uh pencil I mean this is the one which I'm clicking on so I'm looking whether this pencil is already there in the cart so what am I going to do I'm going to start start searching for that particular ID let me add one more uh but it's not there in the card remember that okay so I'm I'm now trying to add pencil so what should I do first uh let me go through the method uh and go through each and every first time when I click I is 0 okay and say carth of zero okay which means cart of zero and in that one product product ID what is product ID one in that product product ID is one okay is it equal to what I'm searching for what are you searching for I'm searching for an item with an ID of two okay no so I'll continue please do nothing is also written in the else part only if condition is written so next next time you run a cart value or I value becomes one so I'm going to check I uh this is cart of 1 and then say search for the item in the car and then I am going to write cart of one dot product dot product ID so cart of one product product ID which is two it's matching what should what am I supposed to do return I what will it return it will return one the index of the product what product you have added not the product ID it Returns the index of the product which is stored there all right now what if I try to add a scale to that particular list okay and I check whether it is there in the uh cart how do I do that okay 4 is the index I mean 4 is the product ID I'm passing it to this okay I go through each and every element in this shopping cart I take 0 it's not matching I take the first element it's not matching I take the the second element it's not matching so what should I return when I come out of the loop I'll return -1 okay with that in mind let me go back I hope this method is clear to you guys please please just go through it it's not that difficult at all okay let me move on now here in this add to cart what am I going to do in the else part the else part is only when you already have an item the first time you run when the cart is empty okay uh I've already written the code for when the cart is empty when the cart is empty it's very simple uh create an object of this item put it there okay and put the quantity as one that's all we have told so when you add a new item first time when you add it index is always zero that you not create you just need to add so all I did is I created a new object of the item and I added that item to the cart that's it okay that's what we did if the first time you're clicking on it whatever what about already there's an item in that list okay what am I supposed to do first I'm supposed to check are you adding the same item to the list let's say for example you click on pen once again I'm not supposed to remove that item or add one more pin instead of that I just need to add the quantity increment the quantity by one that's all if I click on add to cart of pen once again uh the cart value of pen will be still the same only thing is quantity will be incremented by one so how do I write that code first get every item from the cart simple work okay after you get every item from the card call that method okay let me create an object called in index is equal to call this method called is in car okay so let me just call is in car whatever product ID you have passed to me okay now what will be stored in index think about it guys okay what will be stored in index if the item already is there that items index will be stored in this index if the item is not there minus 1 will be stored in the index okay so my code will become very simple as writing if index is not equal to -1 what do you mean by that if the item is not found sorry uh if the item is already there okay it is not equal to -1 which means some other index is stored which means already the item is there what am I supposed to do very simple cart okay open the cart go to that index what you have got okay in that one you will find something called quantity increment account that's it okay let me repeat that what I said I call this method which will return to me okay whether the item is there in the cart or not if it is there it will return that index whichever index it found 0 1 2 okay whatever index you have but if it is not there by default it returns minus one so if it is not equal to minus 1 which means that item is already there in the uh cart so what am I supposed to do cart of index dot quantity plus plus which means in the cart of that particular index increment the quantity by 1. that's it that's all we are doing if at all the item is already there in the cart what if it is not there and it is a new item okay then it will be um it'll be equal to -1 right it will not be equal to um a particular number it will be a particular index okay so I'll not um bother what it will be minus one if the item is already not there so I can just simply write a new code here which is same as this okay please note it's the same as this no difference let me copy that and paste it here in the elsewhere card dot add new item product okay because it's a new item right I'm not incrementing the quantity of the already existing one and also after that is done do not forget this okay so whatever is there put that also okay in the else part already an answer else let me come out and then update my cart according to whatever is there uh in my card whatever I pulled it from the card okay here please note the last line and the first line the first line you get everything from the session and store it in the list item last line you get whatever is there right now manipulated in the cart back to the session okay so that's uh the correlation which we have and by with this we have finished add to cart add to cart is done now as simple as this right so now let me just go to the remove from card and then we'll see the output of this okay so let me write another method public action result uh let me call it as remove from car and let me pass uh the product ID because again to remove a particular item you need to tell me which product to remove so I'll say product ID okay and let me copy paste this line because at the end of the code you wanted to take me back to the index page all right do not forget that now with that in mind let me move on uh how do I remove item from the card here there is nothing much to be uh verified rather it looks somewhat similar to the previous one what we have done I'll just copy this I'll paste it below get whatever is there in the session car and store it in this list of cart the list of items in this particular name called card then finally that item is already there because without an item being there in the car you cannot remove it only if it is there you are going to remove it okay now it has become very very simple cart dot remove at okay what what should I pass to remove at index which you will anyway get from that method okay done so once you have done the last line do not forget is the same the reverse of what you're done in the first line okay you took everything from the session and stored it in your list now whatever is there in the list put it inside the session so no updated which means I removed this particular item which is there at that particular index where you found that particular item and I uh updated my cart that's it so I have done add to cart remove from cart also a small method which will check whether it is already in the cart or not okay I hope this is clear to you guys uh with that let me just move on now let's just go to the index so here I'm gonna say right click and go to view it is not there uh unable to find a matching view because you did not create a new view for this card controller so let me right click and say add View okay let's choose this only index empty without model because I am writing the code let me just click on ADD now A View has been created okay so um from where am I getting all these uh logic okay right now please note so far I've been passing something to the view here and nothing I'm passing the reason is because I am going to create an object of whatever is available in this session in the session variable so I'm not passing anything I'm writing right now taking it from the session so all I'm going to write is I'm going to write model let me call the project name I think here my project name is MVC check MVC dot models that is my model okay and here I'm going to say your cart okay let me just say your cart or cart items whatever you want to give okay use that and once this is done let me move on okay let me write a simple table tag okay let me uh process it so um table class is equal to table okay table hyphen border let me just put border as well as table hyphen hover that's all I if you want you can add more items okay next one is TR I'll just put it in a table structure so that it's easy for us to see and understand okay so I'm going to start with uh product image let me show the image first and then I'll show the name then um I think the price I'll show then I'll show the quantity uh that's that's not from the database quantity I will show then I'll show the uh what you call the total amount and also an option to remove it from the uh cut okay I'll give an option so anyway let me just put the word so that it makes sense for us okay um let me just change this because we are not this is not a model but rather we are just using it so I'll just put using Ah that's fine now okay we are using check MVC dot models because I'm going to create an object of TBL product okay which is not available here but rather I'm going to take it from item uh T what is that uh item.cs which I created inside models so I'm saying using checkmvc dot models I'll just imported that into my project now I'm writing first one is product image next one is product name uh third one I'll put the price okay um and uh next one I'll say Quantity okay that's how you want to display it I'll leave it to you guys it's your wish okay I'll put the total amount for that particular product for example if I say uh pen is five rupees if I added one pen the total is one into five if I have added two pins two into five like that okay that I'm gonna show the last one is um the operation okay like removing or at sorry removing from the cart or just I'll just put the word remove operation or something like that okay it's your wish now moving on let me just go to the next step but it's very simple I need to put for each for each item where okay that's the next question for each item in what okay please note I am not retrieving it from the database rather I'm where did I store when you add it to the cart look at this you have added the item to the session of cart so when you're retrieving you should retrieve list of item okay a session of cut okay I'm gonna take this only guys I'm gonna take this entire block I'll copy that and I'll write it here that's it okay please note what I've written for every item in session of cart I cannot call session of card directly because I have to unbox it so I'm taking it as list of item where is this item coming from check NVC dot models okay so that's how I've correlated it so once this is done let me write the code okay so let me just write a simple TR and let's get the data uh for that okay so inside TR we have TDS the first TD is going to show what image so uh let me write it like this image uh SRC is equal to you know how to write it by now control space uh content images and now I require uh sorry item dot please note it is not database it's from session in session I've stored an item so item has only product and quantity only two things are there so let me call product from product I can get whatever details you want I can call fraud underscore quick done all right so how do I show the alternate text very simple again item dot product dot name product name okay so I've shown the image but let's not keep it as it is let's also increase the width and height so I'll just put width is equal to 100 because I wanted like a small thumbnail uh height is equal to 100 that's enough okay I've added that uh image that's in one TD simple okay next one is another TD I would like to show the uh image sorry the name of the product okay because I already have the code here let me just show the name of the product as it is okay if you want give designs and all or if you want to add like a H1 H2 something like that you can add that all here guys I'll leave it to you next one is the price so uh I'll put price item dot product dot product price okay because item only refers to an object inside the session and inside the session you have item which holds product in the product you have all the records okay remember that and uh last one I think not last before that you have quantity okay now please note I'm not going inside the product item itself has quantity because one of the other option was quantity what how much items are there in the session okay so that also I have done if you want for the rupees the price you can also put a rupees symbol okay so I'll keep it like that and uh also the last one I think is total amount right yes okay so a quantity apparent now I have to find the total amount it's very simple okay because you already have quantity and the price multiply these two you'll get the answer so if I want to multiply I'll put a block of uh at okay please note please note the symbol what I have used Okay because I'm going to do operation here so item dot product dot product price this particular products price multiplied by uh item dot quantity so you'll get the total amount okay it's very simple the last line is removing from cart so um let me just write it here TD and here I'm going to write a href okay so uh anchor tag here I need to write the URL okay so here I'll write remove from cart instead of that word you can also use a symbol or something like a glyph icon or a font awesome icon whatever you want okay let me just put a class let me put a BTN BTN hyphen Danger I think that's enough okay now uh let me write the uh what do you call um uh the the hyperlink okay so href is equal to I have given at okay let me just create it as a url url dot action I need to pass first parameter what I'm passing is the action what action would you like to call from a cart since it's removed from card I'll call this method only remove from cart okay I'll call remove from card second thing I need to pass is the uh controller's name what is the controller's name uh controller's name here is cart and I cannot just pass these two values because this particular method in the controller expects me to pass product ID okay so do not forget that so with that in mind let me just write uh the next parameter comma new let me put two brackets and I'll put at please note you should use the same word what I have used here okay so here I've used product ID let me copy that and let me paste it here okay product ID just put an ad symbol in front add product ID is equal to where will you get the product ID item because you're still inside the C sharp because it's under the NAT symbol item dot product dot Rod underscore ID that's it so remove this item from the card and I'll pass the items ID also to you that's it okay now uh let me do this then I'll come to the grand total okay so let me check whether this works but before that uh there should be an option to add to cart right that add to cart is available in index.cs HTML I did not write the href now let me write okay I'll put at URL dot action I need to uh three parameters or here yeah I need three parameters starting with the first parameter which is uh the action method so what is the method here add to cart so let me just copy the name of the method let me go back so here this index Okay add to cart is the action name second one is uh card that's your uh controller's name third one is your parameter what I need to pass okay so I'll put at product ID same word which I've used here in card controller remove from card product ID okay do not forget that product ID is equal to what am I supposed to pass here okay please note I already have item here so I just need to call Item dot product ID that's it done with this artwork here is done guys let me try the program if there any errors are there we'll come back to this okay so before that let me just uh quickly tell you what is happening I first open Home controller uh default page this page will be open I'll show all the products in a list so when I click on a particular product that I when you click on here what will happen it will take me to add to cart with that particular product ID so I'll go to card controller add to cart I take the particular ID and come here okay if the session is first then created if it is null what I'm going to do is I am going to create a new object with that particular ID what you passed with quantity S1 and add it to the session of cart otherwise High fetch whatever is already there and if the item what you're right now adding is already there in the cart I'll increment only the quantity okay otherwise if it is a new product which you are adding I'll add that new product and update my session that's it okay now how did I know that the item is already there I use this method called SN card which I created all right and removing is very simple I just take all the items from the cart if that particular item is already in the cart remove that particular index okay and then update my session that's it let me just see how this works let's run the project you are not supposed to run the card controller directly because you're supposed to run only the home controller first then later we will find out okay so let me just quickly run this let's see whether it works then we'll move on okay so a list of products are available and I'm in the um home controller all right so let me just click on one of the items let's say this pen okay let me click on add to cart when I click on add to cart it takes me to cart controller all right and in card controller please look at the code uh the first line of code is open index page so when you call index page this item will be rendered which is your cart page okay that's coming here your cart and then I have a table which will show me the image the name of the product the price of the product quantity of the product as well as the total amount of that product and remove from cart okay so when I click on remove from card what should happen uh it should remove the item from the card and take me back to the home page only here the cart page only card right now nothing is there okay so let me just uh remove that card and go back to my home page all right let me just quickly click on ADD Ed it okay let me again go back to home page and click on the same item once again please note that same item I'm clicking on add to cart what should happen Okay so if I go through the code you can easily find out what will happen when I click on add to cut same product ID card is not null I'll come here okay I'll reach all the items which are there in the car I'll find out what is the index what will be the index because there's only one record index will be zero and it is not equal to minus one which means index is 0 is not equal to minus one so this code will get executed so cart of 0 dot quantity plus plus okay which means increment the quantity of that particular item so let me just go back let me add the item once again what happens increment the quantity of that particular item it's now become 2. so what is the total amount 2 into 8 16. okay so this amount of source should also be in rupees so I'll go back here and I'll just add a Rupee symbol in front of it okay sorry that's it now let me come back and refresh okay so here this is if you want you can highlight this also by just putting it bold or h1rish to something like that or you can give a different color and display however you want okay so this is the product and product price is eight rupees per product and quantity I've added is 2 so 16 Rupees is the amount okay so let me just go back and let's add another item okay great let me add another item you have 25 rupees product price quantity is one it's 125 is 25. okay but please note I'm not getting the total I want the total that'll be my next Target but I hope you guys have followed what is happening here all right so now if I delete everything from the session if I see the cookie part you'll see that cookie will have an asp.net session ID okay because a session ID has been created by the server and it's stored in the uh cookie and it will only store be stored till you close the browser once you close the browser the session will be removed please note I have not logged in as a user or something like that but I've added these items into a session so the session ID is already created server has all these information in the session and the ID is now mapped here in session ID okay I hope this is clear to you guys so now we have done a small shopping cart cutting the only thing now pending is this is uh to find out the total of uh how many how much is the amount I'm supposed to pay which means I need to get what is 25 plus uh 16. that is also required here when I finish my cart so let's do that uh that's a small thing okay but I guess you guys can um experiment that okay but anyway uh let me just comment this okay now I have a table at the bottom of the table I would also like to see uh what is the total uh expense which means after adding all these items together what will be my uh value okay so for that purpose let me create another row but not inside this TR okay I'll create another row without this um what do you call the forage what we have written here okay I think it's better we stop the for each here and once you come out of it let me write add one more Tia okay and I'll put TD uh first TD I'll put the call span as how many items one two three four uh five I think we'll put call span as 5 because I want five rows uh five columns to be taken as one and I'll show you only one thing called total amount to be uh or to be paid okay I'll just put like this total amount to be paid okay a total cart value or whatever you want to give that there okay now inside that what I'm going to do is um instead of putting it in a small this one let me just put it inside a h2 tag or H1 tag something like that okay so let me just put uh H2 and I'll put this and I'll also say class is equal to text hyphen centers that it comes in the middle of the table okay and towards the end of the table I'll see the output also Okay so this is done very simple TD next TD is a little bit complicated because I need to find out the total of all values which are there in the cut okay so how do I do that all right so uh first of all before I print the value to the user let me just do a small operation let me just find out a small C sharp way to find out all the items and the total of all those items okay so you can write it same here also um you can also add uh like say for a variable you can create it and every time the loop runs you can find out what is the product price and all those things just to divide the work I have written it separately so that you can understand this okay first get all the items from the uh array okay so how do I do that I already have the code here this code is enough let me copy that let me write it here okay and inside this what I'm going to do is I am going to create um a variable well let me create a simple variable called total total is equal to okay I'm going to write two types of queries guys if you remember one was method oriented okay the other one is like link expression uh which looks like SQL the other one is Lambda expression okay so first let me write with link so that we make sense of what we are writing then we will see okay from data in cart okay the card is nothing but that uh list of items okay what do you want me to do select data dot product dot price okay for each and every element in that car get the price of that element multiply it with uh data Dot quantity okay now please note what have I done uh basically I've said in my card let's say that there are right now there are two elements in the cart okay so I wanted to go through each and every element in the cut and multiply each element's price with its quantity okay and then at the end what will you get I want the sum of all those things simple okay I want the sum of all price into quantity like for example I had given 8 into 2 16 then 25 into 1 25 so 16 plus 25 I want the sum okay that's an inbuilt method I can use it as an aggregate function here in link so I've got the value that's it you can come out and then print at uh okay let me just put it as can I say H2 or something so that it's the final amount right so I want to say dollar um or rupees symbol okay at total total can be because it's a variable created through uh linked or sorry CS HTML all right so the total will be printed that's it okay I hope this is clear now uh let me run the program and check whether this is written or working or not then I'll change it into Lambda expression also all right that Lambda expression is shorter but ID is still the same the same thing I can write it in a different way that's all okay so let's go back right now I'm going to cart index please note the first time you directly open cart index uh if there is no item in the session okay the session is blank your cart also will be blank remember that you're not supposed to call the cart index first you're supposed to call the page index first or your website's index first okay okay right now uh the index I mean the cart is empty so it's not running so let me just access uh the index page our home controller index page okay so now I am in the uh session here it's cart okay so now let me just write add item to the cart now it's working okay you can see total amount to be paid is eight rupees okay it's coming like this now uh let me move on let me go to the application let me add a item to the card now 8 plus 25 33 Rupees is the total item you need to pay okay so let me go back to the application let me add this also 33 plus 5 38. okay let me go back and add the same item once again you see that now this becomes 2 into 16. so my total item keeps updating as and when I add items to the car so my cart is getting dynamically updated every time I add an item to the card and I can remove it from the card also before removing you can also verify whether are you sure are all those things that's still uh JavaScript that doesn't have anything to do with asp.net okay so uh you can just say remove from card and that item is removed and your card is still getting updated okay so the code what we have written here in simple terms is now working here in uh this can be more complicated when when I add connections between two tables all right so please remember guys the structure of an order or shopping cart if you're creating okay not like this what I have done this is just for demonstration purposes of how MVC works okay so this is a simple shopping cart which we have done now if I click on submit after this if I imagine I put something called buy okay so when you click on buy I need to take these two elements to the particular user whoever is logged in so which means till now you can do but if you want to proceed you have to login okay so you have to create another controller called user controller and you will take login registration all those things okay so once the user is logged in you'll have a user ID you have the items from the cart you have uh the items in the card as well as the user who has taken it now with these two you'll be creating something called order ID okay so once he is ready to pay okay you create an order and you'll create two tables one is called order table in which you will hold uh which user placed which order ID okay and you'll have another table which will have only order of products which means order ID will be same for example this let me think this is one order this product is one this product is one let's say product number one zero one one zero two but the uh order number I'll create o1 if order 1 is 01 in that one you have P1 and P2 product two products are there and which user has bought this U1 okay like that you'll have to map different different tables and the code will be taking a little bit more time to finish than what I've done so far so that's why I'm trying to stop here because if I add multiple tables the code will become little bit more lengthier and by the time I finish it will be uh too much so I want you guys to try with whatever work you have with this particular MVC and if at all you're finding it difficult let me know then I can solve your individual queries not for the class as a record this work is done okay so with this I stopped the final program of the lab record okay okay guys a few more announcements with that I'll stop um first thing is that uh all your record programs are done from my side so now it is about uh time for you to start making all your record programs like how we are done uh the lab records of JSP serverlet if you remember same way okay so first we have to give the title of the project on the date in which you have done it okay and your your resignation number is uh required everywhere okay and wherever you have a project please do make sure that the title okay the title of the ace product web page should be in your name your registered number okay like for example if you're using MDC okay just go to the view underscore uh start in that sorry shared layout underscore layout you'll see my asp.net web application is written right so in that place you put your register number okay whatever this number you have just put that so that every page you open accessing this particular shared file you will find a registered number coming there okay I hope you follow I want this to be there in all your pages and wherever possible use your name not your friend's name okay I want you to use your name and create your record uh and your output and keep it ready okay please don't forget that and uh keep the records ready we do not know when uh it'll be asked because I think the time table will be shared to you shortly and in that case you'll have to come to the campus before uh at least two or three days to give the records and get it signed and bind and all those things okay so that I think instructions will be following to you but please be prepared my work is done guys you have to start working on your records and keep it ready don't work to the last minute and don't try to copy it from somebody because uh all record programs I have done if you're copying that also then it shows you the heights of your laziness okay so never do a copy okay uh take it to your own time only 10 programs I've given probably 10 or 11 programs out of which all I have done okay all I wanted to do is refer those videos of the program what I've done and then try to do it in your laptop and take a print out of the record okay uh do not fail this okay so do that and second thing is that uh the lab exam okay I think Santosh Pisa has already announced you that uh on Monday 20 28th I guess 28th sir is conducting a lab exam okay uh the following day 29th will be my lab exam all right and how we have kept it is that uh the program will be my program I'll tell you um you'll be getting uh any one of the crowd operations from um you will be given one crowd operation guys but that will be split into two pages like for example there are four uh aspx files expected from you retrieve.spx insert.spx um update as well as delete okay so what I will do is I'll specifically mention each page to be done in a different technology all right so please be prepared with three Technologies area.net connected and disconnected so it means it will become uh two right so ado.net connected is one technology ada.net disconnected the second technology link to SQL third and Entity framework is fourth so you'll have four Technologies I'll ask each page to be done in a different technology I hope you follow right so that you will have comprehensive all the four uh things covered in one program and two of that I'll be taking it for um one connected and linked to SQL I'll be taking it as first internal and sorry first uh second internal and disconnected and link to SQL I'll take it as second class test so all those things will be finished in one program but that one program will be crud only nothing else I'm not going to give anything else but data types will be different I have only discussed in 10 VAR care I'll be giving a little bit data types extra okay and I'll want you to do that program and then submit it back I'll give the instruction as I've done the Android program if you remember okay so with that uh we will finish our lab exercises okay so if you have any questions please do ask otherwise uh I'll stop here so thank you guys for joining and um have a Merry Christmas and a Happy New Year

Channel: Thomas C G

Views: 6,310

Keywords:

Id: ClyWmKn7v2k

Length: 75min 45sec (4545 seconds)

Published: Thu Jan 26 2023