Create a New View in ASP.NET MVC

Hello friends, I hope you all are doing great. In today's tutorial, we are gonna have a look at How to Create a New View in ASP.NET MVC. It's 7th tutorial in ASP.NET MVC series and I am hoping you are learning from it. If you have any suggestions, then ask in comments and we will help you out.In our previous tutorial, we have seen How to Create a New Controller in ASP.NET MVC and we have also created the New Model in ASP.NET MVC , so now we are only left with View which we are gonna create today. Both Controller and Model comes under back-end / server side programming while view comes under front-end / client side programming. Here we are gonna create a View for the user to interact. So, let's get started with How to Create a New View in ASP.NET MVC:

Create a New View in ASP.NET MVC

• We have already seen How to create Models and Controllers, and now we need to create Views in ASP.NET MVC so that we could interact with our user.
• When a user sends a http request, then controllers get data from models and then display them on Views.

• So, in order to create a new View, you have to open the StudentController.cs file, which we have created in the last tutorial.
• Now in this file, right click on the Index in the code and then select Add View, as shown in below figure:

• When you click on Add View, it will open up a new window named "Add New".
• This window is used for adding new View in your project.
• We have to set some values in this window and then click on the OK button, as shown in below figure:

• As you can see in the above figure, first of all, we need to give it a name, which I have used "Index".
• In the Template section, I have selected "Create" template as I want to create a registration form.
• In the model class, we have to select the model, with which we will assign this View. So, here I have select the StudentModel, which we have created in our 5th Lecture.
• After these settings, click the Add button and in your Views folder, a new folder will open up named Student linked to StudentModel.
• In this Students folder, a new index.cshtml will be created and it will also open up in the workspace, as shown in below figure:

• Run your project and add /Student after your base name in the url, as we have placed this index file in the Student folder.
• When you open this link , the default index view page will open up, as shown in below figure:

• Now let's make some changes in the index file and get data from the Student Model.
• I have added two lines of code, the first line is creating a label and getting the text from our model class.
• In the second line, we have created the textbox, as shown in below figure:

• I have removed the code for the Create Button, and added these two lines.
• Now let's refresh our page, and if everything goes fine then you will get results as shown in below figure:

• That's our final Index page for newly created View.
• Now, let's keep it here for now and let's discuss some more concepts in ASP.NET MVC.
• Till now we have seen what are Models, Views & Controllers and then we have also seen How to create them.
• Here's the video demonstration of How to Create a New View in ASP.NET MVC:

I hope you have enjoyed today's tutorial. In our next tutorial, we will have a look at URL Routing in ASP.NET MVC. Take care & have fun !!! :)