In this article, we will learn how to use JQuery Datatable in ASP.NET Core with Server Side Processing. We will also be building a simple real-world implementation to help understand JQuery Datatable to it’s fullest. You can find the source code of the entire implementation here. Let’s begin
using System;
namespace System.Web.Mvc
{
public abstract class WebViewPage<TModel> : WebViewPage
{
protected WebViewPage();
public AjaxHelper<TModel> Ajax { get; set; }
public HtmlHelper<TModel> Html { get; set; }
public TModel Model { get; }
public ViewDataDictionary<TModel> ViewData { get; set; }
public override void InitHelpers();
protected override void SetViewData(ViewDataDictionary viewData);
}
}
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>
namespace MvcApplication18.Models
{
public class Employee
{
public int Id { set; get; }
public string Name { set; get; }
}
}
using System.Collections.Generic;
namespace MvcApplication18.Models
{
public static class EmployeeDataSource
{
public static IList<Employee> CreateEmployees()
{
var list = new List<Employee>();
for (int i = 0; i < 1000; i++)
{
list.Add(new Employee { Id = i + 1, Name = "name " + i });
}
return list;
}
}
}
using System.Linq;
using System.Web.Mvc;
using MvcApplication18.Models;
namespace MvcApplication18.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
return View();
}
[HttpPost] //for IE-8
public ActionResult EmployeeInfo(int? id)
{
if (!Request.IsAjaxRequest())
return View("Error");
if (!id.HasValue)
return View("Error");
var list = EmployeeDataSource.CreateEmployees();
var data = list.Where(x => x.Id == id.Value).FirstOrDefault();
if (data == null)
return View("Error");
return PartialView(viewName: "_EmployeeInfo", model: data);
}
}
}
@model MvcApplication18.Models.Employee
<strong>Name:</strong> @Model.Name
@{
ViewBag.Title = "Index";
}
<h2>
Index</h2>
<div id="EmployeeInfo">
@Ajax.ActionLink(
linkText: "Get Employee-1 info",
actionName: "EmployeeInfo",
controllerName: "Home",
routeValues: new { id = 1 },
ajaxOptions: new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "EmployeeInfo",
LoadingElementId = "Progress"
})
</div>
<div id="Progress" style="display: none">
<img src="@Url.Content("~/Content/images/loading.gif")" alt="loading..." />
</div>
[AttributeUsage(AttributeTargets.Class|AttributeTargets.Method)]
public class AjaxOnlyAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
if (filterContext.HttpContext.Request.IsAjaxRequest())
{
base.OnActionExecuting(filterContext);
}
else
{
throw new InvalidOperationException("This operation can only be accessed via Ajax requests");
}
}
}
[AjaxOnly]
public ActionResult SomeAjaxAction()
{
return Content("Hello!");
}
<a data-ajax="true" data-ajax-loading="#Progress" data-ajax-method="POST"
data-ajax-mode="replace" data-ajax-update="#EmployeeInfo"
href="/Home/EmployeeInfo/1">Get Employee-1 info</a>
<a href="#" onclick="LoadEmployeeInfo()">Get Employee-1 info</a>
@section javascript
{
<script type="text/javascript">
function LoadEmployeeInfo() {
showProgress();
$.ajax({
type: "POST",
url: "/Home/EmployeeInfo",
data: JSON.stringify({ id: 1 }),
contentType: "application/json; charset=utf-8",
dataType: "json",
// controller is returning a simple text, not json
complete: function (xhr, status) {
var data = xhr.responseText;
if (status === 'error' || !data) {
//handleError
}
else {
$('#EmployeeInfo').html(data);
}
hideProgress();
}
});
}
function showProgress() {
$('#Progress').css("display", "block");
}
function hideProgress() {
$('#Progress').css("display", "none");
}
</script>
}
@RenderSection("javascript", required: false)
[HttpPost] //for IE-8
public ActionResult EmployeeInfoData(int? id)
{
if (!Request.IsAjaxRequest())
return Json(false);
if (!id.HasValue)
return Json(false);
var list = EmployeeDataSource.CreateEmployees();
var data = list.Where(x => x.Id == id.Value).FirstOrDefault();
if (data == null)
return Json(false);
return Json(data);
}
<a href="#" onclick="LoadEmployeeInfoData()">Get Employee-2 info</a>
@section javascript
{
<script type="text/javascript">
function LoadEmployeeInfoData() {
showProgress();
$.ajax({
type: "POST",
url: "/Home/EmployeeInfoData",
data: JSON.stringify({ id: 1 }),
contentType: "application/json; charset=utf-8",
dataType: "json",
// controller is returning the json data
success: function (result) {
if (result) {
alert(result.Id + ' - ' + result.Name);
}
hideProgress();
},
error: function (result) {
alert(result.status + ' ' + result.statusText);
hideProgress();
}
});
}
function showProgress() {
$('#Progress').css("display", "block");
}
function hideProgress() {
$('#Progress').css("display", "none");
}
</script>
}
[HttpPost] //for IE-8
public ActionResult SearchEmployeeInfo(string data)
{
if (!Request.IsAjaxRequest())
return Content(string.Empty);
if (string.IsNullOrWhiteSpace(data))
return Content(string.Empty);
var employeesList = EmployeeDataSource.CreateEmployees();
var list = employeesList.Where(x => x.Name.Contains(data)).ToList();
if (list == null || !list.Any())
return Content(string.Empty);
return PartialView(viewName: "_SearchEmployeeInfo", model: list);
}
@model IEnumerable<MvcApplication18.Models.Employee>
<table>
<tr>
<th>
Name
</th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
}
</table>
@using (Ajax.BeginForm(actionName: "SearchEmployeeInfo",
controllerName: "Home",
ajaxOptions: new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "EmployeeInfo",
LoadingElementId = "Progress"
}))
{
@Html.TextBox("data")
<input type="submit" value="Search" />
}
<form action="/Home/SearchEmployeeInfo" data-ajax="true"
data-ajax-loading="#Progress" data-ajax-method="POST"
data-ajax-mode="replace" data-ajax-update="#EmployeeInfo"
id="form0" method="post">
<input id="data" name="data" type="text" value="" />
<input type="submit" value="Search" />
</form>
$.validator.unobtrusive.parse("#{form-id}");
$.ajax
({
url: "/{controller}/{action}/{id}",
type: "get",
success: function(data)
{
$.validator.unobtrusive.parse("#{form-id}");
}
});
//or
$.get('/{controller}/{action}/{id}', function (data) { $.validator.unobtrusive.parse("#{form-id}"); });
@using (Ajax.BeginForm(
"Action1",
"Controller",
null,
new AjaxOptions {
OnSuccess = "onSuccess",
UpdateTargetId = "result"
},
null)
)
{
<input type="submit" value="Save" />
}
var onSuccess = function(result) {
// enable unobtrusive validation for the contents
// that was injected into the <div id="result"></div> node
$.validator.unobtrusive.parse("#result");
};
How to Create a PNG File from a Web Page in C#
C# Smorgasbord covers a vast variety of different technologies, patterns and best practices that any C# developer should master.
public interface IHaveCustomMapping
{
void CreateMappings(AutoMapper.Profile profile);
} public class PostDtoMapping : IHaveCustomMapping
{
public void CreateMappings(Profile profile)
{
profile.CreateMap<PostDto, Post>().ReverseMap();
}
} public class CustomMappingProfile : Profile
{
public CustomMappingProfile(IEnumerable<IHaveCustomMapping> haveCustomMappings)
{
foreach (var item in haveCustomMappings)
item.CreateMappings(this);
}
} public static class AutoMapperConfiguration
{
public static void InitializeAutoMapper()
{
Mapper.Initialize(config =>
{
config.AddCustomMappingProfile();
});
//Compile mapping after configuration to boost map speed
Mapper.Configuration.CompileMappings();
}
public static void AddCustomMappingProfile(this IMapperConfigurationExpression config)
{
config.AddCustomMappingProfile(Assembly.GetEntryAssembly());
}
public static void AddCustomMappingProfile(this IMapperConfigurationExpression config, params Assembly[] assemblies)
{
var allTypes = assemblies.SelectMany(a => a.ExportedTypes);
//Find all classes that implement IHaveCustomMapping inteface and create new instance of each
var list = allTypes.Where(type => type.IsClass && !type.IsAbstract &&
type.GetInterfaces().Contains(typeof(IHaveCustomMapping)))
.Select(type => (IHaveCustomMapping)Activator.CreateInstance(type));
//Create a new automapper Profile for this list to create mapping then add to the config
var profile = new CustomMappingProfile(list);
config.AddProfile(profile);
}
} public abstract class BaseDto<TDto, TEntity, TKey> : IHaveCustomMapping
where TEntity : BaseEntity<TKey>
{
[Display(Name = "ردیف")]
public TKey Id { get; set; }
/// <summary>
/// Maps this dto to a new entity object.
/// </summary>
public TEntity ToEntity()
{
return Mapper.Map<TEntity>(CastToDerivedClass(this));
}
/// <summary>
/// Maps this dto to an exist entity object.
/// </summary>
public TEntity ToEntity(TEntity entity)
{
return Mapper.Map(CastToDerivedClass(this), entity);
}
/// <summary>
/// Maps the specified entity to a new dto object.
/// </summary>
public static TDto FromEntity(TEntity model)
{
return Mapper.Map<TDto>(model);
}
protected TDto CastToDerivedClass(BaseDto<TDto, TEntity, TKey> baseInstance)
{
return Mapper.Map<TDto>(baseInstance);
}
//Get automapper Profile then create mapping and ignore unmapped properties
public void CreateMappings(Profile profile)
{
var mappingExpression = profile.CreateMap<TDto, TEntity>();
var dtoType = typeof(TDto);
var entityType = typeof(TEntity);
//Ignore mapping to any property of source (like Post.Categroy) that dose not contains in destination (like PostDto)
//To prevent from wrong mapping. for example in mapping of "PostDto -> Post", automapper create a new instance for Category (with null catgeoryName) because we have CategoryName property that has null value
foreach (var property in entityType.GetProperties())
{
if (dtoType.GetProperty(property.Name) == null)
mappingExpression.ForMember(property.Name, opt => opt.Ignore());
}
//Pass mapping expressin to customize mapping in concrete class
CustomMappings(mappingExpression.ReverseMap());
}
//Concrete class can override this method to customize mapping
public virtual void CustomMappings(IMappingExpression<TEntity, TDto> mapping)
{
}
} public class PostDto : BaseDto<PostDto, Post, long>
{
public string Title { get; set; }
public string Text { get; set; }
public int CategoryId { get; set; }
public string CategoryName { get; set; } //=> Category.Name
public string FullTitle { get; set; } //=> custom mapping for "Title (Category.Name)"
public override void CustomMappings(IMappingExpression<Post, PostDto> mapping)
{
mapping.ForMember(
dest => dest.FullTitle,
config => config.MapFrom(src => $"{src.Title} ({src.Category.Name})"));
}
} List<PostDto> list =
//ProjectTo method select only needed properties (of PostDto) not all properties
//Also select only needed property of navigations (like Post.Category.Name) not all unlike Include
//This ability called "Projection"
await _applicationDbContext.Posts.ProjectTo<PostDto>()
//We can also use Where on IQuerable<PostDto>
.Where(p => p.Title.Contains("test") || p.CategoryName.Contains("test"))
.ToListAsync(); gRPC Service with .NET 7
In this video we build a gRPC service with 5 methods: Create, Read (single), List (multiple), Update and Delete. We then employ JSON transcoding (a new feature added in .NET 7) to allow our gRPC service to act as a REST based API. This allows web-based endpoints to consume our service, while at the same time continuing to allow native gRPC clients to consume as well.
⏲️ Time Codes ⏲️
- 0:33 - Welcome
- 2:00 - gRPC Overview
- 5:08 - Scaffold the prject
- 9:58 - Test "greeter" service with Postman
- 12:32 - Add package dependencies
- 14:48 - Create the Model
- 16:38 - Create DB Context & migrations
- 22:37 - Define the protobuf file
- 32:39 - Build the first service method
- 40:55 - Test method with postman
- 42:52 - Read method
- 48:42 - List method
- 52:39 - Update method
- 59:14 - Delete method
- 1:03:24 - Add the annotation files
- 1:06:07 - Annotate the first gRPC method
- 1:09:26 - Annotate remaining methods
- 1:12:42 - Test with Postman
- 1:16;00 - Patreon supporter credits
var productsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "api/products",
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'GET'
},
create: {
url: "api/products",
contentType: 'application/json; charset=utf-8',
type: "POST"
},
update: {
url: function (product) {
return "api/products/" + product.Id;
},
contentType: 'application/json; charset=utf-8',
type: "PUT"
},
destroy: {
url: function (product) {
return "api/products/" + product.Id;
},
contentType: 'application/json; charset=utf-8',
type: "DELETE"
},
//...
},
schema: {
//...
model: {
id: "Id", // define the model of the data source. Required for validation and property types.
fields: {
"Id": { type: "number", editable: false }, //تعیین نوع فیلد برای جستجوی پویا مهم است
"Name": { type: "string", validation: { required: true } },
"IsAvailable": { type: "boolean" },
"Price": { type: "number", validation: { required: true, min: 1 } },
"AddDate": { type: "date", validation: { required: true } }
}
}
},
batch: false, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
//...
}); namespace KendoUI06.Controllers
{
public class ProductsController : ApiController
{
public HttpResponseMessage Post(Product product)
{
if (!ModelState.IsValid)
return Request.CreateResponse(HttpStatusCode.BadRequest);
var id = 1;
var lastItem = ProductDataSource.LatestProducts.LastOrDefault();
if (lastItem != null)
{
id = lastItem.Id + 1;
}
product.Id = id;
ProductDataSource.LatestProducts.Add(product);
var response = Request.CreateResponse(HttpStatusCode.Created, product);
response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = product.Id }));
// گرید آی دی جدید را به این صورت دریافت می‌کند
response.Content = new ObjectContent<DataSourceResult>(
new DataSourceResult { Data = new[] { product } }, new JsonMediaTypeFormatter());
return response;
}
}
} var productsDataSource = new kendo.data.DataSource({
//...
schema: {
data: "Data",
total: "Total",
}
//...
}); namespace KendoUI06.Controllers
{
public class ProductsController : ApiController
{
public DataSourceResult Get(HttpRequestMessage requestMessage)
{
var request = JsonConvert.DeserializeObject<DataSourceRequest>(
requestMessage.RequestUri.ParseQueryString().GetKey(0)
);
var list = ProductDataSource.LatestProducts;
return list.AsQueryable()
.ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter);
}
}
} response.Content = new ObjectContent<DataSourceResult>(
new DataSourceResult { Data = new[] { product } }, new JsonMediaTypeFormatter()); namespace KendoUI06.Controllers
{
public class ProductsController : ApiController
{
public HttpResponseMessage Delete(int id)
{
var item = ProductDataSource.LatestProducts.FirstOrDefault(x => x.Id == id);
if (item == null)
return Request.CreateResponse(HttpStatusCode.NotFound);
ProductDataSource.LatestProducts.Remove(item);
return Request.CreateResponse(HttpStatusCode.OK, item);
}
[HttpPut] // Add it to fix this error: The requested resource does not support http method 'PUT'
public HttpResponseMessage Update(int id, Product product)
{
var item = ProductDataSource.LatestProducts
.Select(
(prod, index) =>
new
{
Item = prod,
Index = index
})
.FirstOrDefault(x => x.Item.Id == id);
if (item == null)
return Request.CreateResponse(HttpStatusCode.NotFound);
if (!ModelState.IsValid || id != product.Id)
return Request.CreateResponse(HttpStatusCode.BadRequest);
ProductDataSource.LatestProducts[item.Index] = product;
return Request.CreateResponse(HttpStatusCode.OK);
}
}
} $("#report-grid").kendoGrid({
//....
editable: {
confirmation: "آیا مایل به حذف ردیف انتخابی هستید؟",
destroy: true, // whether or not to delete item when button is clicked
mode: "popup", // options are "incell", "inline", and "popup"
//template: kendo.template($("#popupEditorTemplate").html()), // template to use for pop-up editing
update: true, // switch item to edit mode when clicked?
window: {
title: "مشخصات محصول" // Localization for Edit in the popup window
}
},
columns: [
//....
{
command: [
{ name: "edit", text: "ویرایش" },
{ name: "destroy", text: "حذف" }
],
title: " ", width: "160px"
}
],
toolbar: [
{ name: "create", text: "افزودن ردیف جدید" },
{ name: "save", text: "ذخیره‌ی تمامی تغییرات" },
{ name: "cancel", text: "لغو کلیه‌ی تغییرات" },
{ template: kendo.template($("#toolbarTemplate").html()) }
],
messages: {
editable: {
cancelDelete: "لغو",
confirmation: "آیا مایل به حذف این رکورد هستید؟",
confirmDelete: "حذف"
},
commands: {
create: "افزودن ردیف جدید",
cancel: "لغو کلیه‌ی تغییرات",
save: "ذخیره‌ی تمامی تغییرات",
destroy: "حذف",
edit: "ویرایش",
update: "ثبت",
canceledit: "لغو"
}
}
});