window.location = row[1];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/themes/default/style.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/jstree.min.js"></script>
</head>
<body dir="rtl">
@RenderBody()
@RenderSection("scripts", required: false)
</body>
</html> right_to_left = $("body").css("direction") === "rtl"; using System.Collections.Generic;
namespace MvcJSTree.Models
{
public class JsTreeNode
{
public string id { set; get; } // نام این خواص باید با مستندات هماهنگ باشد
public string text { set; get; }
public string icon { set; get; }
public JsTreeNodeState state { set; get; }
public List<JsTreeNode> children { set; get; }
public JsTreeNodeLiAttributes li_attr { set; get; }
public JsTreeNodeAAttributes a_attr { set; get; }
public JsTreeNode()
{
state = new JsTreeNodeState();
children = new List<JsTreeNode>();
li_attr = new JsTreeNodeLiAttributes();
a_attr = new JsTreeNodeAAttributes();
}
}
public class JsTreeNodeAAttributes
{
// به هر تعداد و نام اختیاری میتوان خاصیت تعریف کرد
public string href { set; get; }
}
public class JsTreeNodeLiAttributes
{
// به هر تعداد و نام اختیاری میتوان خاصیت تعریف کرد
public string data { set; get; }
}
public class JsTreeNodeState
{
public bool opened { set; get; }
public bool disabled { set; get; }
public bool selected { set; get; }
public JsTreeNodeState()
{
opened = true;
}
}
} [HttpPost]
public ActionResult GetTreeJson()
{
var nodesList = new List<JsTreeNode>();
var rootNode = new JsTreeNode
{
id = "dir",
text = "Root 1",
icon = Url.Content("~/Content/images/tree_icon.png"),
a_attr = { href = "http://www.bing.com" }
};
nodesList.Add(rootNode);
nodesList.Add(new JsTreeNode
{
id = "test1",
text = "Root 2",
icon = Url.Content("~/Content/images/tree_icon.png"),
a_attr = { href = "http://www.bing.com" }
});
return Json(nodesList, JsonRequestBehavior.AllowGet);
} <div id="jstree"> </div>
$('#jstree').jstree({
"core": {
"multiple": false,
"check_callback": true,
'data': {
'url': '@getTreeJsonUrl',
"type": "POST",
"dataType": "json",
"contentType": "application/json; charset=utf8",
'data': function (node) {
return { 'id': node.id };
}
},
'themes': {
'variant': 'small',
'stripes': true
}
},
"types": {
"default": {
"icon": '@Url.Content("~/Content/images/bookmark_book_open.png")'
},
},
"plugins": ["contextmenu", "dnd", "state", "types", "wholerow", "sort", "unique"],
"contextmenu": {
"items": function (o, cb) {
var items = $.jstree.defaults.contextmenu.items();
items["create"].label = "ایجاد زیر شاخه";
items["rename"].label = "تغییر نام";
items["remove"].label = "حذف";
var cpp = items["ccp"];
cpp.label = "ویرایش";
var subMenu = cpp["submenu"];
subMenu["copy"].label = "کپی";
subMenu["paste"].label = "پیست";
subMenu["cut"].label = "برش";
return items;
}
}
}); @{
ViewBag.Title = "Demo";
var getTreeJsonUrl = Url.Action(actionName: "GetTreeJson", controllerName: "Home");
} $('#jstree').jstree({
// تمام تنظیمات مانند قبل
}).on('delete_node.jstree', function (e, data) {
})
.on('create_node.jstree', function (e, data) {
})
.on('rename_node.jstree', function (e, data) {
})
.on('move_node.jstree', function (e, data) {
})
.on('copy_node.jstree', function (e, data) {
})
.on('changed.jstree', function (e, data) {
})
.on('dblclick.jstree', function (e) {
})
.on('select_node.jstree', function (e, data) {
}); function postJsTreeOperation(operation, data, onDone, onFail) {
$.post('@doJsTreeOperationUrl',
{
'operation': operation,
'id': data.node.id,
'parentId': data.node.parent,
'position': data.position,
'text': data.node.text,
'originalId': data.original ? data.original.id : data.node.original.id,
'href': data.node.a_attr.href
})
.done(function (result) {
onDone(result);
})
.fail(function (result) {
alert('failed.....');
onFail(result);
});
} .on('create_node.jstree', function (e, data) {
postJsTreeOperation('CreateNode', data,
function (result) {
data.instance.set_id(data.node, result.id);
},
function (result) {
data.instance.refresh();
});
}) [HttpPost]
public ActionResult DoJsTreeOperation(JsTreeOperationData data)
{
switch (data.Operation)
{
case JsTreeOperation.CopyNode:
case JsTreeOperation.CreateNode:
//todo: save data
var rnd = new Random(); // آی دی رکورد پس از ثبت در بانک اطلاعاتی دریافت و بازگشت داده شود
return Json(new { id = rnd.Next() }, JsonRequestBehavior.AllowGet);
case JsTreeOperation.DeleteNode:
//todo: save data
return Json(new { result = "ok" }, JsonRequestBehavior.AllowGet);
case JsTreeOperation.MoveNode:
//todo: save data
return Json(new { result = "ok" }, JsonRequestBehavior.AllowGet);
case JsTreeOperation.RenameNode:
//todo: save data
return Json(new { result = "ok" }, JsonRequestBehavior.AllowGet);
default:
throw new InvalidOperationException(string.Format("{0} is not supported.", data.Operation));
}
} namespace MvcJSTree.Models
{
public enum JsTreeOperation
{
DeleteNode,
CreateNode,
RenameNode,
MoveNode,
CopyNode
}
public class JsTreeOperationData
{
public JsTreeOperation Operation { set; get; }
public string Id { set; get; }
public string ParentId { set; get; }
public string OriginalId { set; get; }
public string Text { set; get; }
public string Position { set; get; }
public string Href { set; get; }
}
} var selectedData;
// ...
.on('dblclick.jstree', function (e) {
var href = selectedData.node.a_attr.href;
alert('selected node: ' + selectedData.node.text + ', href:' + href);
// auto redirect
if (href) {
window.location = href;
}
// activate edit mode
//var inst = $.jstree.reference(selectedData.node);
//inst.edit(selectedData.node);
})
.on('select_node.jstree', function (e, data) {
//alert('selected node: ' + data.node.text);
selectedData = data;
}); <!DOCTYPE html>
<html>
<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>
</head>
<body>
@RenderBody()
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="@Url.Content("~/favicon.ico")" type="image/x-icon" />
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<!DOCTYPE html>
<html>
<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>
</head>
<body>
<div id="menu">
@if (IsSectionDefined("Menu"))
{
RenderSection("Menu", required: false);
}
else
{
<span>This is the default ...!</span>
}
</div>
<div id="body">
@RenderBody()
</div>
</body>
</html>
@{
ViewBag.Title = "Index";
//Layout = null;
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
Index</h2>
@section Menu{
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
}
@section JavaScript
{
<script type="text/javascript" src="@Url.Content("~/Scripts/SomeScript.js")" />;
<script type="text/javascript" src="@Url.Content("~/Scripts/AnotherScript.js")" />;
}
@RenderSection("JavaScript", required: false)
using System.Web.Mvc;
namespace MvcApplication11.Areas.Reporting
{
public class ReportingAreaRegistration : AreaRegistration
{
public override string AreaName
{
get
{
return "Reporting";
}
}
public override void RegisterArea(AreaRegistrationContext context)
{
context.MapRoute(
"Reporting_default",
"Reporting/{controller}/{action}/{id}",
new { action = "Index", id = UrlParameter.Optional }
);
}
}
}
Multiple types were found that match the controller named 'Home'. This can happen if the route that services this
request ('{controller}/{action}/{id}') does not specify namespaces to search for a controller that matches the request.
If this is the case, register this route by calling an overload of the 'MapRoute' method that takes a 'namespaces' parameter.
The request for 'Home' has found the following matching controllers:
MvcApplication11.Areas.Admin.Controllers.HomeController
MvcApplication11.Controllers.HomeController
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
, namespaces: new[] { "MvcApplication11.Controllers" }
);
}
@Html.ActionLink(linkText: "Home", actionName: "Index", controllerName: "Home")
@Html.ActionLink(linkText: "Home", actionName: "Index", controllerName: "Home",
routeValues: new { Area = "Admin" } , htmlAttributes: null)
public ActionResult Index()
{
return RedirectToAction("Index", "Home", new { Area = "Admin" });
}
<!-- Required for routing --> <script src="~/node_modules/angular2/bundles/router.dev.js"></script>
<!DOCTYPE html>
<html>
<head>
<base href="/"> //same as before ...
import { ROUTER_PROVIDERS } from 'angular2/router';
//same as before ...
@Component({
//same as before …
providers: [
ProductService,
HTTP_PROVIDERS,
ROUTER_PROVIDERS
]
})
//same as before ... <div class='panel panel-primary'>
<div class='panel-heading'>
{{pageTitle}}
</div>
</div> import { Component } from 'angular2/core';
@Component({
templateUrl: 'app/products/product-detail.component.html'
})
export class ProductDetailComponent {
pageTitle: string = 'Product Detail';
} { path: '/products', name: 'Products', component: ProductListComponent }, //same as before …
import { ROUTER_PROVIDERS, RouteConfig } from 'angular2/router';
//same as before …
@Component({
//same as before …
})
@RouteConfig([
{ path: '/welcome', name: 'Welcome', component: WelcomeComponent, useAsDefault: true },
{ path: '/products', name: 'Products', component: ProductListComponent }
])
export class AppComponent {
pageTitle: string = "DNT AngularJS 2.0 APP";
} import { Component } from 'angular2/core';
@Component({
templateUrl: 'app/home/welcome.component.html'
})
export class WelcomeComponent {
public pageTitle: string = "Welcome";
} <div class="panel panel-primary">
<div class="panel-heading">
{{pageTitle}}
</div>
<div class="panel-body">
<h3 class="text-center">Default page</h3>
</div>
</div> import { WelcomeComponent } from './home/welcome.component'; @Component({
//same as before …
template: `
<div>
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<a class='navbar-brand'>{{pageTitle}}</a>
<ul class='nav navbar-nav'>
<li><a [routerLink]="['Welcome']">Home</a></li>
<li><a [routerLink]="['Products']">Product List</a></li>
</ul>
</div>
</nav>
<div class='container'>
<router-outlet></router-outlet>
</div>
</div>
`,
//same as before …
}) import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router'; directives: [ROUTER_DIRECTIVES],
//same as before …
import { ProductDetailComponent } from './products/product-detail.component';
@Component({
//same as before …
})
@RouteConfig([
//same as before …
{ path: '/product/:id', name: 'ProductDetail', component: ProductDetailComponent }
])
//same as before … <td>{{ product.productName }}</td> <td>
<a [routerLink]="['ProductDetail', {id: product.productId}]">
{{product.productName}}
</a>
</td> import { Component, OnInit } from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';
//same as before …
@Component({
//same as before …
directives: [StarComponent, ROUTER_DIRECTIVES]
}) 
import { Component } from 'angular2/core';
import { RouteParams } from 'angular2/router';
@Component({
templateUrl: 'app/products/product-detail.component.html'
})
export class ProductDetailComponent {
pageTitle: string = 'Product Detail';
constructor(private _routeParams: RouteParams) {
let id = +this._routeParams.get('id');
this.pageTitle += `: ${id}`;
}
} 
<div class='panel panel-primary'>
<div class='panel-heading'>
{{pageTitle}}
</div>
<div class='panel-footer'>
<a class='btn btn-default' (click)='onBack()' style='width:80px'>
<i class='glyphicon glyphicon-chevron-left'></i> Back
</a>
</div>
</div> 
import { Component } from 'angular2/core';
import { RouteParams, Router } from 'angular2/router';
@Component({
templateUrl: 'app/products/product-detail.component.html'
})
export class ProductDetailComponent {
pageTitle: string = 'Product Detail';
constructor(private _routeParams: RouteParams, private _router: Router) {
let id = +this._routeParams.get('id');
this.pageTitle += `: ${id}`;
}
onBack(): void {
this._router.navigate(['Products']);
}
} public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
constraints: new { controller = "Home" } // for catch all to work, Home|About|SomeName
);
// Route override to work with Angularjs and HTML5 routing
routes.MapRoute(
name: "NotFound",
url: "{*catchall}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
} PdfShading shading = PdfShading.SimpleAxial(pdfWriter, x0, y0, x1, y1, BaseColor.YELLOW, BaseColor.RED);
PdfShadingPattern pattern = new PdfShadingPattern(shading);
ShadingColor color = new ShadingColor(pattern);
using System.Diagnostics;
using System.IO;
using iTextSharp.text;
using iTextSharp.text.pdf;
namespace iTextSharpGradientTest
{
public class GradientCellEvent : IPdfPCellEvent
{
public void CellLayout(PdfPCell cell, Rectangle position, PdfContentByte[] canvases)
{
var cb = canvases[PdfPTable.BACKGROUNDCANVAS];
cb.SaveState();
var shading = PdfShading.SimpleAxial(
cb.PdfWriter,
position.Left, position.Top, position.Left, position.Bottom,
BaseColor.YELLOW, BaseColor.ORANGE);
var shadingPattern = new PdfShadingPattern(shading);
cb.SetShadingFill(shadingPattern);
cb.Rectangle(position.Left, position.Bottom, position.Width, position.Height);
cb.Fill();
cb.RestoreState();
}
}
class Program
{
static void Main(string[] args)
{
using (var pdfDoc = new Document(PageSize.A4))
{
var pdfWriter = PdfWriter.GetInstance(pdfDoc, new FileStream("Test.pdf", FileMode.Create));
pdfDoc.Open();
var table1 = new PdfPTable(1);
table1.HeaderRows = 2;
table1.FooterRows = 1;
//header row
var headerCell = new PdfPCell(new Phrase("header"))
{
HorizontalAlignment = Element.ALIGN_CENTER,
Border = 0
};
headerCell.CellEvent = new GradientCellEvent();
table1.AddCell(headerCell);
//footer row
var footerCell = new PdfPCell(new Phrase("footer"))
{
HorizontalAlignment = Element.ALIGN_CENTER,
Border = 0
};
footerCell.CellEvent = new GradientCellEvent();
table1.AddCell(footerCell);
//adding some rows
for (int i = 0; i < 70; i++)
{
var rowCell = new PdfPCell(new Phrase("Row " + i)) { BorderColor = BaseColor.LIGHT_GRAY };
table1.AddCell(rowCell);
}
pdfDoc.Add(table1);
}
//open the final file with adobe reader for instance.
Process.Start("Test.pdf");
}
}
}
let dialogRef = dialog.open(UserProfileComponent, { height: '400px’, width: '600px’ }); dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
});
dialogRef.close('value'); @Component({/* ... */})
export class YourDialog {
constructor(public dialogRef: MatDialogRef<YourDialog>) { }
closeDialog() {
this.dialogRef.close('Value….!’);
}
} <h2 mat-dialog-title>Delete all</h2>
<mat-dialog-content>Are you sure?</mat-dialog-content>
<mat-dialog-actions>
<button mat-button mat-dialog-close>No</button>
<!-- Can optionally provide a result for the closing dialog. -->
<button mat-button [mat-dialog-close]="true">Yes</button>
</mat-dialog-actions> <mat-toolbar color="primary">
<button mat-button fxHide fxHide.xs="false" (click)="toggleSidenav.emit()">
<mat-icon>menu</mat-icon>
</button>
<span>Contact Manager</span>
<span fxFlex="1 1 auto"></span>
<button mat-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>New Contact</button>
</mat-menu>
</mat-toolbar> 
<button mat-menu-item (click)="openAddContactDialog()">New Contact</button>
ng g c contact-manager/components/new-contact-dialog --no-spec
import { NewContactDialogComponent } from "./components/new-contact-dialog/new-contact-dialog.component";
@NgModule({
declarations: [
NewContactDialogComponent],
entryComponents: [
NewContactDialogComponent
]
})
export class ContactManagerModule { } import { Component, EventEmitter, OnInit, Output } from "@angular/core";
import { MatDialog } from "@angular/material";
import { NewContactDialogComponent } from "../new-contact-dialog/new-contact-dialog.component";
@Component({
selector: "app-toolbar",
templateUrl: "./toolbar.component.html",
styleUrls: ["./toolbar.component.css"]
})
export class ToolbarComponent implements OnInit {
@Output() toggleSidenav = new EventEmitter<void>();
constructor(private dialog: MatDialog) { }
ngOnInit() { }
openAddContactDialog(): void {
const dialogRef = this.dialog.open(NewContactDialogComponent, { width: "450px" });
dialogRef.afterClosed().subscribe(result => {
console.log("The dialog was closed", result);
});
}
} 
<h2 mat-dialog-title>Add new contact</h2>
<mat-dialog-content>
<div fxLayout="column">
</div>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button color="primary" (click)="save()">
<mat-icon>save</mat-icon> Save
</button>
<button mat-button color="primary" (click)="dismiss()">
<mat-icon>cancel</mat-icon> Cancel
</button>
</mat-dialog-actions> import { Component, OnInit } from "@angular/core";
import { MatDialogRef } from "@angular/material";
@Component()
export class NewContactDialogComponent implements OnInit {
constructor(
private dialogRef: MatDialogRef<NewContactDialogComponent>
) { }
ngOnInit() {
}
save() {
}
dismiss() {
this.dialogRef.close(null);
}
} 
import { User } from "../../models/user";
@Component()
export class NewContactDialogComponent implements OnInit {
avatars = ["user1", "user2", "user3", "user4", "user5", "user6", "user7", "user8"];
user: User = { id: 0, birthDate: new Date(), name: "", avatar: "", bio: "", userNotes: null }; 
<mat-form-field>
<mat-select placeholder="Avatar" [(ngModel)]="user.avatar">
<mat-select-trigger>
<mat-icon svgIcon="{{user.avatar}}"></mat-icon> {{ user.avatar }}
</mat-select-trigger>
<mat-option *ngFor="let avatar of avatars" [value]="avatar">
<mat-icon svgIcon="{{avatar}}"></mat-icon> {{ avatar }}
</mat-option>
</mat-select>
</mat-form-field> 
<mat-form-field>
<input matInput placeholder="Name" #name="ngModel" [(ngModel)]="user.name" required>
<mat-error *ngIf="name.invalid && name.touched">You must enter a name</mat-error>
</mat-form-field> 
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Born" [(ngModel)]="user.birthDate">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field> 
<mat-form-field>
<textarea matInput placeholder="Bio" [(ngModel)]="user.bio"></textarea>
</mat-form-field> 
<mat-dialog-content> <div fxLayout="column"> </div> </mat-dialog-content>
namespace MaterialAspNetCoreBackend.WebApp.Controllers
{
[Route("api/[controller]")]
public class UsersController : Controller
{
private readonly IUsersService _usersService;
public UsersController(IUsersService usersService)
{
_usersService = usersService ?? throw new ArgumentNullException(nameof(usersService));
}
[HttpPost]
public async Task<IActionResult> Post([FromBody] User user)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
await _usersService.AddUserAsync(user);
return Created("", user);
}
}
} @Injectable({
providedIn: "root"
})
export class UserService {
private usersSource = new BehaviorSubject<User>(null);
usersSourceChanges$ = this.usersSource.asObservable();
constructor(private http: HttpClient) { }
addUser(user: User): Observable<User> {
const headers = new HttpHeaders({ "Content-Type": "application/json" });
return this.http
.post<User>("/api/users", user, { headers: headers }).pipe(
map(response => {
const addedUser = response || {} as User;
this.notifyUsersSourceHasChanged(addedUser);
return addedUser;
}),
catchError((error: HttpErrorResponse) => throwError(error))
);
}
notifyUsersSourceHasChanged(user: User) {
this.usersSource.next(user);
}
} return Created("", user); import { UserService } from "../../services/user.service";
@Component()
export class NewContactDialogComponent {
user: User = { id: 0, birthDate: new Date(), name: "", avatar: "", bio: "", userNotes: null };
constructor(
private dialogRef: MatDialogRef<NewContactDialogComponent>,
private userService: UserService
) { }
save() {
this.userService.addUser(this.user).subscribe(data => {
console.log("Saved user", data);
this.dialogRef.close(data);
});
}
} import { UserService } from "../../services/user.service";
@Component()
export class SidenavComponent implements OnInit, OnDestroy {
users: User[] = [];
subscription: Subscription | null = null;
constructor(
private userService: UserService) { }
ngOnInit() {
this.subscription = this.userService.usersSourceChanges$.subscribe(user => {
if (user) {
this.users.push(user);
}
});
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
} save() {
this.userService.addUser(this.user).subscribe(data => {
console.log("Saved user", data);
this.dialogRef.close(data);
}); openAddContactDialog(): void {
const dialogRef = this.dialog.open(NewContactDialogComponent, { width: "450px" });
dialogRef.afterClosed().subscribe(result => {
console.log("The dialog was closed", result);
});
} 
@Component()
export class ToolbarComponent {
@Output() toggleSidenav = new EventEmitter<void>();
constructor(private dialog: MatDialog, private snackBar: MatSnackBar, private router: Router) { }
openAddContactDialog(): void {
const dialogRef = this.dialog.open(NewContactDialogComponent, { width: "450px" });
dialogRef.afterClosed().subscribe((result: User) => {
console.log("The dialog was closed", result);
if (result) {
this.openSnackBar(`${result.name} contact has been added.`, "Navigate").onAction().subscribe(() => {
this.router.navigate(["/contactmanager", result.id]);
});
}
});
}
openSnackBar(message: string, action: string): MatSnackBarRef<SimpleSnackBar> {
return this.snackBar.open(message, action, {
duration: 5000,
});
}
} 
همانطور که می‌دانیم پلاگین‌های جی‌کوئری، نقش مهمی را در محیط وب ایفا می‌کنند. در اینجا با یکی از این پلاگین‌ها و چگونگی استفاده از آن آشنا میشویم.
برای آشنایی با نوشتن Plugin در jQuery، میتوان مباحث پیشین این سایت را دنبال کرد.( JQuery Plugins #1 و JQuery Plugins #2)
این Plugin برای ایجاد یک TextBox برای ورود زمان توسط کاربر استفاده میشود. با توجه به اینکه قبلاً چند Plugin برای این کار نوشته شده است ولی هر کدام از آنها معایب و مزایای خاص خود را داشتند، برای نمونه میتوانید به این سایت مراجعه کنید.
ویژگی‌های این Plugin عبارتند از:
1- تنظیم زمان پیش فرض
2- کنترل حداقل و حداکثر زمان وارد شده
3- تغییر ساعت و دقیقه بوسیله کلیدهای جهتی بالا و پایین
4- تغییر انتخاب ساعت و دقیقه بوسیله کلیدهای جهتی چپ و راست
5- تغییر ساعت و دقیقه بوسیله فشردن اعداد روی صفحه کلید
چگونگی استفاده از این Plugin
ابتدا کتابخانه jQuery و این پلاگین را به
صفحه خود اضافه نمایید و سپس کدهای زیر را برای استفاده از این Plugin اضافه نمایید:
jQuery(document).ready(function () {
$("#TextBox1").TickTack();
$("#TextBox2").TickTack({
initialTime: '8:44',
minHour: 8,
minMinute: 0,
maxHour: 22,
maxMinute: 40
});
});initialTime : زمان اولیه جهت نمایش به کاربر (حتما بایستی ساعت و دقیقه بوسیله ‘:’ از یکدیگر جداشوند)
minHour : حداقل ساعت ورودی
minMinute : حداقل دقیقه ورودی
maxHour : حداکثر ساعت ورودی
maxMinute : حداکثر دقیقه ورودی
پس از انتخاب TextBox، قسمت ساعت به صورت پیش فرض انتخاب میشود و کاربر باید ساعت مد نظر را وارد کند؛ در اینجا، عدد اول ساعت، مد نظر است.
برای نمونه در اینجا عدد 2 توسط کاربر وارد میشود؛ پس از ورود عدد و با توجه به تنظیمات انجام شده، ساعت به صورت اتوماتیک به حداکثر مقداری که میتواند بپذیرد تغییر می‌کند (در این مثال چون کاربر عدد 2 را وارد کرده و در تنظیمات انجام شده حداکثر ساعت دریافتی 22 و حداکثر دقیقه 40 تعریف شده است، ساعت به صورت پیشفرض به 22:40 تغییر می‌یابد)
و پس از وارد کردن عدد دوم ساعت توسط کاربر مکان نما به قسمت دقیقه منتقل میشود که در این جا عدد اول دقیقه مد نظر است
وارد کردن عدد 3 برای دقیقه
وارد کردن عدد دوم دقیقه
پس از وارد کردن کامل دقیقه مکان نما دوباره به قسمت ساعت باز می‌گردد.
در ادامه دوستان علاقمند لطفا جهت بهبود کیفیت کار، باگ و یا مشکلات کدنویسی را اطلاع دهند.
با تشکر
192.168.114.201, -, 03/20/01, 7:55:20, W3SVC2, SERVER, 172.21.13.45, 4502, 163, 3223, 200, 0, GET, /DeptLogo.gif, -,
| نام فیلد | نوع حالت مقداردهی | توضیح اتفاقات افتاده | |
| Client IP address | 192.168.114.201 | آی پی کلاینت | |
| User name | - | کاربر ناشناس است | |
| Date | 03/20/01 | تاریخ فعالیت | |
| Time | 7:55:20 | ساعت فعالیت | |
| Service and instance | W3SVC2 | لاگی که مربوط به سایت خاصی میشود به صورت #W3SVC نمایش داده میشود که علامت # شماره سایت می‌باشد که در اینجا این لاگ مربوط به سایت شماره 2 است | |
| Server name | SERVER | نام سرور | |
| Server IP | 172.21.13.45 | آی پی سرور | |
| Time taken | 4502 | چقدر انجام عملیات این درخواست به طول انجامیده است که بر حسب میلی ثانیه است. | |
| Client bytes sent | 163 | تعداد بایت هایی که از طرف کلاینت به سرور ارسال شده است | |
| Server bytes sent | 3223 | تعداد بایت هایی که از طرف سرور به سمت کلاینت ارسال شده است | |
| Service status code | 200 | درخواست کاملا موفقیت آمیز بوده است | |
| Windows status code | 0 | درخواست کاملا موفقیت آمیز بوده است | |
| Request type | GET | نوع درخواست کاربر | |
| Target of operation | /DeptLogo.gif | کاربر قصد دانلود یک فایل تصویری GIF داشته است که نامش Deptlogo است | |
| Parameters | - | پارامتری ارسال نشده است |
172.21.13.45 - Microsoft\JohnDoe [08/Apr/2001:17:39:04 -0800] "GET /scripts/iisadmin/ism.dll?http/serv HTTP/1.0" 200 3401
| نام فیلد | مقدار ثبت شده | توضیح اتفاق افتاده |
| Remote host address | 172.21.13.45 | آی پی کلاینت |
| Remote log name | - | نامی وجود ندارد |
| User name | Microsoft\JohnDoe | نام کاربری |
| Date, time, and GMT offset | [08/Apr/2001:17:39:04 -0800] | تاریخ و ساعت فعالیت به صورت محلی که 8 ساعت از مبدا گرینویچ بیشتر است |
| Request and protocol version | GET /scripts/iisadmin/ism.dll?http/serv HTTP/1.0 | کاربر با متد GET و Http نسخه‌ی یک، درخواست فایل ism.dll را کرده است. |
| Service status code | 200 | عملیات کاملا موفقیت آمیز بود. |
| Bytes sent | 3401 | تعداد بایت‌های ارسال شده به سمت کاربر |
امنیت در برابر کاربران مهاجم مانند همان فرمت قبلی صورت گرفته است.
فرمت W3C: توسط W3C توسط کنسرسیوم جهانی وب ارائه شده است و یک فرمت customizable ASCII text-based است. به این معنی که میتوان فیلدهایی که در گزارش نهایی می‌آید را خودتان مشخص کنید، که برای اینکار در کنار لیست، دکمه‌ی Select وجود دارد که میتوانید هر کدام از فیلدهایی را که خواستید، انتخاب کنید تا به ترتیب در خط لاگ ظاهر شوند. تاریخ ثبت به صورت UTC است.
| نام فیلد | توضیح | به طور پیش فرض انتخاب شده است |
| Date | تاریخ رخ دادن فعالیت | بله |
| Time | ساعت زخ دادن فعالیت بر اساس UTC | بله |
| Client IP Address | آی پی کلاینت | بله |
| User Name | نام کاربری که هویت آن تایید شده و در صورتی که هویت تایید شده نباشد و کاربر ناشناس باشد، جای آن - قرار می‌گیرد | بله |
| Service Name and Instance Number | نام و شماره سایتی که درخواست در آن صورت گرفته است | خیر |
| Server Name | نام سروری که لاگ روی آن ثبت میشود | خیر |
| Server IP Address | آی پی سرور که لاگ روی آن ثبت میشود | بله |
| Server Port | شمره پورتی که سرویس مورد نظر روی آن پورت اعمال میشود. | بله |
| Method | متد درخواست مثل GET | بله |
| URI Stem | هدف درخواست یا Target مثل index.htm | بله |
| URI Query | کوئری ارسال شده برای صفحات داینامیک | بله |
| HTTP Status | کد وضیعینی HTTP status | بله |
| Win32 Status | کد وضعیتی ویندوز | خیر |
| Bytes Sent | تعداد بایت‌های ارسال شده به سمت کلاینت | خیر |
| Bytes Received | تعداد بایت‌های دریافت شده از سمت کلاینت | خیر |
| Time Taken | زمان به طول انجامیدن درخواست بر حسب میلی ثانیه | خیر |
| Protocol Version | درخواست با چه نسخه‌ای از پروتکل http یا ftp ارسال شده است | خیر |
| Host | اگر در هدر درخواست ارسالی این گزینه بوده باشد، نوشته خواهد شد. | خیر |
| User Agent | اطلاعات را از هدر درخواست می‌گیرد. | بله |
| Cookie | اگر کوکی رد و بدل شده باشد، محتویات کوکی ارسالی یا دریافت شده | خیر |
| Referrer | کاربر از چه سایتی به سمت سایت ما آمده است. | خیر |
| Protocol Substatus | در صورت رخ دادن خطا در IIS ، کد خطا بازگردانده میشود. در IIS به منظور امنیت بیشتر و کاهش حملات، محتوای خطاهای رخ داده در IIS به صورت متنی نمایش داده نمی‌شوند و شامل کد خطایی به اسم Substatus Code هستند تا مدیران شبکه با ردیابی لاگها پی به دلیل خطا و درخواست‌های ناموفق ببرند. برای مثال Error 404.2 به این معنی است که فایل درخواستی به دلیل قوانین محدود کنده، قفل شده و قابل ارائه نیست. ولی هکر تنها با خطای 404 یعنی وجود نداشتن فایل روبرو میشود. در حالت substatus code، کد شماره 2 را هم خواهید داشت که در لاگ ثبت میشود. هر شخصی که در سرور توانایی دسترسی به لاگها را داشته باشد، میتواند کد دوم خطا را نیز مشاهده کند. برای مثال مدیر سرور متوجه میشود که یکی از فایل‌های مورد نظر به کاربران، خطای 404 نمایش میدهد و با بررسی لاگها متوجه میشود که کد خطا 404.9 هست. از آنجا که ما همه‌ی کدها را حفظ نیستیم به این صفحه رجوع می‌کنیم و متوجه میشویم تعداد کاربرانی که برای این فایل، اتصال connection ایجاد کرده‌اند بیش از مقدار مجاز است و مدیر میتواند این وضع را کنترل کند. برای مثال تعداد اتصالات مجاز را نامحدود unlimited تعیین کند. | بله |
using System.Data.Entity.Core.Metadata.Edm;
public class SoftDeleteAttribute : Attribute
{
public string ColumnName { get; set; }
public SoftDeleteAttribute(string column)
{
ColumnName = column;
}
public static string GetSoftDeleteColumnName(EdmType type)
{
MetadataProperty column = type.MetadataProperties.Where(x => x.Name.EndsWith("customannotation:SoftDeleteColumnName")).SingleOrDefault();
return column == null ? null : (string)column.Value;
}
} [SoftDelete("IsDeleted")]
public class TblUser
{
[Key]
public int TblUserID { get; set; }
[MaxLength(30)]
public string Name { get; set; }
public bool IsDeleted { get; set; }
} protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
var Conv = new AttributeToTableAnnotationConvention<SoftDeleteAttribute, string>(
"SoftDeleteColumnName",
(type, attribute) => attribute.Single().ColumnName);
modelBuilder.Conventions.Add(Conv);
} 
در پنجره باز شده به قسمت سوم یعنی <StorageModels> مراجعه نمایید و بایستی گزینه زیر را مشاهده نمایید .
<EntityType Name="TblUser" customannotation:SoftDeleteColumnName="IsDeleted">
تا اینجای کار ما توانستیم یک Annotation جدید را به Ef اضافه نماییم .
در مرحله بعد بایستی به Ef دستور دهیم که در تولید Query بر روی این Entity، این مورد را نیز لحاظ کند.
برای این کار کلاسی را ایجاد مینماییم که از اینترفیس IDbCommandTreeInterceptor ارث بری می‌نماید. مانند کد زیر :
public class SoftDeleteInterceptor : IDbCommandTreeInterceptor
{
public void TreeCreated(DbCommandTreeInterceptionContext interceptionContext)
{
if (interceptionContext.OriginalResult.DataSpace == System.Data.Entity.Core.Metadata.Edm.DataSpace.SSpace)
{
var QueryCommand = interceptionContext.Result as DbQueryCommandTree;
if (QueryCommand != null)
{
var newQuery = QueryCommand.Query.Accept(new SoftDeleteQueryVisitor());
interceptionContext.Result = new DbQueryCommandTree(QueryCommand.MetadataWorkspace, QueryCommand.DataSpace, newQuery);
}
}
}
} در ابتدا تشخیص داده میشود که نوع خروجی Query آیا از نوع Storage Model است . ( برای توضیحات بیشتر ) سپس پرس و جوی تولید شده را با استفاده از الگوی visitor تغییر داده و Query جدید را تولید نموده و در انتها Query جدیدی را به جای Query قبلی جایگزین مینماییم.
در اینجا ما نیاز به داشتن کلاس SoftDeleteQueryVisitor برای تغییر دادن Query و اضافه نمودن IsDeleted <>1 به Query می‌باشیم.
یک کلاس دیگری با نام SoftDeleteQueryVisitor به شکل زیر به برنامه اضافه مینماییم.
public class SoftDeleteQueryVisitor : DefaultExpressionVisitor
{
public override DbExpression Visit(DbScanExpression expression)
{
var column = SoftDeleteAttribute.GetSoftDeleteColumnName(expression.Target.ElementType);
if (column!=null)
{
var Binding = DbExpressionBuilder.Bind(expression);
return DbExpressionBuilder.Filter(Binding, DbExpressionBuilder.NotEqual(DbExpressionBuilder.Property(DbExpressionBuilder.Variable(Binding.VariableType, Binding.VariableName), column), DbExpression.FromBoolean(true)));
}
else
{
return base.Visit(expression);
}
}
} در نهایت برای اینکه EF تشخیص دهد که یک‌چنین Interceptor ایی وجود دارد، بایستی در کلاس DbContextConfig، کلاس SoftDeleteInterceptor را اضافه نماییم؛ همانند کد زیر:
public class DbContextConfig : DbConfiguration
{
public DbContextConfig()
{
AddInterceptor(new SoftDeleteInterceptor());
}
} تا اینجا در تمام Queryهای تولید شده بر روی Entity که با خاصیت SoftDelete مزین شده است، مقدار IsDeleted <> 1 را به صورت اتوماتیک اعمال می‌نماید. حتی به صورت هوشمند چنانچه این موجودیت در یک Join استفاده شده باشد این شرط را قبل از Join به Query تولید شده اضافه می‌نماید.
در مقاله بعدی در مورد تغییر کد Remove به کد Update توضیح داده خواهد شد.
برای مطالعه بیشتر
Entity Framework: Building Applications with Entity Framework 6