ASP.NET

Hope you have read and understood Part-1 and Part-2 of this article, in this part we are actually dealing with MVC architecture of ASP.NET, as we have already created middle tier which is Model in MVC now we are going to implement View part of the MVC.

We will create a Index page which will have link to Create Student link and list all the students with edit option, once we develop the page, output will look like below

Now we will start modifying HomeController.cs which is default controller added when you create a ASP.NET MVC application. Modify Index action to return list of students which are already present in the database, just create a object of StudentMiddleware class and call getAllStudentDetails to get all students details and add the result to View.

We will now create a View page for Index action, right click on Index and create a Index page, to display student details we will make this index view page strongly type to make it strongly typed create view and extend it from Student class like below

you can edit index.aspx page header like below

Inherits=”System.Web.Mvc.ViewPage<IEnumerable<StudentsMiddleware.Student>>”

or in index.aspx.cs modify like below

Public Class Index : ViewPage<IEnumerable<StudentsMiddleware.Student>> once you have done this now we display the data on the page, open Index.aspx and modify the html like below.

In the code above we are looping through the ViewData.Model and displaying records in a table, as we have returned the List<Student> class to ViewData in the Index action we are now able to read the records this the advantage of declaring the Strongly typed views.

Now we will create a Create Student Action, in the above screen shot you might have already observed that we have created a link with Create a Student now we will create action to that link

 

 

Add 2 Create function shown in above screen shot in HomeController.cs, let me explain why we need 2 Create function here, you might have observed that we are differentiating 2 Create method with AcceptVerbs tag, this tag will determine the request method GET/POST and calls corresponding action.

The GET Create action will simply return to corresponding View and POST Create Action will take the data entered in the View and Inserts into database using our StudentMiddleware class’s InsertStudentDetails

 

Now we need a create View to the Action so just right click on the Action and create a View and modify Create.aspx page like below screen shot

 

Here I have used Html object which has some defined methods which will give us flexibility to create HTML controls easy. After entering the data we will submit this form to POST Create Action.

Now we will implement update function for student now add new controller save it as StudentController.cs and add following 2 functions

 

Now right click and a add DisplayStudent.aspx view to display particular student details and a update button to update the details. please modify the DisplayStudent.aspx as shown in below screenshot.

Now we are done with our example go ahead and build and run.

 

Hope this help, don’t forget give your input to this article

 

SatishKumar J

Microsoft MVP(ASP.NET)