This lesson will teach us how to use jQuery DataTables to accomplish server-side processing with custom range filtering. I will demonstrate the server-side paging, sorting, and filtering of a DataTable in an ASP.NET MVC application. Server-side refers to the use of C# code in the Controller section behind the file. To create custom multicolumn server-side filtering in jQuery DataTables, we may remove the global search box and use our own filter area with input fields like textbox and dropdown. This allows us to deal with jQuery DataTables by implementing our own filter sections wherever on our site.

With capabilities like pagination, searching, state saving, multi-column sorting with data type recognition, and much more, DataTable is the most potent and user-friendly jQuery plugin for presenting tabular data with ZERO or minimum configuration.

The following technologies must be understood in order to read this article.

The prerequisites of this article include knowledge of the following technologies.

• ASP.NET MVC
• HTML
• JavaScript
• AJAX
• CSS
• Bootstrap
• C# Programming
• C# LINQ
• jQuery

Note. Before going through the session, I suggest you first visit my previous articles with a back-end section.

    Retrieve Records In jQuery Datatable Using Entity Framework And Bootstrap
    Performance Issue In jQuery DataTable About Fetching Records And Steps To Fix It

Steps to be followed
Step 1. Add a new action into the Controller to get the View where we will implement the jQuery DataTable with server-side paging and sorting.
Code
public ActionResult Filter()
{
    return View();
}

Step 2. Add a View for the action (here "filter") and design.

Code
@{
    ViewBag.Title = "HFL - Filter Records";
}
<h2 style="color: blue
">HFL-Server Side Processing With Custom Range Filtering</h2>
<style>
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    td, th {
        border: 1px solid #dddddd
;
        text-align: left;
        padding: 8px;
    }
    tr:nth-child(even) {
        background-color: #dddddd
;
    }
    .custom-loader-color {
        color: #fff 
!important;
        font-size: 40px !important;
    }
    .custom-loader-background {
        background-color: #f60 
!important;
    }
    .custom-middle-align {
        vertical-align: middle !important;
    }
</style>
<div style="width:90%; margin:0 auto">
    <div style="background-color:#f5f5f5
; padding:20px">
        <h2 style="color: blue
">Filter Records</h2>
        <table>
            <tbody>
                <tr>
                    <td style="color: blue
">City</td>
                    <td><input type="text" class="form-control" id="txtCity" /></td>
                    <td style="color: blue
">State</td>
                    <td>
                        <select id="ddState" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                            <option value="">All States</option>
                            <option value="Karnataka">Karnataka</option>
                            <option value="Andhra Pradesh">Andhra Pradesh</option>
                            <option value="Georgia">Georgia</option>
                            <option value="Uttar Pradesh">Uttar Pradesh</option>
                            <option value="Odisha">Odisha</option>
                        </select>
                    </td>
                    <td>
                        <input type="button" class="btn btn-success btn-md" value="Filter" id="btnFilter" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    @* jQuery DataTables *@
    <div style="width:90%; margin:0 auto;">
        <table id="myTable" class="table table-responsive table-striped">
            <thead>
                <tr>
                    <th style="background-color: Yellow
;color: blue
">First Name</th>
                    <th style="background-color: Yellow
;color: blue
">Last Name</th>
                    <th style="background-color: Yellow
;color: blue
">Age</th>
                    <th style="background-color: Yellow
;color: blue
">Address</th>
                    <th style="background-color: Yellow
;color: blue
">City</th>
                    <th style="background-color: Yellow
;color: blue
">State</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@* Load bootstrap datatable css *@
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<link href="//cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
@* Load bootstrap datatable js and initialize DataTable *@
@section Scripts {
    <script src="//code.jquery.com/jquery-3.3.1.js"></script>
    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $(document).ready(function () {
            // jQuery DataTables initialization
            $('#myTable').DataTable({
                "language": {
                    "processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
                },
                "processing": true,
                "serverSide": true,
                "orderMulti": false,
                "dom": '<"top"i>rt<"bottom"lp><"clear">',
                "ajax": {
                    "url": "/home/FilterData",
                    "type": "POST",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "FirstName", "name": "FirstName", "autoWidth": true },
                    { "data": "LastName", "name": "LastName", "autoWidth": true },
                    { "data": "Age", "name": "Age", "autoWidth": true },
                    { "data": "Address", "name": "Address", "autoWidth": true },
                    { "data": "City", "name": "City", "autoWidth": true },
                    { "data": "State", "name": "State", "autoWidth": true }
                ]
            });

            // DataTables filtering on button click
            var oTable = $('#myTable').DataTable();
            $('#btnFilter').click(function () {
                oTable.columns(4).search($('#txtCity').val().trim());
                oTable.columns(5).search($('#ddState').val().trim());
                oTable.draw();
            });
        });
    </script>
}

Markup
Code description

Here, I have added a textbox for City and a dropdown for State to filter the records. I used some static records in the dropdown for basic understanding and in my next session, I will fill the dropdown from the database using Entity Framework.

<div style="background-color:#f5f5f5
; padding:20px;">
    <h2 style="color: blue
;">Filter Records</h2>
    <table>
        <tbody>
            <tr>
                <td style="color: blue
;">City</td>
                <td><input type="text" class="form-control" id="txtCity" /></td>
                <td style="color: blue
;">State</td>
                <td>
                    <select id="ddState" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                        <option value="">All States</option>
                        <option value="London">London</option>
                        <option value="Manchester">Manchester</option>
                        <option value="Liverpool">Liverpool</option>
                        <option value="Birmingham">Birmingham</option>
                        <option value="York">York</option>
                    </select>
                </td>
                <td>
                    <input type="button" class="btn btn-success btn-md" value="Filter" id="btnFilter" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

I have updated the code to implement custom multicolumn server-side filtering in jQuery DataTables by removing the default global search box. This initialization variable allows you to specify where in the DOM you want DataTables to introduce the various controls it composes to the page.
    <"top"i> means it is showing the info of entries.
    rt means it is showing the progress bar with loading records in DataTable.
    <"bottom"lp> means it is showing the length of records and also, the paging in the page.
    <"clear"> means it clears the controls or any data inside div element.

    "dom": '<"top"i>rt<"bottom"lp><"clear">'

The following piece of code will enable the data loading from server-side. The path "/home/FilterData" is the function that will be returning data from server side. The columns here are the exact names of the properties that we have created in the table and uploaded using the Entity Data Model file. Here, we can get the index number of the table's columns.
$('#myTable').DataTable({
    "language": {
        "processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
    },
    "processing": true,
    "serverSide": true,
    "orderMulti": false,
    "dom": '<"top"i>rt<"bottom"lp><"clear">',
    "ajax": {
        "url": "/home/FilterData",
        "type": "POST",
        "datatype": "json"
    },
    "columns": [
        { "data": "FirstName", "name": "FirstName", "autoWidth": true }, //index 0
        { "data": "LastName", "name": "LastName", "autoWidth": true }, //index 1
        { "data": "Age", "name": "Age", "autoWidth": true }, //index 2
        { "data": "Address", "name": "Address", "autoWidth": true }, //index 3
        { "data": "City", "name": "City", "autoWidth": true }, //index 4
        { "data": "State", "name": "State", "autoWidth": true } //index 5
    ]
});

The following piece of code is used to apply custom search on jQuery DataTables. I have applied search for the city name using DataTable column index 4 and search for state name using DataTable column index 5.
oTable = $('#myTable').DataTable();
$('#btnFilter').click(function () {
    oTable.columns(4).search($('#txtCity').val().trim());
    oTable.columns(5).search($('#ddState').val().trim());
    oTable.draw();
});
});

Step 3. Add another action (here "FilterData") for fetching the data from the database and implementing the logic for server-side paging and sorting.

Code
[HttpPost]
public ActionResult FilterData()
{
    // Initialization.
    JsonResult result = new JsonResult();
    try
    {
        var draw = Request.Form.GetValues("draw").FirstOrDefault();
        var start = Request.Form.GetValues("start").FirstOrDefault();
        var length = Request.Form.GetValues("length").FirstOrDefault();
        var sortColumn = Request.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault()
                        + "][name]").FirstOrDefault();
        var sortColumnDir = Request.Form.GetValues("order[0][dir]").FirstOrDefault();
        var city = Request.Form.GetValues("columns[4][search][value]").FirstOrDefault();
        var state = Request.Form.GetValues("columns[5][search][value]").FirstOrDefault();
        int pageSize = length != null ? Convert.ToInt32(length) : 0;
        int skip = start != null ? Convert.ToInt16(start) : 0;
        int recordsTotal = 0;
        using (HFLDBEntities dc = new HFLDBEntities())
        {
            var v = (from a in dc.employees select a);

            if (!string.IsNullOrEmpty(city))
            {
                v = v.Where(a => a.City.Contains(city));
            }
            if (!string.IsNullOrEmpty(state))
            {
                v = v.Where(a => a.State == state);
            }
            if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir)))
            {
                v = v.OrderBy(sortColumn + " " + sortColumnDir);
            }
            recordsTotal = v.Count();
            var data = v.Skip(skip).Take(pageSize).ToList();

            return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data },
                        JsonRequestBehavior.AllowGet);
        }
    }
    catch (Exception ex)
    {
        // Handle exception (log or display error)
        Console.WriteLine(ex); // Log exception details to console
    }
    // Return empty or default result if exception occurs
    return result;
}

Code description
I have described the code using the comment line in every line of code. It will be easy for a quick understanding of the code flow. In this piece of code, which is based on searching, sorting, and pagination information sent from the DataTable plugin, the following has been done: The data is being loaded first. It is being churned out based on the search criteria. Data is then sorted by a provided column in a provided order. Lastly, it is paginated and returned.

I have declared two variables which contain the informaion of two columns for filtering records with their index values as I have described in the View section.
var city = Request.Form.GetValues("columns[4][search][value]").FirstOrDefault();
var state = Request.Form.GetValues("columns[5][search][value]").FirstOrDefault();

The following is the piece of code for filtering records using city and state columns.
if (!string.IsNullOrEmpty(city))
{
    v = v.Where(a => a.City.Contains(city));
}
if (!string.IsNullOrEmpty(state))
{
    v = v.Where(a => a.State == state);
}

For sorting, we need to add a reference of System.Linq.Dynamic.
if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir)))
{
    v = v.OrderBy(sortColumn + " " + sortColumnDir);
}

Output
During the initial load, the processing loader will look like below.

All states
Filter records using state dropdown, as shown below.

Filter records using city textbox.

Filter records using both, City and State.

Summary
In this write-up, we have learned how to

• Filter records using custom multicolumn server-side features.
• Remove default global search box of jQuery DataTable by using initialisation variable in DOM.
• Get record's length, sorting and pagination information with the DataTable plugin.
• Get Server-side integration of DataTable plugin with ASP.NET MVC 5.

For a while now, I have been investigating ASP.Net Session Timeouts. Those of you who work on web applications have undoubtedly seen unexpected timeouts that cause the application to restart abruptly; frequently, these timeouts seem to happen for no obvious reason.

Here, I offer a quick checklist that could be useful when addressing such problems.

Causes for Session Timeout could vary from:

• Modification in Machine.Config, Web.Config or Global.asax files
• Application's bin directory or its contents modified 
• Antivirus is running on the  .config /.aspx files
• The number of re-compilations (aspx, ascx or asax) exceeds the limit specified by the <compilation numRecompilesBeforeAppRestart=/> setting in machine.config or web.config  (by default this is set to 15) 
• The physical path of the virtual directory is modified 
• The CAS policy is modified
• Sub-Directories of Application are deleted or renamed

New to ASP.Net 2.0  -The 7th point of Sub directories.  i.e. Whenever you delete or rename a sub-directory of your application, the application domain is recycled, terminating all users' sessions (and the cache, etc). This is a big performance hit. This behavior affects dramatically sites that allow document publishing, to the point where they stop functioning. Imagine a situation where a request creates a thread that goes through sub-directories of the application and deletes / renames them - without knowing about this 2.0 application domain recycling policy, chances are that the worker thread in question will not complete because the domain is recycled and the thread aborted. 

Huge Performance Hit
Above results in recycling of Application Domain. At the next request all assemblies need to be reloaded, the cache including any in-proc session variables etc. are empty causing a big performance hit for the application.
 
Remedies/ solutions
App domain restarts
If you suspect app domain restarts (i.e. your sessions seem to expire without obvious reasons), you will be interested to know when the restarts happen and what's causing them.

In ASP.Net 2.0 add the following element in global web.config file (C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\CONFIG) as a child of the <healthMonitoring><rules> elements:
<healthMonitoring>

      <rules>

<add name="Application Lifetime Events Default"  eventName="Application Lifetime Events"

provider="EventLogProvider"  profile="Default"  minInstances="1" maxLimit="Infinite"

                  minInterval="00:01:00"  custom="" />

       </rules>

</healthMonitoring>

This will log system events that provide the time and the reason of the restart (such as: Application is shutting down. Reason: Configuration changed.)
In ASP.Net 1.1, see

If the timeout error message reads as follows:
"System.Web.HttpException: Request timed out."

Check for  <httpRuntime executionTimeout/> in appication's Web.config file
executionTimeout - Specifies the maximum number of seconds that a request is allowed to execute before being automatically shut down by ASP.NET.

You can change this setting in machine.config to affect all applications on your site, or you can override the settings in your application-specific web.config as follows: 
<system.web>

     <httpRuntime executionTimeout="900" />
</system.web>

Note: This time-out applies only if the debug attribute in the compilation element is False. If the debug attribute is True, to help avoiding application shut-down while you are debugging, do not set this time-out to a large value.

The default values in seconds
In the .NET Framework 2.0 = 110.
In the .NET Framework 1.0 and 1.1= 90.
 
Set the Session timeout in IIS Manager in default website also.
Go to IIS Manager, right click on the virtual directory and choose properties.
Now go to virtual directory tab, click Configuration button.
A dialog box will appears. Choose AppOptions tab. Set the session timeout that u need. This will solve the problem. If you are getting the same problem again then set the same thing for Default WebSite also.
 
Remove the session timeout check in IIS, then the timeout will be read from the web.config.
 
Add following code in the web.config of your application file under <system.web>
<sessionState cookieless="false" timeout="330"/>
 
For random session timeouts, timeout occurring before the value set in sessionstate and idle timeouts, check if the application pool in IIS 6.0 has any 'Memory recycling' values selected and they are set up to some low sizes both for virtual or used memoray. 

Ex-If 200 Mb is set and the application reaches this limit in 5 minutes, the recycle happens and any sessions will be thus killed sooner than expected. See the figure below

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.