This article shows how an expandable master-details table can be implemented in ASP.NET MVC using the jQuery DataTables plug-in.
- JQueryMasterDetailsDataTables.zip
- JQueryMasterDetailsDataTables
- bin
- JQueryMasterDetailsDataTables.dll
- Content
- dataTables
- images
- back_disabled.jpg
- back_enabled.jpg
- details_close.png
- details_open.png
- favicon.ico
- forward_disabled.jpg
- forward_enabled.jpg
- sort_asc.png
- sort_asc_disabled.png
- sort_both.png
- sort_desc.png
- sort_desc_disabled.png
- Sorting icons.psd
- themes
- base
- images
- ui-bg_flat_0_aaaaaa_40x100.png
- ui-bg_flat_75_ffffff_40x100.png
- ui-bg_glass_55_fbf9ee_1x400.png
- ui-bg_glass_65_ffffff_1x400.png
- ui-bg_glass_75_dadada_1x400.png
- ui-bg_glass_75_e6e6e6_1x400.png
- ui-bg_glass_95_fef1ec_1x400.png
- ui-bg_highlight-soft_75_cccccc_1x100.png
- ui-icons_222222_256x240.png
- ui-icons_2e83ff_256x240.png
- ui-icons_454545_256x240.png
- ui-icons_888888_256x240.png
- ui-icons_cd0a0a_256x240.png
- jquery-ui.css
- smoothness
- images
- ui-bg_flat_0_aaaaaa_40x100.png
- ui-bg_flat_75_ffffff_40x100.png
- ui-bg_glass_55_fbf9ee_1x400.png
- ui-bg_glass_65_ffffff_1x400.png
- ui-bg_glass_75_dadada_1x400.png
- ui-bg_glass_75_e6e6e6_1x400.png
- ui-bg_glass_95_fef1ec_1x400.png
- ui-bg_highlight-soft_75_cccccc_1x100.png
- ui-icons_222222_256x240.png
- ui-icons_2e83ff_256x240.png
- ui-icons_454545_256x240.png
- ui-icons_888888_256x240.png
- ui-icons_cd0a0a_256x240.png
- jquery-ui-1.7.2.custom.css
- Controllers
- Global.asax
- Global.asax.cs
- JQueryMasterDetailsDataTables.csproj
- JQueryMasterDetailsDataTables.csproj.user
- Models
- obj
- Debug
- TempPE
- Properties
- Scripts
- Views
- Web.config
- Web.Debug.config
- Web.Release.config
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using JQueryDataTables.Models;
namespace JQueryDataTables.Controllers
{
public class HomeController : Controller
{
/// <summary>
/// Action that handles initiall request and returns static view
/// </summary>
/// <returns>Home/Index view</returns>
public ActionResult Index()
{
return View();
}
public ActionResult ServerSide()
{
return View(DataRepository.GetCompanies());
}
public ActionResult Ajax()
{
return View();
}
/// <summary>
/// Returns data by the criterion
/// </summary>
/// <param name="param">Request sent by DataTables plugin</param>
/// <returns>JSON text used to display data
/// <list type="">
/// <item>sEcho - same value as in the input parameter</item>
/// <item>iTotalRecords - Total number of unfiltered data. This value is used in the message:
/// "Showing *start* to *end* of *iTotalDisplayRecords* entries (filtered from *iTotalDisplayRecords* total entries)
/// </item>
/// <item>iTotalDisplayRecords - Total number of filtered data. This value is used in the message:
/// "Showing *start* to *end* of *iTotalDisplayRecords* entries (filtered from *iTotalDisplayRecords* total entries)
/// </item>
/// <item>aoData - Twodimensional array of values that will be displayed in table.
/// Number of columns must match the number of columns in table and number of rows is equal to the number of records that should be displayed in the table</item>
/// </list>
/// </returns>
public ActionResult AjaxHandler(JQueryDataTableParamModel param)
{
var allCompanies = DataRepository.GetCompanies();
IEnumerable<Company> filteredCompanies;
//Check whether the companies should be filtered by keyword
if (!string.IsNullOrEmpty(param.sSearch))
{
//Used if particulare columns are filtered
var nameFilter = Convert.ToString(Request["sSearch_1"]);
var addressFilter = Convert.ToString(Request["sSearch_2"]);
var townFilter = Convert.ToString(Request["sSearch_3"]);
//Optionally check whether the columns are searchable at all
var isNameSearchable = Convert.ToBoolean(Request["bSearchable_1"]);
var isAddressSearchable = Convert.ToBoolean(Request["bSearchable_2"]);
var isTownSearchable = Convert.ToBoolean(Request["bSearchable_3"]);
filteredCompanies = DataRepository.GetCompanies()
.Where(c => isNameSearchable && c.Name.ToLower().Contains(param.sSearch.ToLower())
||
isAddressSearchable && c.Address.ToLower().Contains(param.sSearch.ToLower())
||
isTownSearchable && c.Town.ToLower().Contains(param.sSearch.ToLower()));
}
else
{
filteredCompanies = allCompanies;
}
var isNameSortable = Convert.ToBoolean(Request["bSortable_1"]);
var isAddressSortable = Convert.ToBoolean(Request["bSortable_2"]);
var isTownSortable = Convert.ToBoolean(Request["bSortable_3"]);
var sortColumnIndex = Convert.ToInt32(Request["iSortCol_0"]);
Func<Company, string> orderingFunction = (c => sortColumnIndex == 1 && isNameSortable ? c.Name :
sortColumnIndex == 2 && isAddressSortable ? c.Address :
sortColumnIndex == 3 && isTownSortable ? c.Town :
"");
var sortDirection = Request["sSortDir_0"]; // asc or desc
if (sortDirection == "asc")
filteredCompanies = filteredCompanies.OrderBy(orderingFunction);
else
filteredCompanies = filteredCompanies.OrderByDescending(orderingFunction);
var displayedCompanies = filteredCompanies.Skip(param.iDisplayStart).Take(param.iDisplayLength);
var result = from c in displayedCompanies select new[] { Convert.ToString(c.ID), c.Name, c.Address, c.Town };
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = allCompanies.Count(),
iTotalDisplayRecords = filteredCompanies.Count(),
aaData = result
},
JsonRequestBehavior.AllowGet);
}
/// <summary>
///
/// </summary>
/// <param name="CompanyID"></param>
/// <returns></returns>
public ActionResult CompanyEmployees(int? CompanyID)
{
var employees = DataRepository.GetEmployees();
var companyEmployees = (from e in employees
where (CompanyID == null || e.CompanyID == CompanyID%6)
select e).ToList();
return View(companyEmployees);
}
}
}
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Graduated from Faculty of Electrical Engineering, Department of Computer Techniques and Informatics, University of Belgrade, Serbia.
Currently working in Microsoft as Program Manager on SQL Server product.
Member of JQuery community - created few popular plugins (four popular JQuery DataTables add-ins and loadJSON template engine).
Interests: Web and databases, Software engineering process(estimation and standardization), mobile and business intelligence platforms.