Advance master details entry form in asp.net MVC

welcome to dotnet awesome calm hello friends how are you hope you are doing well in the one of my previous article I have explained how to create a master details entry form in asp.net MVC here I explained very simple application without edit delete functionality and all with text input fields for details record here in this article I will show you how to create a advanced master details entry form with following added features cascade drop down in the details record and edit delete functionality for edit or delete added details record here is our master details entry form will looks like you can see her in this picture I have added to drop down for implement cascade functionality in the details record and you can also see here I have added a remove button in each row for delete already added records and I have made each I have made each row editable for make it possible to change already added details record okay so let's start first of all we have to create application in this article we have used Visual Studio 2013 for create a new project we have to go to the file menu then new then project from here we will slick asp.net web application under wave then we will enter our application name here I will enter a TV master details and then click on OK button it will brings up a new dialog window for select template here I will select empty template and I will checked MVC for add folders and Co references for and then I will click on the ok button our application is created now I will create a database for our application as this is a tutorial project I will add database in our application here in the a PP data folder so go to the solution Explorer right click on a PP data folder ad and then go to the new item from this window I will select SQL Server database enter your database name and then click on Add button our database is created now in this database I will add four tables as per our application required so just double click on your database name so it will open the solution Explorer and from here we can create tables first of all I will create a table for save product categories just right-click on your tables node then click on add new table here we'll write our tale schema code so I'll add a table name categories category ID I will make it identity field categoryname 50 not null schema is done and then click on update button and from this window I will again click on update database button now it's saved in the same way we add another three tables just right click on your tables node add new table so this is for our products table product ID I'll make it identity column and categoryid product name yes this is also done then click on update button and up then click on update database then I will add order master table in this table we will save master records so order ID identity column order number order gate this is also done and click on update button and then click on update database it will save to our database and we'll get one last table for save details occurred so there is order details order details ID identity column order ID product ID great not null 1tt and I will create a foreign key for link with order master so we can add from here add foreign key should be order ID of that table your master order ID so you can see her I have added a foreign key for the link to the master table this is done now I'll click on Update button and then update database button so you can see here I have added four tables you one for categories then order details order master and products so this is done now we will add entity data model so go to the solution Explorer right click on your project name got to add and then click on new item from here I will select add your dotnet entity data model then provide the model name my model Dottie DMX and then click on Add button from here a dialog window will brings up here will select generate from database as we have already created our database then click on Next button here I will select our database or you can also create new connection by clicking on the new connection button if your database is not available here check this option save entity connection string in web.config as this name and then click on Next button from your house select entity framework 6.0 click on Next button till now we have just created tables in our database so I will check this one debuts and then I will click on finish button and then I will click on finish button entity data model is added in our application so you can see here we have all four tables and order must read and order details table is linked now I will add a partial class of order master in our application so here so first of all I will create a folder here for make our structure looks good extended model and then click on right click on extended model then go to add new item from here I will say class under code and I will enter the name order master dot CS and click on Add button now what I will do as I am going to create a partial class of order master and its exist in our adv master details namespace so I will remove this one and then here I will add a partial keyword here I have added this partial class for add a new field in the order master class for gate order date in a string format on a date chain I have added this for because we will pass us date string from our JavaScript that is the reason I have added this field so this is done now we will add MVC controller so just go to your solution Explorer right click on controllers folder then add and select controller from here I'll slit in VC pipe controller empty and then I will click on add button enter your control name here in my case it's a home controller and then click on add button it will add a controller yes our home controller is added we don't need any pre added code here so I'll make it empty it's done so first of all we will add a mushy action here so I'm going to create action public action result index this is our first action and as we have added this action we need to add a view also for that action so just right click on your action name then add new view and here you can see I this is get the index view name we don't need to select any template here use layout page it is ok everything is fine just click on the Add button here is added now we will add some HTML code here for McCrady our view this is sloshed details in chief form we'll get to form here one for master and another is for details record order and this is for order details or order items section here in this deep we will write HTML code for master records so first of all I will create a table with class order number you will write an input field for the order number and also we will add a span here also for so error message order number required so this is done they will same way we will create another row here for order date so I will just copy it and paste here for quicker on a date this should be order date now we'll add one another row for order description so here to your description so this is our total co HTML code for master record and now we will write HTML code for the details record you can see here I have added a ID attribute here in this row to your main row we need to use this ID from our JavaScript code later we can see this and also I will add on change event here Lord product with ease so you can see here I have added a select box and with the ID product category and also I have provided on change event load product when this event will fire on change even will fire we will load the product on the respective drop-down box now I will add one another drop-down box for load products for the selected product category and now I will add a input box forget quantity I will add one another input box of the rate and at the last one I will add in button this is done now we will add one another D view for show added order items or items you and finally we will add one submit button for save the order details to our database so our HTML code is ready now we will install bootstrap for our application for me the page looks good so if you have already added boostrap CSS here so you can add all also you can install it from knowbut packages so for installed bootstrap remove it by visits just go to your solution Explorer right click on references and then manage new it packages from here search for bootstrap and then select bootstrap CSS and click on install button so it is installed close then we will add the reference for the bootstrap CSS here in this page just drag this bootstrap CSS here just added and as we can you can see here I have added one fade to order date so further implement date/time picker we need to add two more references one CSS for UI you can see here we have used order date so we need to implement date time picker here also in this page and for this reason we need to add one CSS and J's more so here I will add one more CSS take query why CSS and also we need to reference script jQuery UI J's so javascript code here enabled a time picker this is almost done now we need to add some few lines of CSS code for make this page looks perfect so here I am going to add some style code should be span dot error display:block visibility:hidden this view is completely done now I will add a JavaScript file where we will add our client-side code for save order to the database here in our application I will add a JavaScript file into script folder so just go to the solution Explorer then if there is no script folders already added in your application so first of all please add a folder with name escapes so right click on your project name add a new folder here I'll rename it CRI video scripts the folder is added now we add a JavaScript file into that folder so right click on the script folder then go to add and then you item from here I will select JavaScript file under scripts enter your script file name added i have renamed it my script or GS as it is a demo application so in your case please provide a meaningful name here and then click on add' button so our task it palisaded here in this file will write all the client-side logic for save master details data to our database first of all I will add JavaScript function for page categories data from database and enter to a drop-down list so that agrees you can see I have added a element in a parameter this element is the drop down where we will render that category switch from database I've added a condition here if a degree is already loaded then I'll not face it from the database so I have saved this one if it is greater than zero sorry it will if it is zero then it will pitch try to paste data for me database and if it is already loaded so it will fire the else part I will write a judge method we will write one another function here for in dirt the actual data to the drop-down so function render category I'll call this function from you and also from here so write code for rendered the categories data from database to this element and then our ad of select I am going to append a new option you can see here first of all I have make the element empty and then added a new option for select level and then I will loop through the categories for load all the categories faced from database to the our drop-down list so here I will use each dot degree ID dark-haired lady named so this function is ready so this is done now we will do the same for load products from database so I will write one more JavaScript function per load products from database and render the product list in our drop-down list h products as per our article description we have to implement cascade drop down for product category and product down list in the details record and as there might be possible to have multiple details record we have to take care for load products to respective product problem list when product category drop down on change event fired so we will write the method for lot products in the product drop down list such a way that we can reuse the same method for all category put drop down list so I am going to add a method here function load product you and I will pass a parameter here category chow down I will write as Jack Schmidt third per page product from database I gate poor dopes that degree ID you can see her in this method load product I have first an HTML element as a parameter here the HTML element is the element which is actually called the load product method using this element we can find the product drop-down list where product list will be rendered so first of all here I will write one another method for render product I will pass two parameter one forget the element where we will render the product so element and another is the old itaú and this method I will call for rendered products using this parameter I can find for the actual drop-down list where we need to render the product so or find this dot parents so here I will write code for in the product and first of all I will make it empty then we'll append one option for gate select level and then I will load all the products to the drop-down list dot each data so this file function is also ready now we will add some jQuery code for write few client-side click events here we will write all click events code inside document already method so first of all I will start with document dot ready first of all I will write add button click event for add order details record here inside audit ready method so add button click event in this method we will take order item validation first and then if all is valid then we will add it in the order items table so first validation and add order items so first I'll check the product category is selected or not so if close to zero that means it's not valid and here we will show the validation message if it is valid then I will remove this validation message so it should be hidden then I will do the same for check product is selected or not so it should be product this is also done and then I will check quantity it should not be blank or zero you you and here we will check the rate this is the last one and if all this valid then we will add eight word order item table so I will make it copy-paste here change it to rate I will check it should not be empty and and it should be numeric value so here I will check is non option so all is done now a is all valid we will generate a new row for the order details record and will happen to the order details table so first of all I will clone the existing rule you you can see here I have created a clone copy of the main row I will do the necessary changes here in this clone copy of the main row and then we'll append to the order item which will stable straight for that category drop down value you now we have to replace the add button with the remove button so for this I will write the video code for replace the add button with the remove button now it's ready for append to the order item table but before happened I will remove ID attributes or it will make duplicate IDs in a single HTML page we should not be done that is why we should remove the IDS from your this lone row so here I'll write this code you know what save IT then here I will append after happened clear selected data for Monroe so here who I think be the product category and product optimum value should be zero and the quantity and read you should be blank our ad but æneas is done now we will write code for remove button when user will click on remove button it will remove the entire row from the order item details table so here I am going to add the code for remove button you can see here I have removed the entire row the button remove button belongs to this is also done now we will write one another event or save order to our database this is done now we will add save order button click event here or save button is a submit' ID here I will take the entire order form values first and if we found all valid then we will submit a form for save order to the database you here we will take all the added order items first so validate order items first of all I will do one thing order item error message empty so here I'll light this code for make this message empty order item error dot txt - blank then I will go for check all the added items we'll see here I have added a variable leashed for store all the valid order items here and also I will add one more variable for gate count of invalid items here if we found any invalid entry of order items we will count error items and will add error class for highlight the row contains the error entry here will count the error entry so error item count plus plus and if there is any error for highlight the row I will add a class this is done and if there is no any error then we will create an order item object and we'll push this object to this list object we have created over here so that means we need to create our order item object here first order item goes to so we have following product ID 150 lead sorry I do a doctor so our object is created then we need to pose this object to our list object we have defined here forget all the valid order items in this list you now we will show the error message if there is any error contained in the order item list means in the retailer's record so I will check if there is any error or not means error item count greater than zero means there is any error exists in the order item details so I will show error message here I team and we should also show them error message if there is no any valid entry so if the list is empty we will show the error message again here I'll just make it copy paste for quicker so we have we have done the order item validation now we should validate the master ik and also here in my case the order record so I will take order number first if order number if this is plank then we will show error message sorry I forgot to add this one - as this is ID and else will hide their message for make it simple and easy I'll just copy it and paste you the I will change the visible ballot to hidden what a number validation is done now I will validate the order date for make this quicker I'll just copy it and paste here and I will change this order number to order date it should be all sorted date and this is also and finally here we will submit our form for save our order details recur to our database here first of all I will create a variable the object which we will post to our MVC action first of all here I will create a object which we will submit to our NBC Action for save to our database so you Rita here we'll write as X method or post this order object to our ABC action for shape to the database begin to Timmy Timmy torch it he will create we will clear the form you the script file is ready and finally we will call out product method here I've done this line for load all the categories when page is loaded first time so this file is ready now I will add one NBC Action 4 page for a category from database and written as a chasin result and the name of this action method should be Gate product categories here my database entities is our entity data context this is ready now we will write one another MBC action for which product of selected product category from database and return Isis Jason result so you shall result and the name of this action should be gate products please stop product why did I was entities or Delta context so perhaps guilty she dot so this is also done and now we need to add the last Emma's reaction here for save the entire order to a database so this is and this method name should be say border month save and it should be HTTP POST method you can see here I have declared a variable get time data orgy so this is for gate the actual date value from order date string and if the model is valid then we will save toward it this is also done we have done all the steps now it's ready to run the application but make sure we have some product already inserted in our database first so just go to your solution explorer open your database and for insert product we need to also insert some categories here in this categories table so first of all I will add some categories here it's done and now we can add some products so this is done now we can run our application for check everything is fine or not and if there is an issue then we will do some necessary changes or make this application works fine I am going to run this application let's see what happening we got all the fields this is our order master record and this is for details let's see everything is fine or not oh sorry maybe I have done some spelling mistake let me check from the render this is category name oh sorry for spelling mistake for now I need to do this changes you get a got T sorry from this okay and let's check one if there is anymore mistake I have done here mmm yes one more mistake I have done here so for that just fix your also okay now it's fine let's see I'm going to refresh this page yes now the data is fine this is required all this required at least one order item required so I'm going to add one ebook s2 quantity one 150 so add you can see here there is also a remove button came for you move this entire row if we don't need to and we can also edit data form here to electronics male 1 2 5 0 0 0 add we can also check here if we move is working yes it's working fine so I have added here this 5 and our number is order 1 and order days to day so let's sick everything is working or not say yes successfully same so we will check our database yes this is inserted here let's take horror items yes we also got this order item 5 quantity 150 rate this is fine so thank you for watching keep watching and for get latest articles and don't forget to Like comment or subscribe thank you bye bye

Channel: sourav mondal

Views: 150,022

Keywords: master-details, entry-form, mvc, order, order details

Id: wQZRC7vXT08

Length: 97min 2sec (5822 seconds)

Published: Mon Jul 04 2016