Wednesday, February 8, 2012

Creating a basic ASP.NET MVC Application-Part I

As I said in the previous article Getting Started with ASP.NET MVC 3, Models implements the logic of data domain of an application. It defines the way how the data should interact with the users of the system. In another way, ASP.NET models assure that the data are in the appropriate format before it gets inserted or retrieved from a database. It does not mean that the Databases are the only interacting component of the model. Users can simply create data objects as well. The beauty of MVC 3 is that it facilitates the Model to be modeled with Entity Framework. So it can be done within a few clicks.

To create a Model in the Models folder, right-click on it and follow “Add–>Class”. Then give a name for the .cs or .vb file. For the moment, I will create a class named Student.
To start it simply, a basic Model class can be defined like this.
1
2
3
4
5
6
7
8
public class Student
{
    public int studentID { get; set; }
    public string FirstName { get; set; }
    public string Lastname { get; set; }
    public DateTime DateOfBirth { get; set; }
    public string ResidentialAddress { get; set; }
}
Here I have grabbed the a few essentials that a student must have. For the moment, lets think these are enough to model the student. Then, we are done with the model. But, remember there are many validations needed to be done. Let’s discuss them later.

After the Model, I am eying towards the Controller. First, Build the application (Shift+F6). Right click on the “Controllers” Folder in Solution Explorer and proceed “Add–>Controller”. You will see a new popup windows coming out named “Add Controller”. Give the Controller name as StudentController. Keep this thing in mind: Every controller must have the suffix “Controller” with it. Here I have created the controller for the Student, which means the name should be StudentController. Since we are not using the Entity Framework here, keep the template as “Empty Controller”.

Once you click the Add button, you will get a new Controller created in the Controllers folder. Here you can see there is a comment made as,
GET:/Student/
It does mean that to invoke the Index method of the Student Controller, you must type the “Root level URL/Student/”. This is as per the default setting. But this controller will not work till we add a View. Creating a View for this project has two steps. First thing is creating a sub folder named “Student” inside the “Views” folder. It is the folder related to the Student Controller. To invoke the Index method, you must create a View named Index.

Creating a View is simple. Right click on the Student sub-folder of the project(which we created under the Views folder). Then proceed “Add–>View”. Then the Add View window will pop out. Since the method that is available in the controller is Index, I do put the View name as Index, which can be changed as well. The View Engine defines the way how the HTML content is delivered to the user. The Razor View engine was introduced with ASP.NET MVC 3 which is an enhanced render engine. You can remember that we created a class named Student in the Model. I do take it as the Model Class for the View.
There are many templates that I can select depending on my requirement. To create a form to enter the student data, I do select it as Create. Then click Add button. The other templates are for viewing student in a list and etc… I do have the option of selecting the master page as well.
Once you click the Add button, you will see the View is being created. Now I do have a form to enter the student details. This is not yet connected to the database. Lets discuss the way how it happens in next article.
Just click the Debug button (F5) and type the “Student/” and see what you have got.
Eg: http://localhost:57955/Student/ (Your port number may be different.)

No comments:

Post a Comment