Forms in asp.net core MVC 6.0 | How to create forms | Asp.net core MVC 6.0 tutorial for beginners

[Music] forms play a vital role in any web application thus having complete understanding of the forms is very much important while working with it our today's session is going to cover many different aspects related to form let's get started this is our asp.net core MEC application and I will show you the user interface of this application this is our application if you look at the application we have different tabs here home then privacy contactors and tutorial there is no way we can input some data to the application right now our application is just displaying the static data now why do we use forms we use forms to collect information and they are used in variety of situations starting from login to login the user to the application views login forms when in contact page we use contact forms we take the example of our own application if we have to create some tutorial details again we have to create a form in short whenever we have to collect some information we use forms now let's see how to use form in our application let's start with designing a form now we are going to design a form that will create new tutorial in this project structure views folder contains all The View files that means UI files if I expand we can find different folders Home Shield and tutorial right now we have only one file that is index.cshtml let's see what is inside controllers folder here you can find two controllers one is home controller and the other one is tutorial controller inside tutorial controller we have only one action method that is index and and this index action method is returning index View and we have a controller wherein we are injecting the dependency if you want to know dependency injection and how to set up Entity framework code with repository pattern I'll keep the playlist Link in the description later you can have a look to add a new view file right click on tutorial folder add then you can click on new item choose razor view empty and you can name it as create tutorial add now we will remove all this code if you expand www root folder you can find the folder by name lib if you expand this you can find the folders bootstrap jQuery and other stuff this means bootstrap is already installed in our project we can make use of boot we can make use of bootstrap to have to enhance the look and feel of our project if you want to know more about bootstrap then you can visit the site getbootstrap.com here you will find lots of examples here is a simple form structure is very simple we have used the form tag to create a form and here we have three sets of div inside each div we have two controls label and input and again here we have label and input element for description and inside this div we have a button host type is submit if you notice we have used form group control on development it's a bootstrap class and it is used to add some structure to a form one more class that we have used on input element is form control if we use this class on a if we use this class on input elements then elements will have hundred percent width one more important thing is submit button here if you notice we have mentioned type as submit submit button plays important role in form when a user clicks on submit button the form data will be submitted to the server we are using this form to post the data to the server then having just the submit button is not enough we should specify the HTTP method that is used to send the data to the server to do that we should use the method attribute of the form tag and the method that we use to send the data to the server is HTTP post method now slowly we are going to bring asp.net core MVC features into this form now we are going to make this view strongly typed to do that we are going to specify the model write at model right at model then specify the model next we are going to specify the details of the controller and the action method that are going to handle this form to do that we make use of tag helpers just a quick note on tag helpers tag helpers are used to help HTML tags work more efficiently with which you can write regular HTML tags and mix server side attributes there are many things to know about tag helpers I'll cover them in a separate session but in today's session what we are using are form tag helpers before using tag helpers first we should make sure that tag helpers are available to use can you see view imports.chtml file here open this file this add tag helper directive ads tag helpers to our project we have it in our project so we can use Tag helpers bind the controller using ASP controller attribute we have to specify the controller name controller name is tutorial we can specify the action method name using ASP action attribute I'll mention the action method name later now I want to bind this label and input to name attribute of tutorial model to do that we should make use of ASP for attribute and I can specify the attribute name here name is the name of the attribute done I'll copy this one and use it on the input tag as well done now we want to bind this to description attribute instead of in stuff name we have to specify description we are almost done with the view next we are going to modify the controller to handle this Form controller that handles this form is tutorial controller let's open that let's expand controllers folder you can find tutorial controller here let's add new action method by name create tutorial I'll copy this code and I'll change the name to create tutorial I'll remove this code we'll return The View this will return create form now I'll run the application I will click on tutorial right now there are no rows as we don't have data in database let's modify this form and create a link I will open index View I want to have that link at the top so I'll add it here we have used anchor tag here we have applied bootstrap classes to give a look of button and these are the Tag helpers when we click on this link create tutorial action method from tutorial controller will be called let's refresh and see we have a button add new tutorial when I click on this button we get a form I'm back at create tutorial view earlier we did not mention action method name that is going to handle this form for I'll specify the action method name now create tutorial is the action method let's try to submit this form even if I click on submit nothing is happening see new tutorial has not been created the reason is we are posting form data using HTTP post method if we don't specify anything then by default action methods handle HTTP get request to handle HTTP post request then we have to create one more action method and with the same name and decorate it with HTTP post attribute now this method will handle HTTP post request and this action method will handle HTTP get request let's modify this method to receive model data if you are following the series by now you know that you we have set up Entity framework code in our project and we are using SQL Server as our database this create tutorial action method should store new set of data as a new record in database right now we should verify which method will write data to the database for your information we we have implemented repository pattern here inside repository folder you can find eye tutorial repository which is the interface and this tutorial repository is implementing this interface here you can see we have and right now we don't have implementation for this add method I'll remove this line and write actual code code is very simple we are making use of context object and we want to write data to the tutorial table so context.tutorials Entity framework core has method add which will add record to the database table and we are passing model data rest Entity framework core will take care here we should call Save changes method this method saves changes to the database then we are returning newly added data we should call this method from create tutorial action method again it's very simple here we have setup dependency injection we will make use of this tutorial repository and call add method we are calling add method and passing form data I will decorate this action method with HTTP get now instead of returning view I want to call this action method anyhow this action method has a code to display all tutorials so instead of return view we can redirect to action here we are redirecting to action index Let's test our changes now I'll click on add new tutorial it should display now when I click on submit it should create new record in database working see we have added new record to the database and is and index view is retrieving the data from database and displaying here I hope you are clear with how to work with forms in asp.net core MEC application thanks for your time see you soon in the next video thank you

Channel: Just Pick and Learn

Views: 6,391

Keywords: just pick and learn, pick and learn, Asp.net core MVC 6.0 tutorial, Asp.net core MVC tutorial for beginners, Forms, How to create forms in asp.net core MVC, Why do we use forms, form tag helpers, bootstrap form, httpGet, HttpPost

Id: YsXB-gIsi6M

Length: 11min 21sec (681 seconds)

Published: Sat Nov 12 2022