ASP.NET MVC Basic Application

Download source code here

Description: In this article, we will learn the basics of ASP .NET MVC with the help of an example.

MVC – It stands for Model View Controller. It’s a very easy concept. Let’s understand this in a detail.

  1. A controller can send commands to the model to update the model’s state (e.g., editing a document). It can also send commands to its associated view to change the view’s presentation of the model (e.g., by scrolling through a document). It is an intermediate between the model and the view. It is usually a class (.cs) file.
  2. A model stores data that is retrieved to the controller and displayed in the view. Whenever there is a change to the data it is updated by the controller. Actually, it is made to create the Business Logic. It is a class (.cs) file.
  3. A view requests information from the model that it uses to generate an output representation to the user. It is a file with extension (.cshtml).
  4. A view uses an engine called Razor View Engine. It is actually used to embed C# code in a HTML page. To use C# code in View page, prefix (@) symbol.

MVC Process

Let’s understand the above theory with the help of an example.

Step 1: Create an Empty ASP.NET MVC application in Visual Studio.

Step 2: You will see that Model, View, and Controller folders will be automatically created in the Solution Explorer.

Step 3: Add a model class file to the models folder. Name it as Employee.cs.

Step 4: Create the auto-implemented properties inside it. Simply paste the below code.

  1. namespace MVCDemo.Models
  2. {
  3.     public class Employee
  4.     {
  5.         public int EmployeeId { get; set; }
  6.         public string Name { get; set; }
  7.         public string Gender { get; set; }
  8.         public string Salary { get; set; }
  9.     }
  10. }

Step 5: Add a controller to the Controllers folder that will use the above created model class.

Step 6: Copy the below code to use the model class’s property inside the controller.

  1. using MVCDemo.Models;
  2. using System.Web.Mvc;
  3. namespace MVCDemo.Controllers
  4. {
  5.     public class EmployeeController : Controller
  6.     {
  7.         public ActionResult GetDetails()
  8.         {
  9.             Employee emp = new Employee();
  10.             emp.EmployeeId = 1;
  11.             emp.Name = “Ankit”;
  12.             emp.Gender = “Male”;
  13.             emp.Salary = “80000”;
  14.             return View(emp);
  15.         }
  16.     }
  17. }

In this code, a namespace is added to use the model class. We just created the instance of the class Employee and initialized its properties. Then we returned that instance to the View because, we will show this data on the View page. So, view will show the data contained in this instance.

Step 7: Right click on the GetDetails method and add a View.

Remember to build the project through solution explorer otherwise, Model class in the above screenshot will not be available in the dropdown menu.

Step 8: A view will be added to the Views folder.

Step 9: Add the following code to GetDetals.cshtml.

  1. @model MVCDemo.Models.Employee
  2. @{
  3.     ViewBag.Title = “Employee Details”;
  4. }
  5. <h2>Employee Details</h2>
  6. <table>
  7.     <tr>
  8.         <td><b>Employee Id is : </b></td>
  9.         <td>
  10.             @Model.EmployeeId
  11.         </td>
  12.     </tr>
  13.     <tr>
  14.         <td><b>Name is : </b></td>
  15.         <td>
  16.             @Model.Name
  17.         </td>
  18.     </tr>
  19.     <tr>
  20.         <td><b>Gender is : </b></td>
  21.         <td>
  22.             @Model.Gender
  23.         </td>
  24.     </tr>
  25.     <tr>
  26.         <td><b>Salary is : </b></td>
  27.         <td>
  28.             @Model.Salary
  29.         </td>
  30.     </tr>
  31. </table>

Step 10: Just press F5 and Navigate to the URL.

http://localhost:46926/Employee/getdetails

In the above URL, Employee is the Name of Model and GetDetails is the name of View that is included in this model. This View searches for GetDetails method in Controller. If it finds it in the controller, then data will be shown otherwise 404 error will occur. So, please be sure that the Name of view and function in controller is same.

See this article at C-SharpCorner

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s