Systems for managing human resources (HRMS) are crucial for contemporary businesses. They automate hiring, payroll, personnel records, and attendance. The open-source HRM project shows how to use SQL Server, Entity Framework Core, and ASP.NET Core MVC to create a comprehensive HRMS.

Step 1: Environment Setup

• Install Visual Studio 2022 with ASP.NET workload.
• Install SQL Server and SSMS.
• Clone the repository
• Open the solution in Visual Studio.

Update-Database

Departments Page
Step 1: Model
public class Department
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int CompanyId { get; set; }

    public Company Company { get; set; }
}

Step 2: Controller
public class DepartmentsController : Controller
{
    private readonly ApplicationDbContext _context;
    public DepartmentsController(ApplicationDbContext context) => _context = context;

    public async Task<IActionResult> Index()
    {
        var departments = await _context.Departments.Include(d => d.Company).ToListAsync();
        return View(departments);
    }

    public IActionResult Create() => View();

    [HttpPost]
    public async Task<IActionResult> Create(Department department)
    {
        if (ModelState.IsValid)
        {
            _context.Add(department);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(department);
    }
}

Step 3: View
@model IEnumerable<Department>

<h2>Departments</h2>
<table class="table">
    <tr><th>Name</th><th>Company</th></tr>
    @foreach (var d in Model)
    {
        <tr>
            <td>@d.Name</td>
            <td>@d.Company.Name</td>
        </tr>
    }
</table>

Designations Page
Step 1: Model
public class Designation
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int CompanyId { get; set; }

    public Company Company { get; set; }
}

Step 2: Controller
public class DesignationsController : Controller
{
    private readonly ApplicationDbContext _context;
    public DesignationsController(ApplicationDbContext context) => _context = context;

    public async Task<IActionResult> Index()
    {
        var designations = await _context.Designations.Include(d => d.Company).ToListAsync();
        return View(designations);
    }

    public IActionResult Create() => View();

    [HttpPost]
    public async Task<IActionResult> Create(Designation designation)
    {
        if (ModelState.IsValid)
        {
            _context.Add(designation);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(designation);
    }
}

Step 3: View
@model IEnumerable<Designation>

<h2>Designations</h2>
<table class="table">
    <tr><th>Name</th><th>Company</th></tr>
    @foreach (var d in Model)
    {
        <tr>
            <td>@d.Name</td>
            <td>@d.Company.Name</td>
        </tr>
    }
</table>

Employee Model
Define the employee entity with relationships to company, department, and designation:
public class Employee
{
    public int Id { get; set; }
    public string FullName { get; set; }
    public string Email { get; set; }
    public string Phone { get; set; }

    public int CompanyId { get; set; }
    public Company Company { get; set; }

    public int DepartmentId { get; set; }
    public Department Department { get; set; }

    public int DesignationId { get; set; }
    public Designation Designation { get; set; }

    public DateTime JoiningDate { get; set; }
}

Employee Controller
Create an MVC controller to handle CRUD operations:
public class EmployeesController : Controller
{
    private readonly ApplicationDbContext _context;
    public EmployeesController(ApplicationDbContext context) => _context = context;

    // List all employees
    public async Task<IActionResult> Index()
    {
        var employees = await _context.Employees
            .Include(e => e.Company)
            .Include(e => e.Department)
            .Include(e => e.Designation)
            .ToListAsync();
        return View(employees);
    }

    // Create employee
    public IActionResult Create()
    {
        ViewBag.Companies = new SelectList(_context.Companies, "Id", "Name");
        ViewBag.Departments = new SelectList(_context.Departments, "Id", "Name");
        ViewBag.Designations = new SelectList(_context.Designations, "Id", "Name");
        return View();
    }

    [HttpPost]
    public async Task<IActionResult> Create(Employee employee)
    {
        if (ModelState.IsValid)
        {
            _context.Add(employee);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(employee);
    }

    // Edit employee
    public async Task<IActionResult> Edit(int id)
    {
        var employee = await _context.Employees.FindAsync(id);
        if (employee == null) return NotFound();

        ViewBag.Companies = new SelectList(_context.Companies, "Id", "Name", employee.CompanyId);
        ViewBag.Departments = new SelectList(_context.Departments, "Id", "Name", employee.DepartmentId);
        ViewBag.Designations = new SelectList(_context.Designations, "Id", "Name", employee.DesignationId);

        return View(employee);
    }

    [HttpPost]
    public async Task<IActionResult> Edit(Employee employee)
    {
        if (ModelState.IsValid)
        {
            _context.Update(employee);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(employee);
    }

    // Delete employee
    public async Task<IActionResult> Delete(int id)
    {
        var employee = await _context.Employees.FindAsync(id);
        if (employee == null) return NotFound();

        _context.Employees.Remove(employee);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
}

Employee Views
Index.cshtml
@model IEnumerable<Employee>

<h2>Employees</h2>
<a asp-action="Create" class="btn btn-primary">Add Employee</a>

<table class="table">
    <tr>
        <th>Name</th><th>Email</th><th>Phone</th>
        <th>Company</th><th>Department</th><th>Designation</th><th>Joining Date</th><th>Actions</th>
    </tr>
    @foreach (var e in Model)
    {
        <tr>
            <td>@e.FullName</td>
            <td>@e.Email</td>
            <td>@e.Phone</td>
            <td>@e.Company.Name</td>
            <td>@e.Department.Name</td>
            <td>@e.Designation.Name</td>
            <td>@e.JoiningDate.ToShortDateString()</td>
            <td>
                <a asp-action="Edit" asp-route-id="@e.Id">Edit</a> |
                <a asp-action="Delete" asp-route-id="@e.Id">Delete</a>
            </td>
        </tr>
    }
</table>

Create.cshtml
@model Employee

<h2>Add Employee</h2>
<form asp-action="Create">
    <div class="form-group">
        <label>Name</label>
        <input asp-for="FullName" class="form-control" />
    </div>
    <div class="form-group">
        <label>Email</label>
        <input asp-for="Email" class="form-control" />
    </div>
    <div class="form-group">
        <label>Phone</label>
        <input asp-for="Phone" class="form-control" />
    </div>
    <div class="form-group">
        <label>Company</label>
        <select asp-for="CompanyId" asp-items="ViewBag.Companies" class="form-control"></select>
    </div>
    <div class="form-group">
        <label>Department</label>
        <select asp-for="DepartmentId" asp-items="ViewBag.Departments" class="form-control"></select>
    </div>
    <div class="form-group">
        <label>Designation</label>
        <select asp-for="DesignationId" asp-items="ViewBag.Designations" class="form-control"></select>
    </div>
    <div class="form-group">
        <label>Joining Date</label>
        <input asp-for="JoiningDate" type="date" class="form-control" />
    </div>
    <button type="submit" class="btn btn-success">Save</button>
</form>

When working with large data in web applications, displaying data in a simple HTML table becomes difficult.

We need features like:

• Paging
• Sorting
• Filtering
• Endless scrolling
• Searching

To solve this problem, developers use Kendo UI Grid.

Kendo Grid is one of the most popular UI components used in ASP.NET MVC and jQuery applications.

In this article, you will learn:

• What Kendo Grid is
• Why we use it
• Important grid properties
• Endless scrolling
• Fetching 50-50 records
• Real examples with explanation

What is Kendo Grid?
Kendo Grid is a powerful table component provided by Progress Telerik.

It helps display data with advanced features using less code.

Why Use Kendo Grid?

• Professional UI
• Easy data handling
• Built-in paging & filtering
• Fast development

Step 1: Add Kendo UI Files
<link href="https://kendo.cdn.telerik.com/2024.1.130/styles/kendo.default-v2.min.css" rel="stylesheet" />

<script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.all.min.js"></script>

Step 2: Create HTML Div
<div id="grid"></div>

Step 3: Create Grid
$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: {
                url: "/Home/GetStudents",
                dataType: "json"
            }
        },
        pageSize: 50
    },

    height: 550,

    pageable: true,

    sortable: true,

    filterable: true,

    scrollable: true,

    columns: [
        { field: "StudentId", title: "ID", width: 100 },
        { field: "StudentName", title: "Name" },
        { field: "City", title: "City" }
    ]
});

Output
Grid features:

• Paging
• Sorting
• Filtering
• Scrollable grid

Important Kendo Grid Properties Explained
pageable
pageable: true
Enables pagination

sortable
sortable: true
Allows column sorting

filterable
filterable: true
Adds filter option

scrollable
scrollable: true
Enables scrolling

groupable
groupable: true
Group data by column

selectable
selectable: true
Select row

resizable
resizable: true
Resize columns

reorderable
reorderable: true
Change column order

editable
editable: true

Enable editing
toolbar
toolbar: ["create"]
Add toolbar buttons

Endless Scrolling in Kendo Grid
What is Endless Scrolling?
Normally grid uses pagination.

But endless scrolling automatically loads more data while scrolling.

This improves user experience.
Example
scrollable: {
    endless: true
}

Full Example with Endless Scrolling
$("#grid").kendoGrid({

    dataSource: {
        transport: {
            read: {
                url: "/Home/GetStudents",
                dataType: "json"
            }
        },

        pageSize: 50,

        serverPaging: true
    },

    height: 500,

    scrollable: {
        endless: true
    },

    sortable: true,

    filterable: true,

    columns: [
        { field: "StudentId", title: "ID" },
        { field: "StudentName", title: "Name" },
        { field: "City", title: "City" }
    ]
});

What Does pageSize: 50 Mean?
pageSize: 50

Grid fetches 50 records at one time.

When user scrolls:

• Next 50 records load automatically
• Then next 50 records load

This improves:

• Performance
• Speed
• Memory usage

Server Side Data Fetch Example
Controller
public JsonResult GetStudents(int page, int pageSize)
{
    List<Student> list = new List<Student>();

    for (int i = 1; i <= 500; i++)
    {
        list.Add(new Student
        {
            StudentId = i,
            StudentName = "Student " + i,
            City = "London"
        });
    }

    var data = list.Skip((page - 1) * pageSize).Take(pageSize);

    return Json(data, JsonRequestBehavior.AllowGet);
}

Explanation
Skip((page - 1) * pageSize)

Skips previous records
Take(pageSize)
Fetches only 50 records

Why Use 50-50 Data Fetching?
If database has:

100000 records

Loading all data together makes application slow.

Using:
pageSize: 50
Only 50 records load at a time.

Advantages of Endless Scrolling

• Faster loading
• Better performance
• Smooth user experience
• Less memory usage

Complete Advanced Grid Example
$("#grid").kendoGrid({

    dataSource: {
        transport: {
            read: {
                url: "/Home/GetStudents",
                dataType: "json"
            }
        },

        pageSize: 50,

        serverPaging: true,
        serverSorting: true,
        serverFiltering: true
    },

    height: 550,

    pageable: true,

    sortable: true,

    filterable: true,

    groupable: true,

    reorderable: true,

    resizable: true,

    selectable: "row",

    scrollable: {
        endless: true
    },

    toolbar: ["search"],

    columns: [
        { field: "StudentId", title: "ID", width: 100 },
        { field: "StudentName", title: "Student Name" },
        { field: "City", title: "City" }
    ]
});

The Reasons for MVC?
In the field of software development, MVC is a new standard design pattern. It's simple to utilize ASP.NET MVC.Google offers dozens of resources to help us learn how to program and configure the code.However, it is always preferable to begin with Why rather than How.

ASP.NET Web Forms cannot be replaced by ASP.NET MVC.Microsoft offers a different method for creating an application.

ASP.NET Web Form Problems:

• Complexity:HTML and ASP.NET mark up code are used in a Single Page that's why code become very complex.
• Tightly Coupled-Aspx page and cs page(code behind file) are tightly coupled.so that we can not work separately.
• Unwanted Html and Java Script-when we drag and drop the controls then unwanted html and java script is automatically inserted in our code that's why page become heavier and it takes time to load on browser.
• View state-One of the main problems with ASP.NET web forms is the viewstate mechanism, which takes a lot of bandwidth because it serializes all the form inputs and sends it on post commands.
• Response Time -for any single events it follows the complete Page Life cycle Events life cycle that's why response time of any ASP.NET application is become more than the MVC application.

Benefits of MVC
Three are several benefits of using MVC are given below.

• Separation of Concerns -Separation of Concern is one of the core advantages of ASP.NET MVC . The MVC framework provides a clean separation of the UI , Business Logic , Model or Data. On the other hand we can say it provides Sepration of Program logic from the User Interface.
• More Control-The ASP.NET MVC framework provides more control over the HTML , JavaScript and CSS than the traditional Web Forms.
• Testability-ASP.NET MVC framework provides better testability of the Web Application and good support for the test driven development too.
• Lightweight-ASP.NET MVC framework doesn’t use View State and thus reduces the bandwidth of the requests to an extent.
• Full features of ASP.NET-One of the key advantages of using ASP.NET MVC is that it is built on top of ASP.NET framework and hence most of the features of the ASP.NET like membership providers , roles etc can still be used.

Using an example application, I will explain how to submit a collection in ASP.Net MVC 3. The fundamental principle of posting (carrying HTML field values from view to controller) is to match receiving parameters in the Controller's action method with the name field of the displayed HTML control.

Let's say I have a field in my Razor view called @Html.TextBox ("myName", "Peter") inside a form tag. When I submit the form, I can get the value "Peter" from the variable "myName" in the Controller's action function as follows:
    [HttpPost]  
    public ActionResult ReceveMyName(string myName)  
    {  
    }  

So in the following section I will describe how to post a collection from the view to the controller by a sample application using MVC razor view.

In the sample application we have the screen, where we can "Add" the status/comments in the text area. Once we "Add" the status, the same will be reflected in the down portion.

We have a "Save" button at the down that will save the entire collection to the database. Here the content we are updating in text area is a "Tweet" model.

Tweet Model
    public class Tweet  
    {  
        public Tweet()  
        {  
            Date = DateTime.UtcNow;  
        }  
        private DateTime date;  
        public int Id { get; set; }   
        public string UserName { get; set; }  
        public string Text { get; set; }        
        public DateTime Date  
        {  
            get { return date.ToLocalTime(); }  
            set { date = value; }  
        }  
    } 

Once we add the comments we need to post the entire "Collection of Tweets" and "Tweet" to the controller action. In other words, textarea refers to a single Tweet by the user and the down shows the list of tweets provided by all the followers and the user.

View Model
So our view model will be as in the following:
    public class TwitterViewModel  
    {  
        public Tweet Tweet { get; set; }  
        public IList<Tweet> Tweets { get; set; }  
    } 

Views
Our main view is "Tweets.cshtml" as in the following and which will render another partial view "_Alltweets.cshtml" by passing the model.

Tweets.cshtml
    @model MongoTwitter.ViewModels.TwitterViewModel  
    @{  
        ViewBag.Title = "Twitter";  
    }  
    <hgroup class="title">  
    <h2>What's happening</h2>  
    </hgroup>  
    <div style="width: 600px; border: 1px solid silver">  
        @using (Ajax.BeginForm("AddTweet", "Home", new AjaxOptions { UpdateTargetId = "AllTweets" }))  
        {   
            <div style="width: 600px; border-width: 1px">  
                @Html.TextAreaFor(md => md.Tweet.Text)  
                <input type="submit" value="Add" style="width: 70px; font-size: 12px" />  
            </div>  
            <div id="AllTweets">  
                @Html.Partial("_AllTweets", Model)  
            </div>  
        }  
    </div>

_AllTweets.cshtml

    @model MongoTwitter.ViewModels.TwitterViewModel  
    @using (Html.BeginForm("SaveTweet", "Home"))  
    {  
        <div style="height: 300px; width: 600px; overflow-y: auto">  
            <table border="1">  
                @if (Model != null && Model.Tweets != null)  
                {  
                    for (int i = 0; i < Model.Tweets.Count; i++)  
                    {  
                     
                    <tr style="vertical-align: top">  
                        <td style="font-size: 12px; padding-left: 2px">  
                            @Html.DisplayFor(modelItem => Model.Tweets[i].Date) -  
                            @Html.DisplayFor(modelItem => Model.Tweets[i].UserName) :  
                        </td>  
                        <td>  
                            @Html.Raw(Model.Tweets[i].Text.Replace("\r\n", "<br />"))  
                        </td>  
                    </tr>  
                    @Html.HiddenFor(modelItem => Model.Tweets[i].Id)   
                    @Html.HiddenFor(modelItem => Model.Tweets[i].Date)   
                    @Html.HiddenFor(modelItem => Model.Tweets[i].Text)   
                    @Html.HiddenFor(modelItem => Model.Tweets[i].UserName)   
                    }  
                }  
            </table>  
        </div>  
        <input type="submit" value="Save" style="float: right; width: 70px; font-size: 12px" />  
    }

The main things to note about "AllTweets.cshtml" is that, we have used a for loop to loop through all the items in the Tweets Collection for (int i = 0; i < Model.Tweets.Count; i++). Here by using developer tools if we inspect the rendered HTML, we will see that the name field of the entire collection matches what needs to be posted for that collection, like Tweets[1].Id, Tweets[2].Id etc. 

HTML rendered using For Loop
If we use a foreach loop instead of a for loop then the collection won't post because if we use a foreach loop then the name field for each item in the rendered HTML.

HTML rendered using foreach loop.

Another important thing to note in "_AllTweets.cshtml" is that we have used @Html.HiddenFor() for the fields like id, Date and Text, that are displayed using @Html.DisplayFor() just above. Since DisplayFor() won't post a value to the controller we use @Html.HiddenFor(). By clicking the "Add" button in "_AllTweets.cshtml" the following action will be called. Since the entire collection is posted back in "viewModel.Tweets", we will add the new Tweet into that collection and return the view with updated Model.

    /// <summary>  
    /// Add posted tweet from TweetViewModel to tweet collection  
    /// </summary>  
    /// <param name="viewModel"></param>  
    /// <returns></returns>  
    [HttpPost]  
    public ActionResult AddTweet(TwitterViewModel viewModel)  
    {  
        try  
        {  
            viewModel.Tweets.Add(viewModel.Tweet);  
            return PartialView("_AllTweets", viewModel);  
        }  
        catch  
        {  
            return View();  
        }  
    } 

In image above we can see the SaveTweet() post action, where "TwitterViewModel" is posted back, that has the value for all Tweets collections. 

User activity tracking is crucial for security, auditing, and analytics in real-world web applications. Keeping track of a user's login and logout times is one of the most popular needs. Using an audit log table, we will create a straightforward and efficient ASP.NET MVC system in this post to monitor user login and logout times.

Why Do We Need Audit Tracking?
Tracking login and logout activity helps in:

• Monitoring user sessions
• Maintaining security logs
• Analyzing user behavior
• Debugging issues related to authentication

Features Implemented

• User login system
• Session management
• Login time recording
• Logout time update
• Audit log tracking

Database Design
We will use two tables: users and auditlogs.
CREATE TABLE users (
    Id INT IDENTITY PRIMARY KEY,
    Name NVARCHAR(100),
    Contact NVARCHAR(21),
    Email NVARCHAR(150),
    Password NVARCHAR(200)
);

CREATE TABLE auditlogs (
    AuditId INT PRIMARY KEY IDENTITY,
    UserId INT,
    Username NVARCHAR(100),
    LoginDate DATETIME,
    LogoutDate DATETIME NULL
);

Explanation

• LoginDate stores the login timestamp
• LogoutDate is initially NULL and updated during logout
• Each login creates a new record in auditlogs

Step 1: Login Logic
When a user logs in successfully:

• Validate credentials
• Store session values
• Insert login time into audit table

loginc
public void InsertLogin(int userId, string username)
{
    string query = @"INSERT INTO auditlogs (UserId, Username, LoginDate)
                     VALUES (@UserId, @Username, GETDATE())";

    using (SqlConnection con = new SqlConnection(_connectionString))
    {
        SqlCommand cmd = new SqlCommand(query, con);
        cmd.Parameters.AddWithValue("@UserId", userId);
        cmd.Parameters.AddWithValue("@Username", username);

        con.Open();
        cmd.ExecuteNonQuery();
    }
}

Step 2: Logout Logic
When the user logs out:

• Find the latest active session
• Update logout time

logoutc
public void UpdateLogout(int userId)
{
    string query = @"UPDATE auditlogs
                     SET LogoutDate = GETDATE()
                     WHERE UserId = @UserId AND LogoutDate IS NULL";

    using (SqlConnection con = new SqlConnection(_connectionString))
    {
        SqlCommand cmd = new SqlCommand(query, con);
        cmd.Parameters.AddWithValue("@UserId", userId);

        con.Open();
        cmd.ExecuteNonQuery();
    }
}

Important Note
We use LogoutDate IS NULL to ensure only the active session is updated.

Step 3: Controller Implementation
Login Action
[HttpPost]
public IActionResult Login(string email, string password)
{
    var user = _userService.GetUser(email, password);

    if (user != null)
    {
        HttpContext.Session.SetInt32("UserId", user.Id);
        HttpContext.Session.SetString("Username", user.Name);

        _auditService.InsertLogin(user.Id, user.Name);

        return RedirectToAction("Index", "Home");
    }

    ViewBag.Error = "Invalid Credentials";
    return View();
}

Logout Action
public IActionResult Logout()
{
    int? userId = HttpContext.Session.GetInt32("UserId");

    if (userId != null)
    {
        _auditService.UpdateLogout(userId.Value);
    }

    HttpContext.Session.Clear();
    return RedirectToAction("Login");
}

Output

After login and logout operations, the auditlogs table will store data like:

Best Practices

• Use a service layer instead of writing SQL in controllers
• Always validate user input
• Avoid storing plain text passwords (use hashing)
• Handle session expiration properly

Common Mistakes

• Not updating logout time
• Inserting duplicate login records unnecessarily
• Mixing business logic inside controllers
• Ignoring null session cases

Conclusion
In this article, we implemented a simple audit tracking system in ASP.NET MVC to record user login and logout time. This approach can be extended further to include additional tracking details such as IP address, device information, and user activity logs.

Communication between the Controller and View is crucial in ASP.NET MVC.

• Data is sent to the View by the Controller once it has processed requests.
• User input is gathered by the View and returned to the Controller.

CRUD (Create, Read, Update, Delete) systems and other dynamic web applications are made possible by this two-way communication.

This essay will teach us:

• How to pass Controller → View data
• How to send data from View to Controller
• Various methods
• A basic example of CRUD

Everything is explained in simple beginner-friendly steps.

MVC Architecture Overview
MVC stands for:

Flow example:
Ways to Transfer Data from Controller to View: User → Controller → Model → Controller → View → User

There are four common methods.

1 Passing Data Using ViewBag

ViewBag is a dynamic property used to pass small data.
Controller
public ActionResult Index()
{
    ViewBag.Name = "Scott";
    ViewBag.City = "London";

    return View();
}

View
<h2>Name: @ViewBag.Name</h2>
<h2>City: @ViewBag.City</h2>

What is this?
Output
Name: Scott City: London

When to Use?

• Small data
• Simple messages

2 Passing Data Using ViewData
ViewData works like a dictionary.
Controller
public ActionResult Index()
{
    ViewData["Course"] = "ASP.NET MVC";
    return View();
}

View
<h2>@ViewData["Course"]</h2>

What is this?
3 Passing Data Using TempData
TempData stores data until the next request.

Controller
public ActionResult Index()
{
    TempData["Message"] = "Record Saved Successfully";
    return RedirectToAction("Display");
}

public ActionResult Display()
{
    return View();
}

View
<h2>@TempData["Message"]</h2>

What is this?
4 Passing Data Using Model (Best Method)
This is the most recommended approach.

Step 1 Create Model
public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

Step 2 Controller
public ActionResult Details()
{
    Student s = new Student()
    {
        Id = 1,
        Name = "Scott",
        Age = 22
    };

    return View(s);
}

Step 3 View
@model Student

<h2>ID: @Model.Id</h2>
<h2>Name: @Model.Name</h2>
<h2>Age: @Model.Age</h2>

Passing Data From View to Controller
Now let’s see how user input goes from View → Controller.
This is done using HTML forms.

Simple CRUD Example
We will build a simple Student CRUD system.

Step 1 Model
public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

Step 2 Controller
public class StudentController : Controller
{
    static List<Student> students = new List<Student>();

    public ActionResult Index()
    {
        return View(students);
    }

    public ActionResult Create()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Create(Student s)
    {
        students.Add(s);
        return RedirectToAction("Index");
    }
}

Step 3 Create View
@model Student

@using (Html.BeginForm())
{
    <label>Name</label>
    @Html.TextBoxFor(m => m.Name)

    <br/>

    <label>Age</label>
    @Html.TextBoxFor(m => m.Age)

    <br/>

    <input type="submit" value="Save"/>
}

Here the form sends data to the controller.

Step 4 Display Data
View
@model List<Student>

<table border="1">
<tr>
    <th>ID</th>
    <th>Name</th>
    <th>Age</th>
</tr>

@foreach(var item in Model)
{
<tr>
    <td>@item.Id</td>
    <td>@item.Name</td>
    <td>@item.Age</td>
</tr>
}
</table>

Flow of Data in CRUD
User enters data in View ↓ Form submits to Controller ↓ Controller receives Model ↓ Data saved ↓ Controller sends updated data to View ↓ View displays result

Important Concepts
Model Binding
Model binding automatically converts form values into model objects.

Example:
Name → Student.Name
Age → Student.Age

MVC automatically maps them.

Best Practice for Beginners
Always prefer Model-based data passing instead of ViewBag or ViewData.

Example:
Good
return View(student);

Not recommended
ViewBag.Name = "Peter";

Quick Comparison

Conclusion

Passing data between Controller and View is one of the most important concepts in ASP.NET MVC development.
Developers can use:

• ViewBag

• ViewData

• TempData

• Models

However, for real-world applications and CRUD operations, the Model approach is the most powerful and recommended method.

Developers frequently have to transfer data from the View to the Controller when creating web apps with ASP.NET MVC. For instance:

• Filling out a login form
• Creating a new user account
• Form data storage in a database

Manually managing this data might be challenging. Fortunately, Model Binding is a potent feature offered by ASP.NET MVC. Form values, query strings, and route data are automatically mapped to C# objects by Model Binding.

In this article, we will learn:

• What Model Binding is
• Why it is useful
• How it works in ASP.NET MVC
• Simple examples for beginners

Everything is explained in easy words with step-by-step examples.

What is Model Binding?
Model Binding is a process where ASP.NET MVC automatically maps incoming request data to action method parameters.

This means data from:

• Form fields
• Query strings
• Route values

can automatically be converted into C# objects or variables.

Simple Example
If a form has fields:
Name = Peter
Email = [email protected]

Model Binding automatically converts this data into a C# object.

Why Model Binding is Important
Model Binding makes development easier.

Benefits include:

• Less manual coding
• Automatic data mapping
• Cleaner controller code
• Faster development

Without model binding, developers would need to manually read values from Request.Form.

Step 1: Create a Model
First create a model class.

User.cs
public class User
{
    public string Name { get; set; }

    public string Email { get; set; }

    public string Password { get; set; }
}

This class represents a user object that will receive form data.

Step 2: Create Controller
Create a controller named UserController.
public class UserController : Controller
{
    public ActionResult Register()
    {
        return View();
    }
}

This method will display the registration form.

Step 3: Create View
Register.cshtml
<h2>User Registration</h2>

<form method="post" action="/User/Register">

Name:
<input type="text" name="Name" />

Email:
<input type="text" name="Email" />

Password:
<input type="password" name="Password" />
<input type="submit" value="Register" />

</form>

The input field names match the model properties. This is important because Model Binding uses these names to map data.

Step 4: Receive Data Using Model Binding
Now update the controller.
[HttpPost]
public ActionResult Register(User user)
{
    ViewBag.Message = "User Registered Successfully: " + user.Name;

    return View();
}

ASP.NET MVC automatically:

• Reads form values
• Creates a User object
• Fills properties with form data

This process is called Model Binding.

Output
If a user submits the form:
Name = Peter
Email = [email protected]
Password = 12345

The controller receives:
user.Name = Peter
user.Email = [email protected]
user.Password = 12345

And displays:
User Registered Successfully: Peter

Types of Model Binding
ASP.NET MVC supports different types of model binding.

1 Simple Model Binding
Used for simple data types.

Example:
public ActionResult Index(string name)
{
}

2 Complex Model Binding
Used for objects.

Example:
public ActionResult Register(User user)
{
}

3 Collection Model Binding
Used for lists or arrays.

Example:
public ActionResult Save(List<User> users)
{
}

Where Model Binding Gets Data From
Model Binding can read data from different sources.

Example Using Query String

URL:
/User/Index?name=Peter

Controller:
public ActionResult Index(string name)
{
    ViewBag.Name = name;
    return View();
}

Output:
Welcome Peter

Common Mistakes Beginners Make
Beginners sometimes face issues because:

• Input names do not match model properties
• Model classes are not created properly
• Incorrect HTTP method is used

Always make sure input field names match model properties.

Advantages of Model Binding
Model Binding makes development easier because:

• No need to manually extract request values
• Clean controller methods
• Works with simple and complex data types
• Automatically maps request data to objects

Conclusion
Model Binding is one of the most powerful features in ASP.NET MVC. It automatically converts incoming request data into C# objects or parameters, reducing the amount of manual coding required. By understanding how Model Binding works, developers can create cleaner, faster, and more maintainable MVC applications.

One of the most crucial ideas you need to grasp when learning C# and ASP.NET is MVC (Model-View-Controller).

Many novices are perplexed by:

• MVC: What is it?
• What makes it useful to us?
• How does it operate?
• How may a basic MVC project be made?

To make things easy for beginners to comprehend, I will explain everything in this article using straightforward language and a basic example.

What is MVC?
MVC stands for:
M – Model
V – View
C – Controller

It is a design pattern used in ASP.NET to organize code in a clean and structured way.

Instead of writing everything in one file, MVC separates the application into three parts.

Why Do We Use MVC?
Before MVC, developers used Web Forms where:

• UI and logic were mixed together
• Code became difficult to manage
• Large projects became messy

MVC solves this problem by:

• Separating concerns
• Making code clean
• Making testing easy
• Improving maintainability

MVC Architecture Explained Simply
Let’s understand each part in easy words.

Model
The Model represents the data.

It contains:

1. Properties (variables)
2. Business logic
3. Database related code

Example Model (Student.cs)
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}

This class stores student data.

View

• The View is the UI (User Interface).
• It displays data to the user.
• Example: HTML page, form, table, etc.

Example View (Index.cshtml)
@model YourProject.Models.Student

<h2>Student Details</h2>

<p>Id: @Model.Id</p>
<p>Name: @Model.Name</p>
<p>Age: @Model.Age</p>

This page shows student information.

Controller
The Controller handles user requests.

It:

• Receives request from browser
• Talks to Model
• Sends data to View

Example Controller
public class StudentController : Controller
{
public ActionResult Index()
{
    Student s = new Student()
    {
        Id = 1,
        Name = "Peter",
        Age = 22
    };

    return View(s);
}
}

Controller creates student object and sends it to View.

How MVC Works (Step-by-Step Flow)

• User enters URL
• Request goes to Controller
• Controller gets data from Model
• Controller sends data to View
• View displays data to user

Output
When you run the project and open:
https://localhost:xxxx/Student/Index

You will see:
Student Details
Id: 1
Name: Peter
Age: 22

Advantages of MVC

• Clean code structure
• Easy to manage large projects
• Better control over HTML
• Easy unit testing
• SEO friendly

Real-Life Example to Understand MVC
Imagine a Restaurant:

• Model → Kitchen (prepares food/data)
• View → Table (where food is shown)
• Controller → Waiter (takes order & delivers food)

The waiter connects kitchen and table.

That’s exactly how MVC works!

When Should You Use MVC?
Use MVC when:

• You are building web applications
• You want clean architecture
• You want better control over frontend
• You are working on large projects

Conclusion
MVC is one of the most important concepts in ASP.NET development.

If you are a beginner:

• First understand Model, View, Controller separately
• Then understand how they connect
• Practice small projects like Student CRUD

Once you understand MVC clearly, building web applications becomes much easier.

A strong framework for creating cutting-edge, safe, and effective online apps is ASP.NET Core MVC. This tutorial covers the basics of Controllers, Models, and Views for those who are unfamiliar with ASP.NET Core. It then goes on to a basic CRUD (Create, Read, Update, Delete) example.

What Is ASP.NET Core MVC?

ASP.NET Core MVC follows the Model–View–Controller (MVC) design pattern:

• Model → Represents application data and business logic

• View → Displays the UI

• Controller → Handles requests and returns responses

This separation of concerns makes applications easier to test, maintain, and scale.

Setting Up a New ASP.NET Core MVC Project

Step 1. Create a New Project
In Visual Studio:
Create a new project
Select ASP.NET Core Web App (Model-View-Controller)

Step 2. Choose Project Options
Select the following options:

Framework: .NET 8 (recommended)
Authentication: None
Configure for HTTPS: Enabled
Enable Docker: Disabled (for now)

Your base MVC project structure is now ready.

Understanding the Project Structure
Key folders used in an MVC project:
Controllers/
Contains controller classes such as HomeController.cs

Models/
Contains data and domain classes (e.g., Product, User)

Views/
Contains .cshtml files grouped by controller name

wwwroot/
Stores static files such as CSS, JavaScript, and images

Creating a Simple CRUD Example — Product Management

This example demonstrates a basic product management module.

Product Fields

• Id (int)
• Name (string)
• Price (decimal)

Step-by-Step Implementation
Step 1. Create the Model

File: Models/Product.cs
namespace MVCApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

Step 2 Create an In-Memory Repository
This example uses an in-memory list instead of a database.

File: Data/ProductRepository.cs
using MVCApp.Models;

namespace MVCApp.Data
{
    public static class ProductRepository
    {
        private static List<Product> _products = new List<Product>()
        {
            new Product { Id = 1, Name = "Keyboard", Price = 1200 },
            new Product { Id = 2, Name = "Mouse", Price = 600 }
        };

        public static List<Product> GetAll() => _products;

        public static Product? Get(int id) =>
            _products.FirstOrDefault(p => p.Id == id);

        public static void Add(Product product)
        {
            product.Id = _products.Max(p => p.Id) + 1;
            _products.Add(product);
        }

        public static void Update(Product updatedProduct)
        {
            var existing = Get(updatedProduct.Id);
            if (existing != null)
            {
                existing.Name = updatedProduct.Name;
                existing.Price = updatedProduct.Price;
            }
        }

        public static void Delete(int id)
        {
            var product = Get(id);
            if (product != null)
                _products.Remove(product);
        }
    }
}

Step 3. Create the Controller
File: Controllers/ProductController.cs
using Microsoft.AspNetCore.Mvc;
using MVCApp.Data;
using MVCApp.Models;

namespace MVCApp.Controllers
{
    public class ProductController : Controller
    {
        public IActionResult Index()
        {
            var products = ProductRepository.GetAll();
            return View(products);
        }

        public IActionResult Create()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Create(Product product)
        {
            ProductRepository.Add(product);
            return RedirectToAction("Index");
        }

        public IActionResult Edit(int id)
        {
            var product = ProductRepository.Get(id);
            return View(product);
        }

        [HttpPost]
        public IActionResult Edit(Product product)
        {
            ProductRepository.Update(product);
            return RedirectToAction("Index");
        }

        public IActionResult Delete(int id)
        {
            ProductRepository.Delete(id);
            return RedirectToAction("Index");
        }
    }
}

Creating Views
Index View. List Products
File: Views/Product/Index.cshtml
@model List<MVCApp.Models.Product>

<h2>Product List</h2>

<a href="/Product/Create" class="btn btn-primary">Add New</a>

<table class="table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Price</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var p in Model)
        {
            <tr>
                <td>@p.Id</td>
                <td>@p.Name</td>
                <td>@p.Price</td>
                <td>
                    <a href="/Product/Edit/@p.Id">Edit</a> |
                    <a href="/Product/Delete/@p.Id">Delete</a>
                </td>
            </tr>
        }
    </tbody>
</table>

Create View
File: Views/Product/Create.cshtml
@model MVCApp.Models.Product

<h2>Add New Product</h2>

<form asp-action="Create" method="post">
    <label>Name:</label>
    <input type="text" name="Name" class="form-control" />

    <label>Price:</label>
    <input type="number" step="0.01" name="Price" class="form-control" />

    <br />
    <button type="submit" class="btn btn-success">Save</button>
</form>

Edit View
File: Views/Product/Edit.cshtml
@model MVCApp.Models.Product

<h2>Edit Product</h2>

<form asp-action="Edit" method="post">
    <input type="hidden" asp-for="Id" />

    <label>Name:</label>
    <input asp-for="Name" class="form-control" />

    <label>Price:</label>
    <input asp-for="Price" class="form-control" />

    <br />
    <button type="submit" class="btn btn-primary">Update</button>
</form>

Running the Application
Navigate to:
/Product

You now have a working CRUD module that supports:

• Creating products
• Editing products
• Deleting products
• Listing all products

This workflow reflects the standard approach used in real-world ASP.NET Core MVC applications.

One of the most frequent questions that new users of ASP.NET Core MVC have is how to effectively show big volumes of data. WebForms developers frequently look for controls such as GridView, Repeater, or UpdatePanel. Nevertheless, ASP.NET Core MVC does not enable these controls because it takes a contemporary, performance-focused approach.

Beginning with basic ideas and progressing toward sophisticated, production-level solutions, this article discusses the proper and approved methods for displaying lakhs of entries in ASP.NET Core MVC.

Comprehending the Fundamental MVC Data Binding Idea
Data is not restricted by server controls in Core MVC. Rather, the view uses Razor and HTML syntax to render the data that the controller gives to it.
The essential guideline is:Never load all records at once. Always fetch only the data that the user needs.
This rule applies to all real-time applications such as IPO systems, banking portals, and admin dashboards.

Example Scenario
Assume we have an IPOmaster table with lakhs of records and the following fields:

• Symbol
• Category
• CreatedDate

Our goal is to display this data efficiently in a Core MVC application.

1. HTML Table with Razor – The First Step (Beginner Level)
This is the simplest and most important method to understand.
It replaces GridView and Repeater from WebForms.

The controller fetches only a small number of records using pagination.

Controller example:
public IActionResult IPOmaster(int page = 1)
{
    int pageSize = 20;

    var data = _context.IPOmaster
        .AsNoTracking()
        .OrderByDescending(x => x.CreatedDate)
        .Skip((page - 1) * pageSize)
        .Take(pageSize)
        .ToList();

    return View(data);
}

Why this is important:

•  AsNoTracking() improves performance
•  Skip and Take ensure only required rows are fetched
•  Memory usage stays low

View example:
<table class="table table-bordered">
    <thead>
        <tr>
            <th>Symbol</th>
            <th>Category</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.Symbol</td>
            <td>@item.Category</td>
            <td>@item.CreatedDate</td>
        </tr>
    }
    </tbody>
</table>

This approach is mandatory knowledge for every MVC developer.

2. Partial View with AJAX – Beginner-Friendly Replacement for UpdatePanel
Beginners often ask how to update only part of the page without refreshing everything.

In Core MVC, this is done using Partial Views with AJAX.
Partial View (_IPOmasterList.cshtml):

<table class="table table-striped">
@foreach (var item in Model)
{
    <tr>
        <td>@item.Symbol</td>
        <td>@item.Category</td>
        <td>@item.CreatedDate</td>
    </tr>
}
</table>

Controller:
public IActionResult IPOmasterList(int page = 1)
{
    var data = GetPagedIPOData(page);
    return PartialView("_IPOmasterList", data);
}

Main View:
<div id="ipoContainer"></div>

<script>
function loadIPO(page) {
    $("#ipoContainer").load('/Admin/IPOmasterList?page=' + page);
}

$(document).ready(function () {
    loadIPO(1);
});
</script>

Why beginners should learn this:

• No full page reload
• Faster UI
• Works well for large datasets
• This is the accepted MVC version of UpdatePanel.

3. jQuery DataTables with Server-Side Processing – Advanced but Beginner-Understandable
When the application requires searching, sorting, and paging together, DataTables in server-side mode is the best solution.

Even though the code is advanced, the concept is simple:
The browser asks the server only for the data it needs.

View:
<table id="ipoTable" class="table table-bordered">
    <thead>
        <tr>
            <th>Symbol</th>
            <th>Category</th>
            <th>Date</th>
        </tr>
    </thead>
</table>

<script>
$('#ipoTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: '/Admin/GetIPOData',
        type: 'POST'
    },
    columns: [
        { data: 'symbol' },
        { data: 'category' },
        { data: 'createdDate' }
    ]
});
</script>

Controller:
[HttpPost]
public IActionResult GetIPOData()
{
    var request = HttpContext.Request.Form;

    int start = int.Parse(request["start"]);
    int length = int.Parse(request["length"]);

    var query = _context.IPOmaster.AsNoTracking();
    int totalRecords = query.Count();

    var data = query
        .OrderByDescending(x => x.CreatedDate)
        .Skip(start)
        .Take(length)
        .Select(x => new {
            symbol = x.Symbol,
            category = x.Category,
            createdDate = x.CreatedDate.ToString("dd-MM-yyyy")
        })
        .ToList();

    return Json(new {
        draw = request["draw"],
        recordsTotal = totalRecords,
        recordsFiltered = totalRecords,
        data
    });
}

Why this is important:

• Handles lakhs of records easily
• Search and sort happen on the server
• Used in real enterprise systems

4. ViewComponent – Clean and Reusable (Advanced Concept Explained Simply)
ViewComponents are useful when the same data grid appears in multiple places.

ViewComponent:
public class IPOmasterViewComponent : ViewComponent
{
    public IViewComponentResult Invoke(int page = 1)
    {
        var data = GetPagedIPOData(page);
        return View(data);
    }
}

View usage:
@await Component.InvokeAsync("IPOmaster", new { page = 1 })

For beginners:
Think of ViewComponent as a mini-controller + view

Keeps code clean and reusable

Final Recommendation for Beginners
Start with:
HTML Table + Razor

Then move to:
Partial View + AJAX

Finally adopt:
jQuery DataTables (Server-side) for large data
Avoid loading all records at once. This is the most common beginner mistake.

Conclusion
ASP.NET Core MVC encourages developers to think in terms of performance and scalability. By learning simple Razor tables first and gradually moving to AJAX and server-side DataTables, even beginners can build applications that handle lakhs of records efficiently. These techniques are not only beginner-friendly but also production-ready.