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
در این آموزش قصد دارم نحوه ایجاد یک Slideshow به صورت داینامیک را با ASP.NET طراحی کنم(منظور از ایجاد Slideshow به صورت داینامیک این است که عکس‌ها را به صورت داینامیک از DB بخواند).
اولین گام این است که Plugin مورد نظر را دریافت کنید که من از پلاگین Orbit استفاده کرده ام
ابتدا یک DataBase با نام DynamicSlideShow ایجاد و یک جدول با ساختار زیر با نام Picturesدرون آن ایجاد می‌کنیم
گام بعدی ایجاد یک پروژه Asp.Net با زبان C# و اضافه کردن فایلهای پلاگین به پروژه و ایجاد یک Handler برای بازیابی داده‌ها از DB است. ساختار Solutionما باید به صورت زیر باشد
برای اینکه بتوانیم با DB ارتباط برقرار کنیم از EF استفاده می‌کنیم به همین منظور ابتدا یک Model به نام DynamicSlideShowModel ایجاد می‌کنیم
در ادامه برای واکشی رکوردهای موجود در جدول Pictures کدهای زیر را درون Handler می‌نویسیم
var ctx = new DynamicSlideShowEntities(); var list = ctx.Pictures.ToList(); string str = JsonConvert.SerializeObject(list); context.Response.Write(str);
در این کدها تنها نکته‌ای که احتیاج به توضیح دارد این است که ابتدا یک لیست از
رکوردها را از جدول Pictures
واکشی می‌کنیم و برای پاس دادن به کلاینت ما آن‌ها را به فرمت Json تبدیل کرده ایم که برای تبدبل از
کنابخانه آماده Newtonsoft.Json.dll
استفاده کرده ایم
حال باید با استفاده از jQuery کدهای درون Handler را اجرا کنیم؛ برای همین منظور یک صفحه با نام default.aspx ایجاد کرده و کدهای زیر را درون آن می‌نویسیم
<head runat="server">
<title>Dynamic SlideShow</title>
<link href="CSS/orbit-1.2.3.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Script/jquery.orbit-1.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url: "Handler.ashx",
contentType: "application/json; charset=utf-8",
success: function (data) {
$.each(data, function (i, b) {
var str = '<img src="' + b.PicturePath + '" alt="' + b.PictureText + '"/>';
$("#featured").append(str);
});
$('#featured').orbit();
},
dataType: "json"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="featured">
</div>
</form>
</body>
در اینجا ابتدا با استفاده از متد ajax کتابخانه jQuery کدهای درون Handler را اجرا کرده و به ازای هر المان موجود در جدول یک تگ img به صفحه اضافه می‌کنیم.
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Login(LoginViewModel model, string returnUrl)
{
if (!ModelState.IsValid)
{
return View(model);
}
// This doesn't count login failures towards account lockout
// To enable password failures to trigger account lockout, change to shouldLockout: true
var result = await SignInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, shouldLockout: false);
switch (result)
{
case SignInStatus.Success:
return RedirectToLocal(returnUrl);
case SignInStatus.LockedOut:
return View("Lockout");
case SignInStatus.RequiresVerification:
return RedirectToAction("SendCode", new { ReturnUrl = returnUrl, RememberMe = model.RememberMe });
case SignInStatus.Failure:
default:
ModelState.AddModelError("", "Invalid login attempt.");
return View(model);
}
} var loggedinUser = await UserManager.FindAsync(model.Email, model.Password);
if (loggedinUser != null)
{
await UserManager.UpdateSecurityStampAsync(loggedinUser.Id);
} app.UseCookieAuthentication(new CookieAuthenticationOptions
{
AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
LoginPath = new PathString("/Account/Login"),
Provider = new CookieAuthenticationProvider
{
// Enables the application to validate the security stamp when the user logs in.
// This is a security feature which is used when you change a password or add an external login to your account.
OnValidateIdentity = SecurityStampValidator.OnValidateIdentity<ApplicationUserManager, ApplicationUser>(
validateInterval: TimeSpan.FromMinutes(30),
regenerateIdentity: (manager, user) => user.GenerateUserIdentityAsync(manager))
}
}); OnValidateIdentity = SecurityStampValidator.OnValidateIdentity<ApplicationUserManager, ApplicationUser>( TimeSpan.FromMinutes(0), // <-- Note the timer is set for zero (manager, user) => user.GenerateUserIdentityAsync(manager))
window.setInterval(function() {
$.ajax({
url:,
type: "Post",
dataType: "json",
success: function(data) {
if (!data) {
alert("Someone has logged in using your username and password!");
location.reload();
}
}
});
}, 60000); [AllowAnonymous]
public virtual ActionResult Authenticated()
{
return Json(User.Identity.IsAuthenticated);
} از کامپوننت EasyQuery برای ارائه یک رابط کاربر پسند (UserFriendly) جهت جستجو و فیلترینگ پیشرفته بر روی اطلاعات توسط کاربران استفاده می‌شود. این کامپوننت به کاربران اجازه می‌دهد تا اطلاعاتی را که نیاز دارند به راحتی و بدون نیاز به کمک شما یا تیم پشتیبانی، فراهم نمایند.
نسخه آزمایشی گزارش گیری ساخته شده با EasyQuery تحت وب
نسخه‌های آزمایشی دیگر بر روی ASP.NET MVC و Silverlight و ASP.NET AJAX و Win Forms
دانلود کدهای نسخه آزمایشی تحت وب
احتمالا فایل jquery.bootstrap-modal-ajax-form.js ارسال نشده. کلا بررسی کنید که آیا فایلهای موجود در پوشه‌ی اسکریپت‌ها ارسال شده یا نه.
public void ConfigureServices(IServiceCollection services)
{
services.Configure<BearerTokensOptions>(options => Configuration.GetSection("BearerTokens").Bind(options));
services
.AddAuthentication(options =>
{
options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
options.DefaultSignInScheme = JwtBearerDefaults.AuthenticationScheme;
options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(cfg =>
{
cfg.RequireHttpsMetadata = false;
cfg.SaveToken = true;
cfg.TokenValidationParameters = new TokenValidationParameters
{
ValidIssuer = Configuration["BearerTokens:Issuer"],
ValidAudience = Configuration["BearerTokens:Audience"],
IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["BearerTokens:Key"])),
ValidateIssuerSigningKey = true,
ValidateLifetime = true,
ClockSkew = TimeSpan.Zero
};
cfg.Events = new JwtBearerEvents
{
OnAuthenticationFailed = context =>
{
var logger = context.HttpContext.RequestServices.GetRequiredService<ILoggerFactory>().CreateLogger(nameof(JwtBearerEvents));
logger.LogError("Authentication failed.", context.Exception);
return Task.CompletedTask;
},
OnTokenValidated = context =>
{
var tokenValidatorService = context.HttpContext.RequestServices.GetRequiredService<ITokenValidatorService>();
return tokenValidatorService.ValidateAsync(context);
},
OnMessageReceived = context =>
{
return Task.CompletedTask;
},
OnChallenge = context =>
{
var logger = context.HttpContext.RequestServices.GetRequiredService<ILoggerFactory>().CreateLogger(nameof(JwtBearerEvents));
logger.LogError("OnChallenge error", context.Error, context.ErrorDescription);
return Task.CompletedTask;
}
};
}); {
"BearerTokens": {
"Key": "This is my shared key, not so secret, secret!",
"Issuer": "http://localhost/",
"Audience": "Any",
"AccessTokenExpirationMinutes": 2,
"RefreshTokenExpirationMinutes": 60
}
} [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
$.ajax({
headers: { 'Authorization': 'Bearer ' + jwtToken }, const string tokenKey = "my.custom.jwt.token.key";
if (context.HttpContext.Items.ContainsKey(tokenKey))
{
context.Token = (string)context.HttpContext.Items[tokenKey];
} OnTokenValidated = context =>
{
var tokenValidatorService = context.HttpContext.RequestServices.GetRequiredService<ITokenValidatorService>();
return tokenValidatorService.ValidateAsync(context);
}, public class TokenValidatorService : ITokenValidatorService
{
private readonly IUsersService _usersService;
private readonly ITokenStoreService _tokenStoreService;
public TokenValidatorService(IUsersService usersService, ITokenStoreService tokenStoreService)
{
_usersService = usersService;
_usersService.CheckArgumentIsNull(nameof(usersService));
_tokenStoreService = tokenStoreService;
_tokenStoreService.CheckArgumentIsNull(nameof(_tokenStoreService));
}
public async Task ValidateAsync(TokenValidatedContext context)
{
var userPrincipal = context.Principal;
var claimsIdentity = context.Principal.Identity as ClaimsIdentity;
if (claimsIdentity?.Claims == null || !claimsIdentity.Claims.Any())
{
context.Fail("This is not our issued token. It has no claims.");
return;
}
var serialNumberClaim = claimsIdentity.FindFirst(ClaimTypes.SerialNumber);
if (serialNumberClaim == null)
{
context.Fail("This is not our issued token. It has no serial.");
return;
}
var userIdString = claimsIdentity.FindFirst(ClaimTypes.UserData).Value;
if (!int.TryParse(userIdString, out int userId))
{
context.Fail("This is not our issued token. It has no user-id.");
return;
}
var user = await _usersService.FindUserAsync(userId).ConfigureAwait(false);
if (user == null || user.SerialNumber != serialNumberClaim.Value || !user.IsActive)
{
// user has changed his/her password/roles/stat/IsActive
context.Fail("This token is expired. Please login again.");
}
var accessToken = context.SecurityToken as JwtSecurityToken;
if (accessToken == null || string.IsNullOrWhiteSpace(accessToken.RawData) ||
!await _tokenStoreService.IsValidTokenAsync(accessToken.RawData, userId).ConfigureAwait(false))
{
context.Fail("This token is not in our database.");
return;
}
await _usersService.UpdateUserLastActivityDateAsync(userId).ConfigureAwait(false);
}
} public class UserToken
{
public int Id { get; set; }
public string AccessTokenHash { get; set; }
public DateTimeOffset AccessTokenExpiresDateTime { get; set; }
public string RefreshTokenIdHash { get; set; }
public DateTimeOffset RefreshTokenExpiresDateTime { get; set; }
public int UserId { get; set; } // one-to-one association
public virtual User User { get; set; }
} public interface ITokenStoreService
{
Task AddUserTokenAsync(UserToken userToken);
Task AddUserTokenAsync(
User user, string refreshToken, string accessToken,
DateTimeOffset refreshTokenExpiresDateTime, DateTimeOffset accessTokenExpiresDateTime);
Task<bool> IsValidTokenAsync(string accessToken, int userId);
Task DeleteExpiredTokensAsync();
Task<UserToken> FindTokenAsync(string refreshToken);
Task DeleteTokenAsync(string refreshToken);
Task InvalidateUserTokensAsync(int userId);
Task<(string accessToken, string refreshToken)> CreateJwtTokens(User user);
} private async Task<string> createAccessTokenAsync(User user, DateTime expires)
{
var claims = new List<Claim>
{
// Unique Id for all Jwt tokes
new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()),
// Issuer
new Claim(JwtRegisteredClaimNames.Iss, _configuration.Value.Issuer),
// Issued at
new Claim(JwtRegisteredClaimNames.Iat, DateTime.UtcNow.ToUnixEpochDate().ToString(), ClaimValueTypes.Integer64),
new Claim(ClaimTypes.NameIdentifier, user.Id.ToString()),
new Claim(ClaimTypes.Name, user.Username),
new Claim("DisplayName", user.DisplayName),
// to invalidate the cookie
new Claim(ClaimTypes.SerialNumber, user.SerialNumber),
// custom data
new Claim(ClaimTypes.UserData, user.Id.ToString())
};
// add roles
var roles = await _rolesService.FindUserRolesAsync(user.Id).ConfigureAwait(false);
foreach (var role in roles)
{
claims.Add(new Claim(ClaimTypes.Role, role.Name));
}
var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_configuration.Value.Key));
var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);
var token = new JwtSecurityToken(
issuer: _configuration.Value.Issuer,
audience: _configuration.Value.Audience,
claims: claims,
notBefore: DateTime.UtcNow,
expires: expires,
signingCredentials: creds);
return new JwtSecurityTokenHandler().WriteToken(token);
} <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="2.0.0" /> </ItemGroup>
public async Task<(string accessToken, string refreshToken)> CreateJwtTokens(User user)
{
var now = DateTimeOffset.UtcNow;
var accessTokenExpiresDateTime = now.AddMinutes(_configuration.Value.AccessTokenExpirationMinutes);
var refreshTokenExpiresDateTime = now.AddMinutes(_configuration.Value.RefreshTokenExpirationMinutes);
var accessToken = await createAccessTokenAsync(user, accessTokenExpiresDateTime.UtcDateTime).ConfigureAwait(false);
var refreshToken = Guid.NewGuid().ToString().Replace("-", "");
await AddUserTokenAsync(user, refreshToken, accessToken, refreshTokenExpiresDateTime, accessTokenExpiresDateTime).ConfigureAwait(false);
await _uow.SaveChangesAsync().ConfigureAwait(false);
return (accessToken, refreshToken);
} [AllowAnonymous]
[HttpPost("[action]")]
public async Task<IActionResult> Login([FromBody] User loginUser)
{
if (loginUser == null)
{
return BadRequest("user is not set.");
}
var user = await _usersService.FindUserAsync(loginUser.Username, loginUser.Password).ConfigureAwait(false);
if (user == null || !user.IsActive)
{
return Unauthorized();
}
var (accessToken, refreshToken) = await _tokenStoreService.CreateJwtTokens(user).ConfigureAwait(false);
return Ok(new { access_token = accessToken, refresh_token = refreshToken });
} [AllowAnonymous]
[HttpPost("[action]")]
public async Task<IActionResult> RefreshToken([FromBody]JToken jsonBody)
{
var refreshToken = jsonBody.Value<string>("refreshToken");
if (string.IsNullOrWhiteSpace(refreshToken))
{
return BadRequest("refreshToken is not set.");
}
var token = await _tokenStoreService.FindTokenAsync(refreshToken);
if (token == null)
{
return Unauthorized();
}
var (accessToken, newRefreshToken) = await _tokenStoreService.CreateJwtTokens(token.User).ConfigureAwait(false);
return Ok(new { access_token = accessToken, refresh_token = newRefreshToken });
} [AllowAnonymous]
[HttpGet("[action]"), HttpPost("[action]")]
public async Task<bool> Logout()
{
var claimsIdentity = this.User.Identity as ClaimsIdentity;
var userIdValue = claimsIdentity.FindFirst(ClaimTypes.UserData)?.Value;
// The Jwt implementation does not support "revoke OAuth token" (logout) by design.
// Delete the user's tokens from the database (revoke its bearer token)
if (!string.IsNullOrWhiteSpace(userIdValue) && int.TryParse(userIdValue, out int userId))
{
await _tokenStoreService.InvalidateUserTokensAsync(userId).ConfigureAwait(false);
}
await _tokenStoreService.DeleteExpiredTokensAsync().ConfigureAwait(false);
await _uow.SaveChangesAsync().ConfigureAwait(false);
return true;
} 
C:\Users\Vahid>dotnet --version 1.0.0-preview2-003121
.NET Core -> ASP.NET Core Web Application (.NET Core) -> Select `Empty` Template
{
"projects": [ "src", "test" ],
"sdk": {
"version": "1.0.0-preview2-003121"
}
} 