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 !!! 🙂
