Create a New View in ASP.NET MVC

In today's tutorial, we are gonna have a look at How to Create a New View in ASP.NET MVC. It's ...

Create a New View in ASP.NET MVC, view in asp.net mvc, view in asp, view in mvcHello 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:
Create a New View in ASP.NET MVC, view in asp.net mvc, view in asp, view in mvc
  • 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:
Create a New View in ASP.NET MVC, view in asp.net mvc, view in asp, view in mvc
  • 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:
Create a New View in ASP.NET MVC, view in asp.net mvc, view in asp, view in mvc
  • 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:
Create a New View in ASP.NET MVC, view in asp.net mvc, view in asp, view in mvc
  • 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:
Create a New View in ASP.NET MVC, view in asp.net mvc, view in asp, view in mvc
  • 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:
Create a New View in ASP.NET MVC, view in asp.net mvc, view in asp, view in mvc
  • 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 !!! :)

Leave a Reply

Leave a Reply