CRUD Operation using ASP.NET MVC with Entity Framework

in that class we had seen what is MVC and asp.net MVC and uh in today's class I'm going to just show you uh how you can use asp.net MVC to do your own application here in asp.net okay so let me just quickly begin and while the project is creating I'll give a little bit more explanation on that let me start with the new project okay and then let me choose asp.net web application again same thing but uh when it asked me the second time I will change the web forms to MVC that's all so same thing what we've been doing so far is web application using.net framework let me move on to the next let me just name it as MBC demo okay and please note this is the last but one program in our uh record list okay so I'm going to use a file upload also in that so that we'll have a comprehensive asp.net MVC project so I'm going to name it as MBC demo let me click on create okay and look at this screen this screen will tell you which project template we are looking for okay first one is empty which does not have any uh content in it okay web forms is a template already created by asp.net we just you start using uh already existing Master page and child page kind of structure and you start working with it third one is MVC you can read the description there it automatically gives you a simple definition a project template for creating asp.nbc application it allows you to build applications using the MVC model view controller architecture it includes many features that enable fast test driven development for creating applications that use the latest standards okay so I'm going to choose that and remove this configure for https because I'm not actually hosting it so anyway MVC let me click on that and click on create okay okay I think it's working now uh anyway uh if this kind of issues happen just restart visual studio and check guys if it works then it is fine otherwise we'll see what is the issue all right so as it's just getting created uh please remember as I told you earlier it divides your work into uh segments like model view and controller so uh I'll just quickly recap what these three things do number one model uh the model folder normally holds all that is logical about your project whatever logic you have in your website goes inside the uh model okay and then whatever you're going to display to the user what the user is going to see is going to be put as View and there are two types of view engines as I've discussed in the last class one is aspx which is traditional and Legacy and the second one is Razor based syntax which starts with a symbol of at and I'll be using that extensively in this class I'm not going to take aspx I'm going to take only Razer S View engine because that's something new all right so uh that is view third one is controller controller is the one which uh the user actually gives requests to and the controller decides what to do which view to call which model to take up into picture all those things are mapped and monitored or managed by uh the controller itself okay so let me first run this project and let me just see what output I get by just creating an empty MDC project okay so we have chosen an MBC project let's see what is the output and then let us find out how this project is structured then we can start with our own program okay so uh a simple typical website has been created okay please note this website does not have any logic as such because it has just home page about page and about a contactless page which does not demand much logic right so there is no model as such in this particular program all right first let's see the output then I'll show you the folder structure and let's understand how a typical asp.net MVC project works then we will go back uh to working it on our own okay so this is the by default page which you get by using aspironment MVC architecture it looks similar to the previous one what we've been doing home page there is an about page there is a contact page okay and you have some Jumbotron and then there are three divs here okay it's a simple typical website but then let's see how it is structured in the solution Explorer you've seen so far how it has been structured but when it comes to MVC it is a little bit different I hope you guys can see the screen uh let me just zoom in in into that particular folder structure just have a glance okay so let's start with the first most important thing controller there is a folder called controller then there is a folder called all models and then there's a folder called views okay then you have scripts which will hold JavaScript code content which will hold images and CSS and Etc etcetera other things and all will be kept in content folder and app underscore data for your database related files Well normally SQL DB or something like that we'll be putting there all right so with all these things this is the structure which is created so when you call this particular thing what will be happening first let me open the controllers folder and see what is there inside controllers there is one CS file called home controller inside model nothing is there because I don't have a logic in this program yet okay it is just uh a simple home about and contact that controller can directly call The View okay and in the view I have a controller called home so there is a folder called home and inside that you have three different files I hope you guys can understand the file extension by now it is called CS HTML or VB HTML if you have chosen VB okay what is this this is basically the syntax it starts with at okay you can see that icon which denotes that it just means that it is Razor based syntax not just aspx okay so you don't use uh traditional aspx here in this kind of a DOT CS HTML file here you rather use Razer code okay that's what we are using I'll talk about partial View and all shortly let me just uh go through the project first let me open Home controller first okay let's open the controller it's a very very simple file okay there are uh this is the file guys I hope you can still see the screen okay so it's a class called home controller which extends from the Base Class called controller simple all right inside that you have three methods let me just uh Focus only then right there are three methods here I hope this makes sense to us right there is index there is about there is contact then the page run okay and you saw the output you had only three pages their home page so the application name and you click the home page the traditional one then you have about us and then you have contact us you have three pages for each page there is a specific method being created inside the controller so when you call home slash Index this uh will be called okay what will return an action result will be returned with the view with this name this is the way in which it is written guys I'll repeat it again just listen carefully here when you call home slash or just index or if you just call home by default index will be called right so uh just think about it if I call home your localhost whatever website name you have slash home belongs to your this particular controller and inside that home if you call index or let's say if you call it about okay when you call about what is happening inside that it just puts something inside the view back and returns view okay which view will be returned you can just find out which view will be returned by just right clicking on it and say go to view okay so please note I am in controller and right now I don't have any logic involved in my program I'm just telling return view already written code this is I just want to understand what they have written so that I can write my own right so I'm going to right click on this and say go to view okay so visual studio will take you to the corresponding view I wanted to notice the file name guys about dot CS HTML about dot CS HTML so here uh what is the method name about so how will you call this home slash about when you call home slash about controller will give the control to this particular method what will this method do it will put some message inside the view back and return a view which is called about so about.cs HTML will be rendered to you so when you run the program if you see that this data was available in that particular page okay so that's what if you want you can just revise it once again and next time if you click on contact what will happen contact method will be called when contact method is called something else you are putting in the view Back and You're returning a view let me open that view and see what is there here contact you can see that this is their address and there is support and marketing at example.com something like that they have a simple template which is available there all right so this is how uh your normal typical structure which you just created exists but the that is not enough for us right because there's no model here there's no logic involved because it's just a simple static page all right so that simple static page is divided into two segments and it is written like this now you might ask that this would have been easier if I just asked uh write like an aspx file and use the master page kind of a concept okay yeah yes that is fine for a simple typical web form but not for a complicated Enterprise level application so for an Enterprise level application as the complexity goes higher it is very uh wise to divide your work into three different segments okay please remember this with that in mind let me just move on uh let me just find out how that output comes let me run the program once again please note uh I'm going to just double I'm going to open about dot aspx I want you to notice the URL simultaneously since I've already shown you all the code let me just uh show you how the output works so first time I'm coming here please know nothing is there on the URL okay this also you should understand there is nothing there in the URL no I told home slash something and all but nothing is there in the URL for that you need to understand something which I discussed during that uh um in the theory we had kept a concept called routing okay so uh let me just uh open up all the folders which are here and let's get to a specific folder called route config.cs okay how the default route is configured it's already written here and this is called your routing guys this is the code which is expected to be in routing code okay it's already created there you can create your own route also but by default what route is created here is this okay so uh URL how will the URL look like controller name slash which action in the controller you want to call slash whatever ID you want to pass okay please note uh this is a mat it's not mandatory it's optional all right so this is the way in which your url is supposed to be let me just click on that and show you how what I mean let me click on contact look at the URL okay I wanted to just focus on the URL here uh whatever name this is your website name where you are hosting doesn't matter this is your controller's name and inside the controller the methods name or the actions name which action would you like to perform through the controller that name so this is what you are right writing as a route okay need not be a physical file called contact.cs HTML because you can never call a CS HTML directly on the URL all right because it has to be rendered through your MVC you cannot call a physical file through this this is not a physical location please note okay this is not a physical location why I'm saying that is the file name is home controller but you are calling just home okay and the the method name is contact and the file name is contact.cs HTML but we are just calling the method you are not calling the file the file is called by the controller not by you okay and the file itself is not rendered to you rather the file has been called by the controller and whatever the view renders to you is translated into HTML and then it is displayed to you here which means basically when you open this page it looks like a simple static page not a dynamic page but it is actually dynamically generated please keep that in mind let me go back to the route once again okay so by default it's written here okay please note this is the structure by default guys you can change it however you want structure is controller name slash which action in the controller slash in case you have an ID you can pass that ID because ID is optional okay please remember that now by default okay if I don't give a controller name what controller will be called home controller will be called by default if I don't mention an action which action will be called index I hope this is clear to you guys this is how the routing happens and that is how my page came to me as an output here okay but when I go back to home page nothing happens here let me click on home no changes when I click on about you see controller name action name controller name is home action name is contact controller name is home action name is about okay so this is how we our NDC structure works so far all right so now what if I had a model I had a logic then I'll have to put it inside my models folder I hope this project structure is clear to you guys now let me go into one more thing before we stop that thing you see uh the code which you see in about dot CS HTML this is the code this much only okay please note there is something called viewback dot title viewbag Dot message uh title is already set by you saying about so you get the title of this particular page as about you can see that here about okay that is there then let it be there but then here you see there is something called view back Dot message uh what is printed here in about your application description page use this area to provide additional information something like that you put okay so please note use this area to provide additional information is coming from that page only so that is easy for me to map okay so here I can find that all right but then where did this come from your application description page that is not there that is coming from viewback Dot message where was it set let me go back to the controller here your application description page all right so when that page is running okay and there is a title there is a message and this much only is there but when you see the output there is a header there is one uh nav bar here home about contact there is a nav bar and also at the bottom there is a footer uh see 2020 my asp.net application there is a header and footer but there is no master page because there is no aspx here okay so where is this coming from that we need to understand let me go to solution Explorer in this is a concept which I discussed in the uh PPT called partial view I guess most of you uh would remember this okay I told you there is an example what I gave was that login okay then you log in there is a view shown that uh red sign in and register okay once you have logged in it shows welcome your username and then you give you an option called log off and this block you want it everywhere so you use something called partial View and most of you remember that the file which indicates a partial view is denoted using an underscore in front of the file name okay so I wanted to look at here there is something called shared okay there is already something called home that is my controller's name please note view is created with the controller's name inside that there is Method names are having each method name is having its own file name all right apart from that there is something called shared which has something called underscore layout dot CS HTML please note the underscore denotes it's a partial view which means it can be reused okay let me open that you can see the HTML starts here okay there is a body tag and there is this nav bar here okay the nav bar which has uh links to a home about and contact I'll talk about all these ad symbols a little bit later but these this is Razer syntax guys that's what we have been discussing apart from wherever you see Razer it is basically simple HTML only there's no confusion here it is basically HTML okay but wherever you want the logic to be involved then you bring in at and you put your razor code so there are three things here home about an uh content there are three list items it's nothing but your navbar menu okay that's all so this is how your layout works this is partial view which means it can be reused so I can see there is one other method called view start dot CS HTML if I open that it just says that the layout for all my applications come from views slash star shared slash underscore layout.cs HTML now if I don't like it I can also change this code into however I want but basically let's just use whatever is there if you want you can just go and change the layout uh design or code here okay so uh you see that my Asianet application is coming from the master page but when you run you see uh this title is coming from my view and this my is not application is coming from my shared or partial view okay so please understand that that's how we are this particular project is already structured now moving on uh let's create a project let's do a crud operation using nbc.net so how do I do that so let me stop the project running and by by the way this project I'm gonna take it a little bit uh more in detail guys the thing is first of all please understand that I am going to change or take this project what I'm doing as the last and the last but one okay because uh one project I have told that uh you'll have to use Entity framework and do crud operation using Entity framework okay and in MVC the last one is using a shopping cart so I thought I'll merge both of them uh not for you you have to do it separately but I am doing it in the same project the reason is to avoid wastage of time okay so what I'm going to do is I'm going to take products as a demo of crud okay so I'm going to take products as an example for doing crowd operations and then what I'm going to do is uh once that product thing is done you will have to do uh I am doing it with product you have to do it with some other data let's say a student or employee or book or something like that okay but please try it on your own that's why I'm doing it using product you should use it something else not product okay but the product part will come for your final project with the one which has shopping cart okay so since I don't want to repeat two times I'm gonna to do it uh both in one shot okay so first let me create a simple database let me just go to solution Explorer by now I am aware where to add my database I know app underscore data just right click on that app underscore data folder and click on ADD you see that you will get suggestion directly called SQL Server database because those are the files which are expected to be there XML SQL Server Etc so I'm going to just choose SQL Server database I'm going to name it as a product DB okay let me click on OK and once it is created let me create a simple table okay so let the server Explorer open okay it's added now okay so uh once it is opened up let's create a simple database inside that or table inside it already database is created let me right click on the tables folder and add a new table okay by now these things should be very much familiar to you guys so anyway uh once you add a new table please do make sure that you keep the table name appropriately otherwise it will remain as stable so I am going to name it as TBL products okay and the columns what I'm going to keep here is product ID product name uh product price uh quantity and the picture of the product okay I'm gonna do that also so that those who are doing projects might be I mean I don't know whether you use MVC but still I'm going to just use an image also so that we use our MVC for image based application so that I don't need to do two different projects okay and let me just begin let me start with prod underscore ID which will be an integer and also I would like that to be Auto increment now second thing is product name so I'm going to put prod underscore name which will be a VAR care okay please be very careful of the data type what you're giving if you are mistaking it or you're doing a blunder here you'll have to go back and refresh or uh retake your entity table once again okay let me just do that quickly product name next one is product price okay price I'm Gonna Keep It In Real World identity it's going to be a decimal not a integer okay so and decimal I'm gonna say 10 digit number with two Precision okay so decimal 10 comma 2 I've given because I want a number it can be a number which will take um two decimal values okay so and that uh I think nothing of my product will be going more than 10 digits in a number so I'll just put 10 comma 2. okay that's a decimal next one prod underscore um let's say Quantity I'll put qty okay and let that be an integer because quantities will be in uh whole numbers all right then last one I'm gonna put fraud on the scope pick okay which is is going to be the picture of your product okay one picture just to show like a thing but then if you in real world what we'll have is we'll have a separate table for pictures okay why I'm saying that is one product like for example if you see Amazon or Flipkart uh one product might have six or seven images all right so you cannot store all in one table so what we do is we put all images in another for another date table and we'll map with the ID of the product okay that's a foreign key uh primary key thing all right so we'll create a relation and then we'll map it because uh one product might have six or seven images all right so here I am assuming that there's only one so I'm doing with that particular thing all right so next one uh what should I store it here all right so let me just give you both as an idea one you can use as I told you in the previous class of file uploading itself you can either use a VAR binary which is equivalent to blob in MySQL all right like storing a file binarily large files okay you can put them inside here called as VAR binary please note VAR binary is also there all right so but if you use VAR binary the issue also I have discussed okay it's very easy to manipulate and program because you need not bother about the location and all but when you use the file location when you're saving it in the hard disk then you have uh to be very careful of the file location right that's one tricky thing but we can easily uh bypass that so I do not prefer VAR binary because it will consume a lot of space in your database server which makes a database server a little bit more inefficient okay so what I'm going to do is I'm going to use VAR care okay but uh the file name can be like 50 characters or something like that I can give that and I can make sure that it allows null because picture cannot be made as mandatory but if you want we can keep it as mandatory all right so that's it that's all I'm going to create let me just update my table okay and once the update is done let me create an ada.net entity data model ready okay so this is done let me move on okay so table is ready with these are the structure okay let me repeat it one second quickly there is product ID which is an INT primary key identity name worker product price decimal uh quantity integer prices uh picture is worker because I'm only going to store the file name here nothing else I'm going to store here it's going to be just the file name okay please remember that now normally what we do is we can also give something called default value so uh most of you would have seen if at all you have you are not giving a profile pic when you're creating an account in a website they will give you a dummy picture which will just be like a placeholder in which you'll see a shadow of a person okay that's that's something which Wiki has dummy uh we can do that also if you want we can just give default as dummy.jpg and we can put a dummy.jpg in our project always so that that file will be coming if at all the user does not give an image for a product okay that will I'll leave it up to you guys anyway so my project structure is done a table a table design is done let me just right click on my project by the way uh here anymore will not just add it to a project okay so now I have I can categorize them I put app underscore data inside uh sorry I put the data inside a database inside app underscore data folder now I have to create ado.net entity data model all right so looking at the name itself you can understand where I should put this file uh in a typical aspreneur website you can put it wherever you want you can just put it on the solution Explorer directly all right or you can put it under app underscore code that's your wish but then when it comes to uh NVC model as soon as the name you hear you can identify that where I should put this okay I am going to put it inside the models folder please note because what I'm going to create is called ado.net NTT data model so I'm going to right click on the models folder and add an ado.net entity data model all right please note this is a it's inside the models folder okay uh is it compulsory okay I would prefer uh you put your models inside the models folder here because it makes sense okay I'll show you how and when okay but then let me just add this entity data model let me name it as product DB model okay this name will not be used for many purposes but just for your understanding okay and I'm going to create it from the database uh which I have already added to my my project product db.mdf let me move on let me use the latest version of Entity framework move on okay and please note this is something which you guys are forgetting pluralize or singularize okay so what we are doing is it is already enabled you need not do anything here all I'm saying is whatever you are adding from the table okay if you have kept it as plural see for example I've kept it as plural products when it comes or converts this into an entity it will pluralize it or singularize it it's already in plural so it'll singularize how will it singularize TBL product singular all right so I'll show you that let me click on finish so please remember the entity class might be TBL products but the file the name of that entity what you are representing here in uh area Dot and entity data model is nothing but TBL product singular all right so if you had given a stable product in the table here it will become products I hope that is clear to you guys it just goes vice versa all right remember that and once this is ready my model is ready okay so what will be there in this entity data model number one you'll see a class diagram which will just represent how your database is uh or table is structure one second thing is basically what we have done is we have converted okay we have converted a table into a C sharp file okay the concept of orm if you remember one instance of a class is equal to one row in the table so here what I'm doing is I'm converting a table into a C sharp file so what would be the structure the class name will be TBL product the properties inside that class is prod ID name price quantity picture etc etc okay so click on this and then go to its properties find out the name I hope you guys can see it here all right so be very careful about this entity set name is TBL products only it is not changed set name is that but then the name of this class diagram what you are talking to is TBL product it's singularized from plural it has become singular if you are given the vice versa product here it will become products here okay that's all it doesn't make a big difference but as long as your ID gives you suggestions you are in the right path okay that's it all right so I have done that model is ready so I am going to close it off because I don't have anything to do with that model as well as the table design okay so uh now what I'm going to do is I'm going to create another uh controller because I am going to do crud operations for this particular file okay for this particular product but then the thing is uh I need to make sure that how do you access my particular product page right now you are going to the home page I wanted to access the the product page okay so what I'm going to do is I'm going to create a controller all right please note I'm I've already created a model view I will create after I finish the controller's work so let me just right click already there's home controller let me not touch it let me keep it for all these static pages but now all product related things I'll create a product controller so let me right click on the controllers folder add a new controller okay please note it asks you a lot of things there all right uh I am going to discuss two things in classes all right one is uh MVC controller with three Drive actions Mt is pretty much uh self-explanatory it's just an MVC file which is uh MVC controller which is just empty but this would already give me read write actions code will not be written please note the description is right next to it uh MVC controller with actions to create read update delete and list entities okay it's called scaffolding I've already told that in the uh slide okay please do go through that uh the theory part okay to understand what and all I'm telling here because that is essential all right and with that I told there is something called scaffolding within MVC okay I'm going to use the third one later once I finish all my uh whatever programs I'm supposed to do then I'll do because the second the third method what you see will not even require coding uh it will automatically be generated okay it will just create a full thing with razor view everything but here it will only create a controller you will have to create the view here controller view both will be created because you already have the model all right I'll show this later guys but today's class I'm only going to choose read write actions let me click on ADD okay please note how the file name is structured please remember this it's not uh like it's an option it is mandatory that your controller's file names should have the word controller in it I told you this when you when we learned the Java if you remember servlet I told you to keep the word servlet as it is but it is not compulsory you can give whatever name you want but it was a it was a standard that we give my server let hello servlet ad server let insert server like that we kept on giving all right like this here but it is not uh optional here it is mandatory that you have to keep the word call controller please note what word I can change I can change the word which is before that word chord controller so here I'm going to remove that default and put product controller okay so the controller's name is product please remember that let me just click on ADD so it is doing that word called scaffolding and after the scaffold has been generated you can see how a file is getting generated here in asp.net okay so it's not an MDC will generate a full scaffolded uh project structure for you okay let me just go through only the file names don't bother about what is I'm not nothing is there written inside because you have to write the code let me just go through the names which is given there okay just look at the names guys starting with the first one index pretty much uh straight forward let's not bother about it then let me go to create let me not bother about details let me look on create okay and then you have edit then you have delete okay so uh index will be retrieving and showing all details all details this is specific to one person's detail okay this is to create a record this is to submit a create form okay this is to edit a record of a particular person and submit that particular form of the person delete a record of a particular person okay and like that it goes on you already have a full structure of controller ready for us all right so what we are going to do right now is that uh we are going to create um the log by the way there's nothing written inside that method please note it just returns views okay nothing is written because you have to write the logic all right so logic in the sense what controller should do here okay from where the controller should get data which model to access which view to call all right so controller controls everything guys okay from here you'll be calling the model to do actions and also from here you'll be calling uh the view which has to be rendered so now let's see index okay uh before I go to index I prefer that we'll do a create operation first okay what do you mean by create uh to create a particular um record right now I've not inserted one record also in that server so let me write it here let me ignore all these two methods let me just go to create now I wanted to notice there are two creates written there okay uh please notice that there are two create methods written there one uh they have given a comment also I want you to understand that comment meaning okay get and the other create takes post all right and also something else is also passed along with them now comes your knowledge of HTML all right by default whenever you call a form by default the method of passing data is get all right by default unless you go and change it into post it is going to stay as get only I hope that is clear to you guys right so when you create a a particular uh or when you call a particular page in HTML by default it is get request but let's say for example I'm showing you a form in which you are supposed to enter um like product name product uh price quantity etc etc and after that you would like to um submitted so when you click on submit the same page only is going to get called All right but then that time that page will have some data to be passed same page will be called page name is create.cs HTML but then first time when I'm opening I'm not I'm not entered any data first time when I'm opening that uses get but when I click on submit in that create form you are getting me data from the collection of form collection I'll be replacing it now okay but uh it will you'll get a data which is given by the user and you are passing it to uh this particular function and you have to do something here also okay that I will come to that shortly but before that okay um before we write create I think it's better we started the simple code of retrieval okay um I'll write retrieval code but since there is nothing to retrieve I can't I'll not run the program I'll just write the code we'll run it once we have finished the uh insert also all right so now look at this guys okay I'm going to call index page okay just think that index page is like display dot SPX it has to retrieve everything and show it in one page like a grid view but here I am not going to use the grid view because this is not aspx I'm not a drag and drop controls and start writing code but rather I'm going to use the typical way of deployment okay so let me just write this first before I write the code here let me right click on it and say or let me decide the code then I'll go to it okay so what I'm going to do here is I want to get I want you to give me all uh what you have got from the database now I I want you guys to remember that formula again and again uh if you want to represent one row in a table you have to create one object of a class okay the class here is TBL product you know that already right so if I want to create if I want to talk to one row I have to create one object of TBL product but then I want n number of rows what should I do I should create a list of TBL product I hope this is clear to you guys okay uh if you want one person's record it is just create an object of TBL record very simple but if you want n number of users an N number of records from the table you can't create one object but rather you'll create n objects as a list okay so remember that and let's look at this code okay I'm going to engulf this entire code inside a using block okay and please note in NBC it will not be automatically pulling because uh in aspx asp.net whatever we have done web forms all files are available the solution Explorer directly so you wrote using product DB entities immediately here here it is not possible because uh product controller is here and you are trying to access something which is inside models folder so what am I supposed to do you have to import it so I'm going to write using my project name I think my project name is check NBC dot models okay when I open that uh there is nothing more which means all are removed or the namespace are imported from there okay uh why I'm writing this I'll explain to you in a minute I'll just delete this and I'll start typing product DB entities nothing is coming Okay the reason is because I'm missing that namespace because I am inside product controller I cannot directly access something which is inside a model folder and inside that particular folder how do I access it by importing that namespace so call my file my project name dot models after that is done let me go back and type product DB you see that now I get suggestions product DB entities DB is equal to new product DB entities so whatever I write here will be using this object temporarily and once I come out of that Loop this will be gone the error is because I'm expecting a result from you okay let me write that immediately return View okay what view will be returned if I write this index view index.cs HTM which is not yet been created I'll create it shortly all right before I go to the view I'll have to pass some data to that view okay which means I need to show what in all other records you're going to retrieve how do I do that okay please note I am going to create an object of TBL product but if I create one object I can only pass one record but this program right now it demands me to retrieve all the records how do I do that I create something called list of TBL product okay I hope this is clear to you guys list of TBL products so how many records can this hold n number of Records okay so I'm going to put it as product list is equal to uh I'm gonna write a new list because I'm going to retrieve it from the database you already know the code from something in DB dot TBL products select data and convert this entire thing to list simple okay so you have got whatever is there in the database right now converted into a list and store it into product list so when you're returning the view return with the product list okay so I'm gonna just say product list return with the product list so I'll pass this data to The View and the view has to display all the details which are there in the product list okay so now uh where did the model come into picture whatever you have written here product BB entities TBL product is actually from the model I hope this is clear to you guys controller is uh here and controller is calling this action called index and in this controller uh through this index method controller called something which is available inside models okay and the model is already created by the system okay normally you are supposed to create it but here we use the system to create it all right and then I'm returning that list of data back to the view now I have to create the view let me right click anywhere inside this method okay and say add view because I don't have a view already so let me click on ADD view please note The View name comes as it is as the function name of the method name My Method name is index so view name also comes as index please note it says template is empty I'm going to create without the model I am going to create the model okay but please note there is other templates also available which I'll discuss in another class okay but here you see there is something called use a layout page this is in other words Master page okay leave empty if it is set in Razer underscore view start file I showed you a view underscore start CS HTML file in which it automatically redirected you to layout.cs HTML which means it'll be added without me doing anything let me click on ADD and a scaffolding result will give me this answer okay a simple thing here now uh what is this how is this created okay let me go back to solution Explorer let's just look at that uh views folder in views already I had home controller in that you have about contact and index now I created a new uh controller called Product so there is a view created inside product folder called index.cs HTML that is what is displayed to you in front Okay so now what I'm going to do is I'm going to use this uh model okay what you have passed to me from the controller okay which you have passed to meet from the controller I am going to take that you are passing a list please remember the type not the name this name can be changed what am I passing I'm basically passing a list of TBL product okay so I'm going to fetch that here from the model and I'm going to display that using HTML okay let's do that for that I'm going to use razor syntax let me just put at and type the word model please note not capital letter small letter L M model okay so it should come like this and then write the project name and okay by the way you you want a list right so I'm going to put list of okay please note what is past is what you have to receive I am passing a list of TBL product not this name guys this name is for your understanding system only thinks it as a uh the data time the data type is list or something what is that something TBL products but I cannot type DBL products here reason is once again where am I writing I'm writing it inside index.cs HTML which is here you are trying to access a model which is available inside a different folder how do I write it by now you would have understood you should call the project name then call models that's it okay and inside that you have two things I want you to understand why I said uh models have two things just have a glance of what is there inside that models there are two things there product DB entities which is a class which holds all the tables in it and in my case I have only one table so you see TBL product being written there okay so I'm gonna take TBL product because I'm going to create a list of TBL products all right so what I've passed from here I have received it here now all I need to do is I need to call Capital editor model that will be the standard which I'm setting it here I'll take it here okay here instead of index I'll write list of uh all products let me write like this and inside this I'm going to create by the way I cannot drag and drop control I can but I can write it in simple terms like how we have been using so far I can just write table okay and inside the table let me just put bootstrap because I already have that table table hyphen uh bordered okay and I'll also put table hyphen stripe and let me put table hyphen off so this is my bootstrap code guys you can put it however you want whichever table you like okay you can use that syntax now after this what I'm going to do is I need to display all the products which are available so let's do that uh one by one so first thing is um uh just like how we are done in the previous classes okay I'm going to put a table row which will only hold the headers um in how we are done in JSP servlet okay I'm going to write th please note whatever I'm writing is basically HTML only nothing else okay starting with I'll put it as product ID and I'll copy that paste it below uh id1 name and then price uh product quantity or something and then the image okay so I'm gonna put product name and I'll put it as price of the product okay and product uh quantity the last one is product image I'm only putting this much please note this will not be modified by anything okay because it doesn't matter that you have database or not this will be shown to you anyway Tia okay and inside this what do you want I want how many ever records are there in that uh table I want that many rows to be generated which means you have to write it inside of for each Loop all right so for loop at least the loop is required so how do I bring in the loop just put add and type your C sharp code so I've just written for each bar item in okay bar Let It Be There item in what is the collection here collection is inside the model that's one okay this model what I've written here represents whatever you have passed from the controller to me okay now I am representing that in a capital letter M and I'm keeping it here so anymore I will be only accessing item not model remember that with that in mind let me write uh the TR and inside TR I need to give four product ID what is the product ID you have got so I'll put TD and put at okay call that item which is the uh range variable here dot you'll see all suggestions which are coming I can just call product ID okay similarly what I am going to do is I'm going to copy paste it uh two three uh one is for name another one is price this is quantity this is image okay so this much is there so let me just go and replace those words next one is name next one is uh price this one is a quantity this one is not going to be displayed please note in the database I have stored it as image file name but then um it is going to be created with uh or when I'm displaying it I cannot just display the file name rather I want to display the image okay which is coming from the file name so before I display or go to the images part let me create a folder in my project where I'll store all my images please note there is a folder called content I'm expected to put everything inside that but instead of into into make it a little bit more sophisticated let me create another folder inside that content folder okay and name it as images now I'm going to put all images inside this folder specifically content images all right so all I'm going to do here is I am going to delete this what is already there let me write it in two lines so that it's much clearer I'm going to put an image tag okay SRC is equal to I will write okay so let me just press Ctrl space it will show me my project structure inside that let me choose content okay and inside content the one which I just created images okay so uh let me go back here images now it is not going to be a specific file the file name is going to come from the database so I'll put at item dot pick the product pick file name whatever you got from the database so whatever before that what you've written is just HTML okay so this is where my programming comes into picture I just put at that's all and Alternate text let me just show the product name so I'm going to say item dot name that's it and also uh every image will be different different size so I'll specifically say width is equal to 100 and height is equal to 100 so that it'll come like a thumbnail in my table otherwise it'll take a lot of space so I'll just put restrict the size to with this height width and height as 100 that's it so my code here is done okay please note this is Razor syntax wherever you see that highlighted at is where you have written razor code okay I hope this is clear to you guys but I'm not running the project now because no point in running uh it will just uh what do you call it will not show you any output right now because nothing to show okay so I'm going to go to the next one create okay so let's go to uh create first create what we have I'm going to ignore details for a minute guys I'll do that later okay I'll come to create now in create what do you want to return okay it is very simple it is pretty much uh basic for us all I need to do here is I've already imported uh the models so I can directly call the object because what am I trying to get from the user okay I'm trying to get one record from the user if I want to represent it in code one record of a product how do I represent it in code I'll create a new object or a new instance of the TBL products class an instance of the TBL products class is equal to one row in the table so what am I trying to create I'm trying to create okay I'll just write TBL product so basically what am I passing I am passing an object of the class called TBL product I hope this is clear you can add it in two lines but I just made it into one line so that it's simpler for us okay this is not to retrieve or do anything guys uh this is to make sure that the view is aware okay it's very much aware of what you are typing in that text box okay I'll show you in short okay I'll show you why I've written this in a minute but then please do understand what I'm passing I'm passing an object okay of the TBL product class if I create an object of that particular class basically what I'm trying to do is I'm trying to create a new row in the table basically that's the idea what we are trying to do so let me right click here and add a view I'm going to add a new view which is called create again I'm going to leave everything as it is click on ADD so now let me go to solution Explorer okay let me open that view you can see that I have a product uh view folder inside that right now I finished index then I've come to create okay so let's go to create dot CS HTML now what logic does it hold okay I'll again write model model has passed me something what is it past it has passed the table name so I'm going to call my project name in models this table which means this is the class which I have passed look at my controller I've passed a new object of TBL products so basically what type of data did I pass TBL product that's all that's my model okay so uh let me give this one saying add a new product okay now it comes a little bit tricky guys uh please understand why I'm writing this okay those who have done file upload you would remember that not in asp.net web forms previous one JSP servlet or PHP if you have used file upload you have to mention your form to be post not get you cannot use get while uploading files get is not recommended or it is not possible to use uh get while you are uploading a file you have to use post not only that you'll also have to mark something called encryption type or encoding type as multi-part slash form hyphen data I hope most of you remember that multi-pot okay so uh in order to do all these things Razer has a better syntax of creating a view okay so let me just show you how a razor takes care of that okay um let me write a simple code before I write the HTML bar let me write another code here okay uh let's start with at okay I'll put add and one second yes okay add uh I'm going to use some of the inbuilt methods which are there in razor okay I've already discussed that in the PPD but then let's use it okay HTML dot begin form okay please note this is how you uh mention or indicate the system that I'm going to create a new form all right so now uh this is how I write it but then I have to engulf all the code what I'm writing inside that form uh in plain HTML I would have written something like this okay form slash something I would have written like this but instead of this I am going to ask the system to take care of it by telling using that form tag write the entire block of code so I am going to write using okay please note the structure what I've created inside that I'm going to write HTML dot begin form okay using HTML dot begin form now uh please note it is a method even though it does not look like cm in HTML to you this will be translated or converted into HTML shortly all right with that in mind let me just write what are the parameters to be passed to begin form okay this is an inbuilt method here okay so let me just write it and first parameter you need to pass is uh the uh action name okay which means when you click on the submit button where am I supposed to take you I'm supposed to take uh you to the same controller which is product controller action name is going to be I don't care what is the parameter you pass name of the action is going to be create so what should I write here okay within first double quotes right the action which you are going to call Action is create second one what am I supposed to pass I'm supposed to pass controller name okay my controller name is product please be very careful the spelling as well as the case okay third one what is the method name you are going to follow I'm going to write form method dot post these are all not HTML guys this is plain C sharp okay and the last one do you have any other extra uh attributes to be added to my uh project yes you have so I'll add it as a new object okay please remember it is e n c uh t y p encoding type is equal to okay do not forget this this is very very important spelling mistake here or any mistake here would also be a problem okay slash uh I think it's form hyphen data yes this is enough okay so what have I written here okay basically what I've written is form action is equal to you have to go to a particular file but since you are using MVC normally we write action is equal to some file name.aspx or some file name.php or some file name dot Pi but then here you have to call a um uh controller so our action method inside the controller so how do I call it I put it as begin form call Action method called create inside the controller called Product using the method of form called post also one extra parameter you are passing is that the form data what you are going to process is multi-part slash form data this just indicates that you have a file upload control in your form that's it okay please remember this I hope this code is clear to you guys let me move on okay inside this what am I going to write okay I'm going to create a simple form uh for that I'm going to use table guys just so that it looks structured I'm going to use a HTML table okay um let me just put a simple class as just table I'm not going to put anything else if you want you can add later okay so let me start with first row okay what will be there in the first row I want enter uh product name ID I'm now going to take from the user because ID is Auto and payment so I need one TD which will say enter product name okay now now comes the advantage of using uh MVC or it's not at MVC here specifically all right you need not create a control you can ask the control to be created based on the model okay this is why I passed the model to you based on this model I can ask the system to determine which control to put there so look at the code what I'm typing I'm going to write at HTML dot editor for okay and you need to pass a few parameters let me tell you what those parameters are first parameter you need to pass here is uh for what model part OKAY model is a big thing right in that one which uh data in the model do you want me to create a structure for it so I'm going to write model goes to model dot okay which one are you creating this editor for product name so I'll just put product name this is the data okay second one uh second one I should pass I think this is enough actually by the way I can just stop with this I can just say create an editor for this particular model but the problem is uh you have not applied any CSS here if you want you can also apply CSS by just passing another parameter okay so let me just write comma that's called an additional view data okay so I'm going to be just putting it but this will be generated guys but I am typing it because you should understand how this all these things come into picture I'm going to put it as HTML uh attributes please be very careful with the spelling and the case it's very sensitive with that is equal to new okay I'm going to type only once guys and then I'm going to copy paste so don't worry about it okay uh and here I'm gonna put at class is equal to form hyphen control that's what I wanted to apply so I'm adding this okay so that's it now what I've done here is I have not put input type equal to text name equal to something something nothing okay all I've done is I've said HTML to create me an editor for the model specifically I'm looking for model dot product name okay so name of the product what uh what is the appropriate input control take that that's it okay so I'm going to copy this row and paste it two times below one is for uh price the other one is for quantity okay so let me change the words here uh product price okay this editor for model dot model price nothing else I'm going to change that's it okay here next one uh product quantity and here I'll write product uh qty okay nothing else to change here also all right so I've taken the name I've taken the price I've taken the quantity what is next okay what is still pending here is the image all right please note image is a file upload and typically model assumes that it comes as a binary value but I don't want a binary value so all I'm going to do is I'm going to write typical HTML all right please be very careful of what I am typing it's just simple HTML I'm going to say choose a a product image something like that okay and I'll put one more TD in which basically what I'm going to type is just put input type equal to file name is equal to please be very careful of the file name the same name you have to take it here in your uh controller method so I'm going to name it as posted file no value I'll remove that off okay and also I'll add one CSS class okay so I'll say class is equal to form hyphen control that's enough all right now the last line is very simple just put uh I'll put a TD and let me just put an input type equal to submit I'm not going to put anything else okay submit name is equal to something it doesn't matter okay but I'll just put submit value is equal to I'll just say add product that's it okay also I'm gonna put class is equal to BTN please note this is just plain HTML BTN hyphen success and also I'll put uh because I'm gonna put only one output call Spanish two and also I want this to be in the middle of the page so I'll say text hyphen Center these are all CSS only nothing else too nothing to do with the asp.net here okay whatever I've done so far that's it okay I hope this is clear to you guys so this is just the design guys okay so when you click on submit what will happen please know the entire code is engulfed inside uh using form tag so the entire thing is now inside a form tag inside which you have a table inside which uh the controls are going to be generated based on what you have in the model okay now even though it will not work after submitting but let me just run create let's see how the project comes out as the output then then we'll understand why this editor for works okay so just to indicate that your project is aware and your form is now aware what data you are talking about okay so I just want to show that let me run the project okay I hope you guys can see the screen right look at this is how my project is getting created so I have a controller called Product an action called create I called it and you see that this is how the project has been rendered to me now please note uh I had not given input typical text input type equal to decimal input type of number nothing like that I didn't give anything but you see an editor has been created for me let me just go to the source of this page okay you can see here this is the form tag which is generated I did not type it it was generated form action is equal to uh product slash create which is nothing but my uh controller name method name action name then encoding type is multi-part slash form data method is equal to post but uh It Was Written I wrote like this it is translated now into simple HTML okay so I got this as the output now inside that I have a table tag and then you see every control has been generated input type equal to uh text input type equal to number okay so all these things are automatically changing here type equal to number here type equal to text but the value is 0.00 because it's a decimal value which has two uh name I mean two values at the end okay so and moving on you have a file this is what I type whatever I typed as HTML has not been translated it's come as it is okay but whatever I gave through HTML code has been translated and I got this output okay now if I click on submit it would not work because you're not written code for that so let me go back let me write the code for that let me stop the project now let me go back to the controller and please be a little bit careful of this code guys this is going to be a little bit tricky okay so um what I'm going to write here is um here look at the code guys what they have written okay they have written something like a small try catch block the reason why they have written a try catch block is because um you write the insert logic here and if everything is successful I'll take you to the home page to show me whether it is inserted successfully or not otherwise I'll be still in the page you have to write your own error handling or exception handling mechanism okay I do not prefer try catch till you finish your project because I want to see what is the error which is happening and what is the exact exception which has happened so with that in mind let me just come to this form what is passed to me when you click on the submit button okay when you click on this submit button what is passed to me the thing which is passed to me is an object of TPL product okay because you are entering one record right so which means you are passing one object of TBL product so with that in mind let me go to product I'll remove that form collection I'll say you are passing me one product information that's it so whatever the user has submitted in that form I'll be getting it here okay please note only text Data I'll get what about the file what you have sent okay that file I have to take separately so I'll put comma HTTP posted file base okay there is a separate class for that it say it serves as the Base Class provides access to individual files that have been uploaded by a client so I'm gonna take the base and please note the file name what I'm supposed to give there is the same name what you have given here for the uh file upload control posted file I'm going to use the same word here please be very careful of what I have put there okay it's very essential that you use the same name for the input type equal to file control there also okay now let's go to the try block by the way I'm writing inside dry block but I recommend you not to write it when you are tying trying something on your own this is proven because what I'm writing will work so um I'm not I'm not bothered about the try catch thing here but in case you are testing out something please don't put try catch till you finish your project successfully then you put try catch okay so let me begin first what I'm going to do is uh before I even go to the database part of it let's see whether I can upload the file whatever you have put in that folder let me see whether I can upload that file once I have been able to upload the file then I will add the record of the database otherwise I'll come to the cache block and come out if the file is not uploaded then no need to do anything okay so first let me write a simple thing string extension let me get the file extension of the file which you have uploaded because I'm going to do a small validation on the server side I don't recommend server validations on the server side but uh this I can just simply tell you okay so whatever file you have posted posted file dot uh I want to get the file name okay please note I want to get I'll only get the file name but I want the file extension all right if I call like this I'll get the file name but I only want the extension how will I get the extension okay all you need to do is just like the previous program already I've done this but anyway uh using system dot IO okay which has a class called path all right so I'm going to use that and write path dot get file name or get extension you have just to get extension there is a method and where is the file file is posted file dot file name that's it now what will happen at this point of time if you have passed hello.jpg dot jpg will be stored in extension okay so I'm going to write a simple if condition which will start with if extension is equal to equal door dot equals because since it's a string I can write extension dot equals dot jpg okay or anyone okay not to end because anything is fine either uh jpg or PNG I'm only keeping two extensions right now dot equals uh dot PNG if this is the case if extension is either equal to jpg or if it is equal to PNG you have to do something otherwise what am I supposed to do okay you can just put an error message back to the user that's also possible you can just write return content okay you can uh I think yeah you can write it as content okay and you put the content you can just say you can only upload um jpg or PNG files you can just put this error message and come out no need to do anything okay upload will not work but this message will be shown to the user okay and that is also possible you're just passing One content you can pass it as a HTML content like this that's also fine okay now in case the user is doing everything right which means he has uploaded a DOT jpg or a PNG file what am I supposed to do uh I guess by now you know how I did the previous uh file upload thing because uh the file name what you upload might be um same name like for example I upload hello.jpg you also upload hello.jbj I'll put it in the same folder which means my file might get overwritten so in order to avoid that all I'm going to do is I'm going to create a file name so I'm going to create string file name okay is equal to and inside this what I'm writing is uh like how WhatsApp does I'll just put IMG hyphen concatenate that with date time dot to string okay I'll take daytime dot now dot tostring okay and I'll pass the format format I want is first four letters to tell the year then I want two letters to indicate the month then uh date okay then I want R minute second then I want 10 000 of a second okay that same thing so it's a unique number which will get generated every time around you can use the random also concatenate that with file extension which I've already got called extension that's it now what will happen imagine that you uploaded Hello dot jpg okay I'll get extension as dot jpg and since this if condition is satisfied I'll create file name as IMG hyphen today's date is 2020 okay 12 21 uh 322 okay whatever second it is whatever numbers it is dot jpg will be created so hello.jpg will be converted into a different file name dot jpg I hope this is clear to you guys all right so I've created a file name what is the next thing the next thing is the path where you want to save this okay so let me create another string for that so that it's easier for us to maintain save path where do you want to save that I'll call server dot map path okay map path from where okay please note how uh your system automatically puts one uh tilde in front of it and then I'll put slash okay content because that's the folder please note where I've kept my images I've kept it inside my project structure content slash images so I'm going to put content slash Images slash that's it this is the location which I wanted to find so in this location store this file how do I write that call the posted file and then call save as same method what we use for file upload control and all I need to do here is concatenate both of them save path concatenate that with file name done okay by now I guess you understood what has happened okay so I've added that to um the file name all right now the product what you have uh created please note uh the file name has not been added because in the design you only have name from the model price from the model quantity from the model this is not from the model so you have to add that to the model by just writing one line of code extra I'll put product that's the object which is passed here please note we always just passed dot uh pick the product pick is equal to I just need the file name where will I get that from I already have something called file name just pass that that's it okay so that is done now the last part what I need to do here is add this record the object what you have passed to my database how do I add it it's very simple DB okay so I need that uh product DB entities so I'll write using product DB entities let me name the object as DB is equal to new product DB entities now all I need to do here is call that DB and call the DBL products and then add this object called uh product which I just passed through the form last line save changes don't forget this save the changes that's it yes I think I need not write anything more this is enough all right so this is it uh for the code which is uploading file if there is no file upload these two this is the line of code if there is no file upload involved only this line is enough this is the extra code what you see is because I'm uploading a file otherwise this line is more than enough to add a new record okay so let me run and let's check whether what we have written so far works foreign since I was on the controller and I clicked on uh play it took me to the by default controller so now I have to go slash product okay I have already called that create so let me just call create here so it will show me a product page like this so first thing I'm going to give is a product name so let me just give uh some name and product price is something okay decimal value I'm giving purposely okay I'll add a quantity I'll also add one image okay so um let me just add one thumbnail something okay and click on ADD product okay if it is successful it should take me to the next page which is the uh index page why did it take me to index Page Plus line look at the last line in the try block last line is redirect to action called as index okay so it took me back to the index page in index page what I got is uh the table which I've already written here index.cs HTML I hope this is clear to you guys okay the table structure on the top you can see um okay so what I've written here is the product ID product name price of the product that's the table row with the header then this data is coming from the database because I have iterated through that through that particular image and I got the output like this so whatever image I've uploaded is already here okay so this is how we retrieve as well as I have added a record now let me do the remaining two also so that we can quickly wind up this program Okay so what's next okay the next thing is that when you click or when I give another option here called edit dot delete or something like that okay so let me add one more uh data so but there is no hyperlink proper see uh um here I'm not able to add a new record so let me just add a like say a link here at the bottom which will take me to that page so how do I do that okay since this HTML I need not stop the project okay I can just go to index.cs HTML and after the stable tag I can just add a razor tag called HTML dot Action Link okay I'll just add a Action Link or if you if you want you can also put it like this I'll put a href is equal to okay whichever is uh simpler to you guys okay so I'm going to write it as um click here to add a new product or I'll just say add a new product okay and when you click on it what should happen that I will do later but let me just write a simple class BTN BTN hyphen uh primary something like that okay so I have a simple href class now I want you to take me to uh through the controller not like you cannot directly give go to create or create dot CS HTM like that I cannot type that's not recommended so what should I write I write uh razor code I'll call URL dot action and I need to pass parameters first parameter I'm going to pass is the name the action what you want to call okay I want to call create where is that located okay that is located inside a product controller okay I hope this is clear to you guys that's all this is enough okay if you don't have any other parameters because it's just taking me to the next page I'll just save the project let me come back here and refresh it you see a small button has been added here when I click on it it takes me to the um create page okay where um I'm going to give some data and I'm going to add a record so I'll just click on some record I'll just add uh 3.25 I'll say 200 let me choose another image kindly click on ADD so now here so two records have been added and both are there in the database now let me just go back let me stop my project let me show you the images folder in my project okay let me open the images folder in file explorer path okay there are two files there please note the file name what I uploaded is totally different but what I got here is IMG hyphen 2020 12 uh 12 is the month and 21 is the date 326 50 okay and then the fraction of a second okay so that's how my file name is getting generated so that file name is uh created by me through the code so it's working perfectly let me move on okay so now I'm able to uh retrieve data I'm able to um add data to the table okay now the next thing I need to do here is uh to edit okay so how do I edit uh let me just open that index.html or the index.cs HTML from here I'll give you two hyperlinks to go to the next page so let me add another header okay let me put pH I'll put it as operations okay and let me add one more TD here I am going to give um okay let me create a hyperlink okay uh I'm gonna do two types of buttons there guys one is uh using just hitched razor tag one is you main because I need two buttons right edit 10 delete uh to show you the difference between both I'm going to create one using Razer syntax alone and the other one using uh HTML syntax also okay I've already used a HTML syntax here including only the action as um from Razer but I'm going to show you both first one I am going to create edit button using just eraser okay let's call that at HTML dot Action Link okay there are three parameters first you have to pass what is the uh link text what will be the text on that link edit that's what I want okay please note this is not the method name this is just the links text what text will be there on the hyperlink okay I want the word called edit second thing what is the action you want to call that is also called edit only all right because I'm going to call the edit uh function which is here here I'm gonna call this method in the controller so I have written the word edit that's my second parameter third parameter is the controller name controller name is product okay fourth parameter is HTML attributes okay so let me pass some HTML attributes so that um you can let's say this is it's not compulsory guys this is enough what I've written so far is enough but what I'm adding is to show that button little bit to show that hyperlink like a button as well as with a different color or something like that okay so if you want that what am I supposed to do okay so all I'm going to do here is I am going to write um a new HTML attribute so I'm going to put add new HTML attribute okay is equal to I'll put the same way what I typed the previous one new at class is equal to I'll write as BTN BTN hyphen success okay you can write like this or um you can write it as a normal HTML I'll show you how both works let me just run this and check if it works okay but the problem is you can't just go to the edit uh just like that you cannot go to the edit you also have to pass one more thing uh let me just show you what how it is rendered then we'll come back to the part okay so uh the one which I've run is a mistake okay when you move your mouse here you see that the URL says edit question mark length is equal to seven same thing comes for the second which means both buttons look the same and work the same that's wrong okay I want this button to be specific to this record and this button to be specific to this record so how do I do that okay so here what I'm going to write here is I am going to remove this word which is there okay and let me see what is expected in the third I want uh HTML attributes I'm going to put null and let me move on okay so uh I'm going to give instead of the route values what I'm please note the parameters here I this is now highlighted properly first one is what text second one is what is the action name third one is controller name fourth one is Route values do you have a specific or different value for every uh button which is going to be created in this Loop yes I have how do I give that let me just give new okay let me just Open Bracket I'll put um at ID because that's what is passed is equal to item dot prod ID this is what is going to get passed okay I hope this is clear to you guys all right so uh and the next one is that attribute the HTML attribute okay so let me just pass a new HTML attributes is equal to let me open this I put at class is equal to sorry at class is equal to um BTN BTN hyphen success uh success or whatever you want to give I'll just give warning okay I'll show you another way it is much more simpler than this don't worry okay uh foreign I'll take it from here this class only I'll change it as BTN BTN hyphen warning that's it let me go back and try to refresh okay now let me move my mouse you see that the URL is a little bit different now okay edit I think you can see the URL at this corner I'll show it to you later properly so edit slash one edit slash two which means these buttons are right now changed into let me show The View source code that will be better okay so here you can see this product has changed into a proper value edit slash one and here it's changed into edit slash two it's easier for us to follow this way than the other one okay so remember that uh attributes I'll come and fix later okay let me just remove that right now let me not confuse that let me just keep it like this this is enough Okay so now uh let me write the same thing in a simpler way using just a href that will allow you to use a class or your CSS class much much faster okay so here href is equal to we'll have to write it using razor but other things you can write it quickly so like BTN BTN hyphen uh danger because it's a delete button okay and here I'll write the word delete okay and HF is equal to I'll use razor to bring a URL just like how I did below action okay so here I am going to pass uh first thing we are passing here is the uh action action is delete Sorry not did it it's going to be delete and what is the controller name controller name is going to be product and the last one is uh route values do you have any values to be passed to the root yes I have all right same thing which is written above uh you can just copy paste that because same thing we are looking for done okay so this is the action so let me just go back and refresh my page let's check how it works okay so you have edit and you have delete all right so um okay I think if you are comfortable with this let's follow this only it's not a problem both are fine I just showed you a simpler way of doing both okay so this uh the second method will be easier for people who are from HTML background more uh than uh the MVC pattern okay so I'll just use the same thing guys I can just copy that paste it on top and change that delete from uh from delete I'll just put as edit so that both will look the same only thing is the button uh class also I'll change from this one to warning okay now with that let me just go back and see whether it's working properly okay I've put it as delete the link is still showing as delete I guess okay here I just need to made it as edit done so now if I refresh I have edit button and delete button okay let me show you the code what is generated at the bottom you see that there are two ahrefs okay so uh you're going to product edit one product delete one so if you remember the in the beginning of the class I showed you that you have controller name then you have the uh action name then the ID if at all you have passing here I have to pass because it is expecting an ID to be passed in the controller here edit expects an ID to be passed do not forget that okay so now I have uh my uh design ready to take you to edit page so once you come to edit page what am I supposed to do it's very simple the first time you come to edit page okay just like how we are done in the previous programs and all when you click uh please note we are done drop down you choose a drop down and then I take you to that particular record here what I'm going to do is uh if you are clicking on edit of a particular record I am going to retrieve all the details of that particular record and display it in a form so for that I need um this page so before I go to that page I need to pull all records of this particular person okay so uh with that in mind let me write the code okay let me cut this for a minute let me write using uh product DB entities let me name it as DB is equal to new product DB entities okay return view now inside this before you return the view to the user what am I supposed to do okay so uh please note I need to fetch all the details okay all the details of that particular user and then pass it uh to the design or the view okay so how do I write that okay uh there are two ways to write so far I have not discussed the simpler way I've always taken the long way but first let me know the longer way then I'll come back to the short way okay so you need to create if I pass a particular ID you need to fetch one record one product record so one product in the table is nothing but one instance of a class so I'm going to create in one instance of a class called Product okay is equal to you know how to write The Code by now from data in DB dot TBL products where data dot uh prod ID is equal to equal to whatever ID you have passed all right select data and then say dot single right this is the code what we have been what we have been learning so far now I'm going to show you another way to write this code let me just comment this out okay this code I guess everybody is now uh very much aware of okay so uh let me just comment this out all right now after commenting this out I am going to write my own code okay so please note this is also another way but I did not discuss this till now because um I wanted you to learn that way more important than this okay so I'm going to call database call the products and find there's an inbuilt method called find okay all I need to do is pass the ID and it'll fetch me that particular person's record this is one line of writing that previous three lines of code okay this I kept on writing like this because I wanted you to understand this syntax this is not syntax this is just uh an inbuilt function you're just calling okay so database dot table dot find a record which has this ID please note find will return an entity with the given primary key value this is the primary key which is passed to you so if I give a primary key value it will fetch that particular record and store that object here in TBL product so when you're returning what am I supposed to return that product not a new instance of a product please note here I had written it as new instance of a product because it will be blank but when you are opening edit page your model should not be blank it should be already having some data okay so I'm going to fetch that also from the model but what data is there will be returned to the model so uh let me create a view for this let me add a view let's call it as edit only let me click on ADD okay what is the model here being followed same thing as previous one so I am going to write um this project name that is check MVC dot uh models.tbl product that's the object which I require because with this object I am going to take all the records because I've already passed all the records of this particular object through the controller please note this this holds all details of the ID which you have passed so if you have passed edit slash one that once product details are stored in this and that model has been given to me for uh design okay so all I need to do here is I can copy the code which I've already written in create because the table is looking the same right so I am going to take from using till this I'm going to copy that entire thing put it here below and edit which product what product am I going to edit okay so it's very simple instead of writing edit product I'll write the product name itself call the model and then call uh sorry you cannot call like this guys because model is C sharp right this is HTML now I want to start C sharp so I'll put at model dot okay um right now I have an object of TPL okay so I can I can either pull it uh from the table or I can even access it here directly from the model as a class okay so uh if the models is TBL product what am I supposed to do here I'm supposed to get prod underscore name see you can directly access it from the word called Model all right so let me just start with that so you're creating uh you're not creating a form rather when you click on submit I wanted to take me to edit only all right controller name is product that's no changes in that and multi-part form data is still there because in case the user decides to uh update the picture what am I supposed to do okay so that is why I'm keeping the same design as it is but please note the code which I copy pasted from there here it is going to change a little bit okay but then uh when I run the program one just showed me empty text boxes this program will not show me empty text box because uh please note the difference guys I want you to understand this very clearly when you came to this create a DOT CS HTML the model did not have anything okay let me show it again it did not have anything I just created a new table object and sent to you when I create a new instance this object is right now having values as null nothing is there so you you got empty space here in the text boxes came but when it goes to edit.cs HTML please note we are passing a particular product detail to that particular edit.cs HTML so when I talk to this object this object already has data it's not an empty object it has data so I'm going to display all those data based on that so I'll show edit pen or pencil whatever it is okay and then I'm going to keep the code as it is because I've already written that and all will come okay only one thing extra I'm going to do here is there is already an input type but I want to show what image is already or currently there in my table so let me just do that so image is already shown I wanted to show the image and then show the option of uploading a new picture so I'll just show what is already there it's very simple like how we have already written there okay let me just press Ctrl space content please choose the folder which is there file name will come from someplace else okay please remember that and that images and this file name will come from at model dot prod underscore pic okay what is the alternate text if the image is not available again at model dot prod underscore name okay and the file size should not be great so I'll say width equal to 100 height is equal to 100 so that it will not be displayed in the full page even though the file size is bigger okay so uh with that our work here is done now uh this will be input type equal to submit name is equal to submit value is equal to add product so here I'll change it into update product that's all okay still posted file only everything is there okay with that let me just run uh only half we have done update part we have not done exactly all right let's check whether this is working so let me go to index and then let me run the project okay so now um here when I click on edit okay please note what should happen when I click on edit I want you to take me to um the controller called as product okay and the action called edit with the parameter of one IDs one here if I click I should take me to uh the same action but the parameter is 2. so let me click here and let me open let's see what happens you see that I get a control but the data is already filled there okay how did the data get filled okay but because I passed it through the model okay I passed data from the controller to the view through the model three people are involved here but I'm getting uh the same output what I'm looking for okay so the data is already filled of that particular person okay so let me just click on pencil and see it changes here it's pencil what is the amount I gave and what is the image I uploaded for pencil everything is there now okay now uh what if I want to update when I change something and click on update what to happen that's our next Target okay so let's go to the next part and let me go to um product controller okay let's write the edit code okay let me quickly write that it's the same code AS insert only one difference is that I'm you have a choice of replacing that already existing image or adding as a new image I am going to add a new image if you are updating if you are not updating the same image will be retained okay with that in mind let me write the edit code okay so once you have clicked on uh you've given the data and you clicked on submit what should happen all right so let me come to the post part this is just get part where you're getting all the requirements or all the details of the particular product okay so here I've just commented the syntax this is what I've been taking so far this is also another way of writing the same code okay now edit what are the things I should take just like how you have seen uh create same two parameters to be taken one is an object of that class second one is HTTP posted file base okay and one minute okay I guess it's a mistake anyway did somebody raise your hands or something all right uh I'll answer that towards the end okay now let me just finish this okay let me keep the same name posted file do not forget that file name should be same right so um I've got the data which is passed edit okay so let's move on um I've got two things here one Whatever changes they have given to this particular product also what file he has uploaded in case he has not uploaded I'll not do anything I'll not replace okay so for that part uh the first thing I'm going to do here is to check whether the file is there or not if this is uploaded for example I choose edit and I only want to change the quantity and price not the name and the image what should I do if you don't want to change the image don't write the code for that okay we'll skip that code and go to only updating so let me write the code for that okay so let's start with this let's start with the simple thing called string file name okay uh I'll create it as file name is equal to blank okay initially in case you are upgrading I'll change it okay so with that I'll start I'll just start with a simple if condition if this file okay if that posted file is equal to or not equal to null okay let me just keep it as not equal to null what do you mean by that if something is there inside that posted file if you're all giving a file to me to upload then I should do something otherwise just update the data and move on updating the data is very very simple okay so let me just take that um if at all yes given a new file to be updated what should I do I'll write string extension same code AS previous guys okay here uh extension is equal to I already have imported that so I'll just call Path dot uh get extension there's an inbuilt method okay I'll just give posted file dot file name give me a file name I'll give you the extension I've got the extension what's next okay you can write that if condition if extension is equal to jpg PNG all the same code what you have written on top we can be reusing that here okay so I'll take it from here but not everything only till here I'll copy I'll paste it here all right let me close that if condition here now so what should I do okay uh file name already I've created so outside I'm gonna just say file name is equal to okay if at all it is jpg or PNG then take the file name create the file name like the previous one what we did save path is still the same posted file same place I'm gonna upload the new file please note I'm not replacing I'm creating a new file okay and this data only I'll be storing in the database okay so I'll be storing this in the database I'll have all your pictures with me but the first one is uh uh the current one will be the one which is then the database the name file name all right so I've saved as that same thing okay and uh here this is not required because I'm not creating a new file rather I am updating an already existing record okay please remember that and let's close the if condition what I open okay now uh all those things this still this what I've written will only get executed if in case you are giving a file for updating if you are not updating the file but remaining everything you're updating the next part of the code should get executed what is the next part of the code okay it's very simple I'll write using product DB entities okay uh DB is equal to new product DB entities now there is another way to do this but I am using the longer way okay I want you to find a shorter way if you if you want okay but I'm going to just update uh already existing record so for that I need to find what data is available in the current one so I'm going to create an object of product okay so uh let me name it as TBL okay which is this is going to be the new record okay so who is giving me the new record passed as data here this one so all I'm going to do is I'm going to fetch all products with respect to that ID what is there in your model so how do I do that you know by now it's a simpler way find find from what product dot prod underscore ID now what is this product what is passed through this method from that I'll get the ID of the person now I've got the idea of the person all I need to do is call TBL dot prod name is equal to whatever is passed to me dot Rodney okay this is what your user has entered in the text box in the form this is what I am updating now okay so let's move on TBL dot prod underscore price is equal to from whatever the user has entered in the form dot price next one TBL dot um quantity is equal to product dot quantity simple all right but now the picture takes a big turn Okay because if at all the file name is still blank I don't want to do anything what if the file name is blank if the file name is blank which means you have not posted a file if you have not posted a file I need not update the picture name image name I need not update so I'm going to write an if condition here saying file name okay if file name is not equal to so I'll put not file name dot equals blank okay please understand that if condition what I have written I just mean that if the file name is not equal to blank okay if it is equal to blank what does it mean if it is equal to blank means you have not uploaded a file so you can just continue but in case if it is not equal to blank which means you have uploaded a file now I want the file name so I'll take the TBL dot uh pick product pick is equal to file name what you have created done okay after this is done all you need to do is make sure that you save the changes that's it and then return back to main page my work here is done with edit also okay uh let me run the project you cannot open edit directly guys I uh I think I clicked on controller okay so it's not a problem but you cannot open the file directly from edit slash filing you cannot call like that you should call it through the proper Channel okay you cannot call edit without a ID because it is mandatory so let me just call uh product let me call the product index first so that I'll get the full structure okay here now all I'm going to do is I'm going to click on um pen edit it okay so I'm going to make it uh the I'll let the name b as it is or I'll just put um Reynolds n okay I'll put the price as uh eight and the quantity as 250 I'm changing everything guys okay I'm going to change a file okay let me just find another file um okay I've chosen a new file and then let me click on update okay if at all the program is right it should take me to um different place let me see what is the message set to an instance of an object let me check whether I mean things gone wrong uh the product ID is missing okay uh so let me just go back and let me find out see in the form normally uh when you update please remember while inserting I don't require an ID the product ID is not required but when it comes to updating you require the ID you have to have an ID even though it is auto generated for updating you require the ID which is not there in my table so to fix that let me just do that also okay so I need to add ID but I don't want to show that to the user okay we have done this in um I think JSP we had done this okay we wanted to show uh for the database I wanted the ID but I didn't want to show to the user okay so what I did was basically I just put a hidden form field I don't know how many of you remember this but I'm just going to use a hidden form field here also I'm going to say HTML dot hidden for okay hidden for I need to pass only a few things uh number one and you know I'm going to display this to the user right so I need not even give any CSS style nothing I just call model goes to model dot Rod underscore ID that's it so what happens here is the ID is now passed as part of the form so ID is set since I did not set the ID here it came as 0 that's why it could not update it so now let me refresh or run this project once again and please note I clicked on edit and clicked on play my project will throw an error because you're trying to access edit directly which is going to throw an error okay because you're not supposed to do that okay so let me just put slash one that is fine because I have a parameter passed okay so you have taken uh this one with the parameter so um let me just go in the right way I'll just say index let me open this nothing has updated because my program through an exception so try catch came out all right so let me click on edit uh I'm going to change that I'll just make it as um pen 8 rupees 250 and I'll change the image to something and click on update okay you can see that the update data is updated uh the Pen's name is changed price is changed quantities change image also has changed all right so I have done this as edit part so edit is also working the last part for today is delete all right so now what we are going to do with delete is when you click on delete please understand that when you click on delete I want you according to the controller we have given you a different uh method for that you can see there are two methods will be there with delete one is to retrieve all the records of the particular person and show are you sure you want to delete and then actually to delete okay but I am going to shorten it into one method okay so you give me an ID I'll delete that record that's all okay so uh how to do that let me write the logic then I'll come back to the block okay so I'm going to say using product DB entities DB is equal to new product DB entities and here I'm going to call okay let me put that return view do not forget that and let me just put DB dot TBL products dot remove okay remove what you need to pass an object of the table which you want to remove okay so for that I have two lines okay but I'm writing it in one line DB dot TBL products dot find with whatever ID you get okay please note I have nested it okay what do you want to remove you want to remove an object of a TBL product which will match this ID okay this code what I am highlighting will return to me uh a record which will have this particular uh object okay and I said remove that from database and after this is done do not forget okay this is very important save changes okay now after you do that I don't want you to show me the same page once again I want you to go back or open that index page once again that you have a code here let me just open that and I'll put it here return redirect to action index take me to the index page immediately after you have deleted it which means refresh the index page if you're already there all right so let me do that let me create I'm not going to create a new view guys please note for delete because it's a simple operation I don't want to create a view I want to rather tackle it from uh the design view what you mean in index page I'm going to show the delete button right so once you click on the delete button I would like to ask the user are you sure using JavaScript okay and once he clicks on yes I want to take you to uh this delete method with IDs whatever you have chosen okay so with that in mind just hold on okay so with that in mind let me just write the code here it's very simple uh I'm going to just write one more I'm going to add a small block of code here called on click is equal to okay I'm gonna write return confirm please know that is HTML guys uh JavaScript sorry okay uh return confirm I'm gonna say are you sure you want to delete okay let me just put the product name there if you want to put the product name just put add in front you get the idea right so I'll call Item dot product name so what will last if your delete when delete pen it'll say are you sure you want to delete pen okay and then close that I'll close it okay so what does it happen basically what I've written here is once you click on this hyperlink okay I'll ask you whether are you sure to uh delete this if you click on yes I'll return true if you return if you click on false I'll not do anything I'll just keep quiet so if you click on yes and if I return true where will you go you will go to the delete function of the product controller with the ID as whatever you have given so if I go to the delete function with the ID as whatever you have chosen what will happen it will delete that particular record from the table and take you back to index page let's check whether it works or not mm-hmm okay so let me just open a product okay so uh you know how the editing was working now let me click on delete uh let's see what happens when you click on delete I get a message I get a alert dialog from JavaScript saying are you sure you want to delete pencil this is the product name okay and if I click on cancel nothing happens because it returns false if it returns false it will not proceed with its operation but when I click on OK what should happen just think what is happening when you click on OK it is going to call an action in controller called product called delete okay and with the ID which is passed okay let me move your mouse there please just look at the the bottom of the screen here okay you see delete slash two which means delete the second record I'm passing the ID S2 okay so when I click on OK that ID gets deleted that particular ID based product is getting deleted and this page index page is called once again when I do so that new that old record is now deleted it's not there because I'm getting the new list okay without that deleted record so I've got this information all right so this is uh crowd operation using asp.net MVC okay and we have used Entity framework along with it so wherever I wrote Entity framework code you can also write SQL uh based connection code or link to SQL code whatever you want okay but Entity framework Works more smoothly with MBC because lines of code makes sense with us the models make sense to this particular project okay I hope this is clear to you guys all right so um before I wind up for today let me also show you that scaffolding which I told you right because in the next class all I'll be doing is I'll convert the same program into a shopping cart because I already have products detail here all I'll do is I'll just convert this into a shopping cart but before that let me also show you without even doing this okay what if I would like to um create a project okay let me just quickly do that um let me create a new project okay it's not a web application by the way this is only for scaffold demo I'm going to put scaffold demo okay I'm gonna create a new scaffold demo with that particular project okay so uh I'm going to choose MVC click on create Okay the reason why I'm doing this guys uh whatever I did right now but please note that the project which I did right now requires a lot of modification so you cannot use direct scaffolding but imagine a crud operation what we have been doing without file upload without file upload if you want to do credit operation uh my uh MVC scaffold can work it without even writing one line of code we can do a full crud operation I'll show it to you now okay just give me a minute let me quickly create one table please do bear with me guys I'll finish it as soon as possible uh SQL Server database let me name it as booksdb just for understanding okay it should go to app underscore data folder anyway it will automatically put otherwise it's better you only put it there okay so let me just add a new table okay I'll keep only four or five records not more okay so I'll name this table as TBL uh books uh this program what I'm doing right now doesn't require one line of code guys okay it just requires your knowledge of area Dot and entity and the scaffolding idea in ASP uh MVC okay so I'm going to put it as a book underscore ID letter P integer only and book underscore name VAR care I'll put it as worker Max no nulls allowed uh next one is book underscore author I'll put it as VAR care again okay some name should be in restriction okay so last one book underscore ISBN or uh I'll just put VAR care again or let me just put in teacher sorry hint not null next one is book underscore published here okay let's put in that's it okay so I have only some records here let me also make this Auto increment okay done okay so I've given TBL books let me just click on update one work is done second work is to create the model so let me just right click add an area dot entity data model let me name it as books model let's run click on finish okay so once this is done just choose table click on finish and once everything is over here please note all I am going to do is create a controller and whatever operation we want to do can be easily manipulated without writing one line of code let me show you how that is happening uh you all you need to do is go to the solution Explorer and create a controller okay but this time I'll be choosing um MVC 5 recreate and write operations with the view the third option which I showed you which I said I'll take it towards the end okay I'll do that quickly and once you give that please note without writing one line of code my entire current operation is taken care by the system because that is standard operations all right so system already has a template and its scaffold will be available for us let me just show you quickly uh let me right click on controllers let me add a new controller but this time please choose this one and please remember this only works with Entity framework not with link to SQL not with SQL Server this works with any database what you want to work with the third one specifically using Entity framework let me click on ADD now look at the structure first question it is asking me is where is the model located okay let me open that and look for the model okay please note inside scaffold demo that's my project name dot models you have TBL book that's the model class and what is the context of your data it is my books DB entities that's the model's data context okay so you're going to create views you're going to use everything and the controller's name is going to be I'm going to remove the TBL and put book controller okay I'm going to name it as book controller and click on ADD that's it okay um that's the error is because I think I've not built okay just build the project so that this is aware for my system okay and once the building is done let me just go back and try to do the same thing once again I'm adding a new controller okay using Entity Framework model class I'm going to choose TBL book entity is DB entities and the controller name is books controller let me click on ADD now the scaffolding is happening guys please note uh once the scaffolding is done I'm gonna run the project I'm going to show what is getting generated let me run the project and show you how efficient the work is already done what I'm looking for okay the scaffolding what is happening right now is generating View and the methods for that particular view okay let me just run this I'll not show the code what is generated because the code generated might be a little bit here and there but still you will get the full functionality what you're looking for I'll show you that quickly please note I'm not in any lines of code so far okay in order to retrieve update insert nothing I'm not done any code for that but let's see how uh they have given me a form in which I can already have these operations ready only thing is I need to modify accordingly so once the localhost is open I'm gonna call the books controller because by default it calls home controller I'm going to call books controller okay it will call the index page of the books controller please note already there is a form called uh something like this book name author ISBN year okay and I have a small hyperlink say create new let me click on create new it's asking me what is the book name okay let me just give um C sharp okay author um Ryan okay ISBN I'll just put some number here 2015 and then click on create please don't none of this code I wrote okay um let me reduce the number because it's an integer let me click on create here our record has been created okay so I can create another record ISBN four five six seven eight nine and here is 2020 I'll create a book okay so you see I didn't write any code for this I got all these input without even writing code now I can click on edit okay let me click on edit and show you what is showing me it is showing me only those records what do you want me to edit I can just write C sharp programming and click on Save it's now updated okay I can get only details of that particular book like this only details okay let me go back to the list and when you click on delete it's not showing uh JavaScript but rather it is just displaying all the records once again and saying are you sure you want to delete this if you click on delete that record is deleted and it's showing back to me okay so this is scaffolding all right a template scaffolding what we have using uh asp.net MVC as well as Entity framework okay so this is done but then please note it is not as efficient as you want okay because it is not a book name author name nothing like that is just put the database column here so how do I modify it pretty simple okay just go back to your solution Explorer open views you have a books uh view in that one you have index.cs HTML open that okay see where they are given th for model name remove that and put display name what do you want to display there okay so here I'm going to put book name okay I'll put author name here I'll put ISBN here I'll put here of publishing okay that's it now when you go back and refresh it you get proper value done okay if you don't want any details here you can remove that hyperlink from there that's it you can you you have a full choice if you have understood how this project works okay so by this I did not write any lines of code I just got a full-fledged working uh demo okay if you just check the um controller's code you can see index it returns that as a list details what should I do okay to create a detail what am I supposed to do okay and editing what am I supposed to do deleting all those code is written here just like how we had written but it is generated this is called scaffolding okay I hope this is clear to you guys all right so with this I'll stop for today guys

Channel: Thomas C G

Views: 13,367

Keywords:

Id: MrNLuw2l9vQ

Length: 120min 54sec (7254 seconds)

Published: Thu Jan 26 2023