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 !!! :)