Html.ActionLink("Delete Dinner", MVC.Dinners.Delete(Model.DinnerID)
.AddRouteValue("foo", 17)
.AddRouteValue("bar", "abc"))
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <a href="#" id="favsite" data-type="text" data-pk="1" data-url="@Url.Action(MVC.Categories.EditCategory())" data-title="Enter your favorite site">dotnettips.info</a>
$(document).ready(function () {
$('#favsite').editable();
}); $(document).ready(function () {
$.fn.editable.defaults.mode = 'inline';
$('#favsite').editable();
}); <a href="#" id="favsite" >dotnettips.info</a>
$.fn.editable.defaults.mode = 'inline';
$(document).ready(function () {
$('#favsite').editable({
type: 'text',
pk: 1,
url: '@Url.Action(MVC.Categories.EditCategory())',
title: 'Enter your favorite site'
});
}); | AjaxOptions | همانطور
که متوجه شدید به طور خودکار اطلاعات ویرایش شده، به سمت آدرس داده شده،
به شیوه Post ارسال می‌گردند. در صورتیکه قصد دست بردن
در نوع درخواست را دارید، میتوانید از این ویژگی استفاده کنید: ajaxOptions: {
type: 'put',
dataType: 'json'
} |
| Anim | این
ویژگی که تنها در حالت inline پاسخ میدهد، می‌تواند زمان بسته شدن
x-editable را تغییر دهد که به طور پیش فرض با false مقداردهی شده است. جهت
تغییر زمان بسته شدن، کد زیر را وارد نمایید: anim:'false'
//or
anim: {
duration: 2000
} |
| autotext | در انتهای جدول آمده است. |
| defaultValue | در
صورتیکه عنصر مورد نظر محتوایی نداشته باشد و این خصوصیت را
مقداردهی کنید، موقع ویرایش، این عبارت تعیین شده نمایش می‌یابد. در مثال
بالا باید متن تگ a را حذف کرده تا نتیجه را ببینید: (البته فیلد value نباید مقداری داشته باشد) defaultValue: 'default val' //or defaultValue: undefined //or defaultValue: null |
| disabled | false کردن این ویژگی باعث غیرفعال شدن x-editable بر روی کنترل جاری میگردد. |
| display | خاصیت
display یا مقدار بولین false را دریافت میکند، یا نال، یا یک تابع
callback را میتوان به آن پاس داد. این خصوصت زمانی صدا زده می‌شود که
اطلاعات به سمت آدرس سرور رفته و با موفقیت بازگشت داده می‌شوند (در صورتی
که این ویژگی غیرفعال باشد، بلافاصه بعد از تایید کاربر، از اطلاعات وارد شده
صدا زده می‌شود) و سپس متن جدید عنصر تغییر می‌یابد. حال اگر این خاصیت نال
که مقدار پیش فرض آن است باشد، متن تغییر می‌یابد. ولی اگر false باشد، متن سابق
باقی خواهد ماند و در صورتیکه تابعی به آن پاس داده باشید، طبق تابع شما
عمل خواهد کرد. پارامترهایی که تابع شما می‌تواند داشته باشد به شرح زیر است: value : مقدار جدید response : پاسخ سرور ( در صورتی که ارسال از طریق Ajax صورت گرفته باشد) و در صورتیکه عنصر شما checlklist یا select باشد که حاوی منبعی از مقادیر هست، مقادیرشان در قالب یک آرایه با نام sourceData بازگشت خواهد خورد. برای دسترسی به آیتم‌های انتخابی هم از کد زیر استفاده می‌کنیم: $.fn.editableutils.itemsByValue(value, sourceData) |
| emptyclass | معرفی یک کلاس css برای موقعیکه عنصر خالی است. |
| emptytext | در صورتی خالی بودن عنصر، این متن را برای عنصر نمایش بده. |
| highlight | بعد از به روز رسانی متن عنصر، آن را با این رنگ highlight خواهد کرد و کد رنگی باید در مبنای هگز باشد. مقدار پیش فرض آن false است. |
| mode | دو
حالت نمایشی دارد که پیش فرض آن popup است و با باز کردن یک پنجره، مقدار
جدید را دریافت میکند. مورد بعدی inline است که به جای باز کردن پنجره،
متن عنصر را به حالت ویرایش تغییر میدهد. |
| name | نام فیلدی که مقدارش تغییر میکند. |
| onblur | زمانی که کاربر فوکوس را از ویرایشگر می‌گیرد، ویرایشگر چه پاسخی باید به آن بدهد، باز بماند؟ ignore ، بسته شود؟ cancel و یا مقدار داده شده را تایید کند؟submit |
| params | پارامترهای درخواست ایجکسی که کنترل در حالت پیش فرض ارسال میکند؛ شامل Pk که آن را با id
رکورد پر می‌کنیم. name نام فیلدی که تغییر یافته است و value که مقدار جدید
است. در صورتیکه دوست دارید اطلاعات اضافی‌تری نیز ارسال شوند،
میتوانید از این خاصیت استفاده کنید و پارامترها را در قالب Object به آن
پاس کنید. ولی اگر بخواهید در کل همه‌ی پارامترها را رونویسی کنید باید یک
تابع را به آن پاس کنید: params: function(params) {
//در این حالت پارامترهای پیش فرض ارسال نشده
و تنها پارامترهای معرفی شده در این تابع ارسال می‌شوند
params.a = 1;
return params;
} |
| pk | کلید
اصلی رکورد شما در دیتابیس یا هان id است. در صورتی که از کلیدهای ترکیبی
استفاده می‌کنید، نگران نباشید فکر آن را هم کرده اند.//کلید عدد
pk:1,
//کلید رشته ای
pk:'dp123'
//کلید ترکیبی
pk:{id: 1, lang: 'en'}
//معرفی یک تابع به آن و بازگشت |
| Placement | این ویژگی فقط به درد حالت Popup می‌خورد که پنجره را کجای عنصر نمایش دهد و شامل چهار مقدار left,right,top,bottom می‌شود. |
| saveonchange | زمانی
که مقدار جدید، برابر مقدار فعلی باشد و این خاصیت false باشد، هیچ تغییر‌ی رخ
نخواهد داد. ولی اگر برابر true باشد ،مقدار جدید اسال و جایگزین مقدار فعلی
خواهد شد. مقدار پیش فرض آن false است. |
| selector |
با استفاده از این خصوصیت در عنصر انتخابی به دنبال عناصری که در selector
تعیین شده میگردد و حالت ویرایش را روی آنها فعال میکند. در این حالت استفاده از خصوصیات emptytext و autotext در ابتدای امر ممکن نیست و بعد از اولین کلیک قابل استفاده هستند. نکته بعدی اینکه شما باید کلاس‌های زیر را دستی اضافه کنید. کلاس editable-click برای همه کنترل‌ها وکلاس editable-empty به کنترلهای بدون مقدار و برای مقداردهی کنترلهای بدون مقدار میتوان از خاصیت ''=data-value استفاده کرد. <div id="user">
<!-- empty -->
<a href="#" data-name="username"
data-type="text" data-value=""
title="Username">Empty</a>
<!-- non-empty -->
<a href="#" data-name="group"
data-type="select" data-source="/groups"
data-value="1" title="Group">Operator</a>
</div>
<script>
$('#user').editable({
selector: 'a',
url: '/post',
pk: 1
});
</script> |
| send | سه
مقدار auto,always و never را دریافت میکند. موقعی که شما آن را روی auto
تنظیم کنید؛ در صورتی مقادیر به سمت سرور ارسال می‌شوند که دو خاصیت url و
pk تعریف شده باشند. در غیر این صورت ویرایش فقط در حالت محلی و روی سیستم
کاربر رخ خواهد داد. |
| showbuttons | در
صورتیکه با false مقداردهی شود، تایید فرم به طور خودکار انجام می‌گیرد و
اگر با یکی از مقادیر left یا Bottom پر شود، دکمه‌ها را در آن قسمت نشان
میدهد. |
| success | اطلاعات به سمت سرور
رفته و با موفقیت با کد 200 بازگشت داده شده‌اند. در مستندات نوشته است، هر
کد وضعیتی غیر از 200 بازگشت داده شود، به سمت خاصیت error هدایت می‌شو.د ولی
آن طور که من با httpresponsemessage
تست کردم، چنین چیزی را مشاهده نکردم و مجددا success صدا زده شد. پس بهتر
هست داده‌ای را که به سمت کنترل برگشت می‌دهید، خودتان کنترل کنید. به خصوص
اگر انتقال اطلاعات صحیح باشد. ولی اگر در دیتابیس، تغییر با خطا روبرو گردد
بهتر است نتیجه‌ی آن ارسال شده و از تغییر مقدار فعلی ممانعت به عمل آورید. success: function(response, newValue) {
if(!response.success) return response.msg;
} |
| toggle | اگر قصد دارید که باز و بسته کردن ویرایشگر را بر عهده‌ی مثلا یک دکمه‌ی روی صفحه بگذارید، این خصوصیت به شما کمک میکند: $('#edit-button').click(function(e) {
e.stopPropagation();
$('#favsite').editable('toggle');
}); |
| type | نوع
ویرایشی را که قرار است انجام گیرد، مشخص میکند. text برای متن، date برای
تاریخ، textarea جهت متون طولانی‌تر نسبت به text و بسیاری از موارد دیگر |
| unsavedclass | این
کلاس موقعی اعمال میگردد که اطلاعاتی را ویرایش کرده‌اید، ولی اطلاعاتی
به سمت سرور ارسال نشده است. مثلا pk مقداردهی نشده یا send=never قرار
داید و یا اینکه به صورت محلی ذخیره می‌کنید و می‌خواهید در آخر همه‌ی اطلاعات را
ارسال کنید. این خاصیت به طور پیش فرض با کلاس editable-unsaved مقداردهی شده که میتوانید با نال کردن، از شرش خلاص شوید. |
| url | این
خاصیت با آدرس سمت سرور پر می‌شود. ولی میتوان به آن یک تابع هم پاس کرد که
این تابع جایگزین درخواست ایجکسی خودش خواهد شد و برای بازگشت دادن نتیجه‌ی این درخواست به سمت تابع‌های callback خودش میتوانید یک deferred object را برگشت دهید: url: function(params) {
var d = new $.Deferred;
if(params.value === 'abc') {
//returning error via deferred object
return d.reject('error message');
} else {
//async saving data in js model
someModel.asyncSaveMethod({
...,
success: function(){
d.resolve();
}
});
return d.promise();
}
} |
| validate | مقدار
پیش فرض آن نال است و میتوان به آن یک تابع را جهت اعتبارسنجی سمت کلاینت پاس
داد. به عنوان آرگومان، مقدار جدیدی را ارسال کرده و در آن به اعتبارسنجی
می‌پردازید. در صورتی که مقدار، نامعتبر باشد، میتوانید یک پیام خطا از نوع
رشته‌ای را برگردانید. در صورتی که از نسخه‌ی 1.5.1 به بعد استفاده می‌کنید، دریافت یک object با مقادیر زیر نیز ممکن شده است: newValue: مقدار جدید و جایگزین مقدار غیر معتبر. msg : پیام خطا. به کدهای زیر در سه حالت نگاه کنید: validate: function (value) {
if ($.trim(value) == '') {
//در تمامی نسخه‌های یک پیام متنی باز میگردد
return 'This field is required';
//1.5.1
//یک مقدار جدید برگشت میدهد که بلافاصله آن را
// تایید میکند و متن عنصر به روز می‌شود
return { newValue: 'validated' };
//متن جدید ار ارسال کرده و پیام هشدار را نشان میدهد
//ولی تایید نمی‌کند و منتظر تایید کاربر است
return { newValue: 'validated', |
| value | مقدار پیش فرضی که در ویرایشگر نشان میدهد و اگر مقداردهی نشود، از متن عنصر استفاده میکند. |
| autotext | سه مقدار دارد auto (پیش فرض)،always و never. موقعیکه عنصر شما متنی نداشته باشد و روی auto تنظیم شده باشد، مقدار value را به عنوان متن عنصر نمایش میدهد. always کاری ندارد که عنصر شما متن دارد یا خالی است؛ مقدار value به آن انتساب داده خواهد شد. never هیچگاه. |
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<title>newTitle ...</title>
<base href="/">
<meta name="description" content="Angular meta service">
<meta name="author" content="DNT">
<meta name="keywords" content="Angular, Meta Service">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@my_site">
<meta name="twitter:title" content="Front-end Web Development">
<meta name="twitter:description" content="Learn frontend web development...">
<meta name="twitter:image" content="https://site/images/image.png">
<meta name="author" content="Other Author">
</head> import { Component, OnInit } from "@angular/core";
import { Meta, Title } from "@angular/platform-browser";
@Component({
selector: "app-seo-tests",
templateUrl: "./seo-tests.component.html",
styleUrls: ["./seo-tests.component.css"]
})
export class SeoTestsComponent implements OnInit {
constructor(private metaService: Meta, private titleService: Title) {
} // addTag & addTags
this.metaService.addTag({ name: "description", content: "How to optimize your Angular App for search engine and other crawlers." });
this.metaService.addTag({ name: "author", content: "DNT" });
this.metaService.addTag({ name: "keywords", content: "Angular, Meta Service" });
// Or
this.metaService.addTags([
{ name: "description", content: "How to optimize your Angular App for search engine and other crawlers." },
{ name: "author", content: "DNT" },
{ name: "keywords", content: "Angular, Meta Service" }
], false); // --> forceCreation = false
this.metaService.addTag({ name: "twitter:card", content: "summary_large_image" });
this.metaService.addTag({ name: "twitter:site", content: "@my_site" });
this.metaService.addTag({ name: "twitter:title", content: "Front-end Web Development" });
this.metaService.addTag({ name: "twitter:description", content: "Learn frontend web development..." });
this.metaService.addTag({ name: "twitter:image", content: "https://site/images/image.png" });
// Or
this.metaService.addTags([
{ name: "twitter:card", content: "summary_large_image" },
{ name: "twitter:site", content: "@my_site" },
], false); // --> forceCreation = false // getTag & getTags
const viewport = this.metaService.getTag("name=viewport");
if (viewport) {
console.log(viewport.content); // width=device-width, initial-scale=1
}
const author = this.metaService.getTag("name=author");
if (author) {
console.log(author.content); // DNT
}
this.metaService.addTag({ name: "author", content: "DNT" });
this.metaService.addTag({ name: "author", content: "Other Author" }, true);
const authors = this.metaService.getTags("name=author");
console.log(authors[0]); // <meta name="author" content="DNT">
console.log(authors[1]); // <meta name="author" content="Other Author"> // updateTag
this.metaService.addTag({ name: "twitter:card", content: "summary_large_image" });
this.metaService.updateTag({ name: "twitter:card", content: "summary" }, `name='twitter:card'`);
this.metaService.updateTag({ name: "description", content: "Angular meta service" }); // removeTag & removeTagElement
this.metaService.removeTag("charset");
// Or
const chartsetTag = this.metaService.getTag("charset");
if (chartsetTag) {
this.metaService.removeTagElement(chartsetTag);
} // Setting the browser page Title in an Angular app
const currentTitle = this.titleService.getTitle();
console.log(currentTitle);
this.titleService.setTitle("newTitle ..."); const routes: Routes = [
{
path: "seo", component: SeoTestsComponent,
data: {
title: "Page Title",
metaTags: {
description: "Page Description or some content here",
keywords: "some, keywords, here, separated, by, a comma"
}
}
}
]; import { Injectable } from "@angular/core";
import { Title, Meta } from "@angular/platform-browser";
import { Router, NavigationEnd, ActivatedRouteSnapshot } from "@angular/router";
@Injectable()
export class SeoService {
constructor(private titleService: Title, private metaService: Meta, private router: Router) { }
enableSeo() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.distinctUntilChanged()
.subscribe(() => {
this.addMetaData(this.router.routerState.snapshot.root);
});
}
private addMetaData(root: ActivatedRouteSnapshot): void {
if (root.children && root.children.length) {
this.addMetaData(root.children[0]);
} else if (root.data) {
this.setTitle(root.data);
this.setMetaTags(root.data);
}
}
private setMetaTags(routeData: { [name: string]: any; }) {
const routeDataMetaTagsKey = "metaTags";
const metaTags = routeData[routeDataMetaTagsKey];
if (!metaTags) { return; }
for (const tag in metaTags) {
if (metaTags.hasOwnProperty(tag)) {
const newTag = { name: tag, content: metaTags[tag] };
console.log("new tag", newTag);
this.metaService.addTag(newTag);
}
}
}
private setTitle(routeData: { [name: string]: any; }) {
const routeDataTitleKey = "title";
const title = routeData[routeDataTitleKey];
if (title) {
console.log("new title", title);
this.titleService.setTitle(title);
}
}
} this.router.events
.filter(event => event instanceof NavigationEnd)
.distinctUntilChanged()
.subscribe(() => {
this.addMetaData(this.router.routerState.snapshot.root);
}); import { SeoService } from "./seo-service";
@NgModule({
providers: [
SeoService
]
})
export class CoreModule {} import { SeoService } from "./core/seo-service";
export class AppComponent {
constructor(private seoService: SeoService) {
this.seoService.enableSeo();
}
} // - Routes instead of RouteConfig
// - RouterModule instead of provideRoutes
import { Routes, RouterModule } from '@angular/router'; // - Updated Export export const routing = RouterModule.forRoot(routes);
DateTime newStart = new DateTime(previousEnd.Year, previousEnd.Month, previousEnd.Day + 1);
private static DateTime NextDay(DateTime now)
{
return new DateTime(now.Year, now.Month, now.Day + 1);
} public class MyPerson : Person
{
public int GetAge()
{
return 0;
}
} public class PersonWrapper
{
private readonly Person _person;
public PersonWrapper(Person person)
{
_person = person;
}
public int GetAge()
{
return 0;
}
} var person = new Person(); var wrapper = new PersonWrapper(person); wrapper.GetAge();
npm install --save-dev webpack-bundle-analyzer
"bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"
"bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/YourApplicationName/stats.json"
npm run bundle-report
node -v npm -v
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"project1": { npm outdated -g --depth=0
npm update -g
npm i -g @angular/cli
npm install --save-dev @angular/cli@latest
ng update @angular/cli ng update @angular/core ng update rxjs
DELETE .angular-cli.json CREATE angular.json (4273 bytes) UPDATE karma.conf.js (1008 bytes) UPDATE src/tsconfig.spec.json (322 bytes) UPDATE package.json (2076 bytes) UPDATE tslint.json (3217 bytes)
ng update @angular/material
npm install npm-check-updates -g
ncu -u npm install
ng update @angular/core ng update rxjs
ng config cli.warnings.typescriptMismatch false
{
"devDependencies": {
"typescript": "~2.7.2"
}
} {
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-template-driven-forms-lab": {
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
}, ng build --env staging
ng build --configuration staging
>ng build --watch
Date: 2018-05-05T09:10:50.158Z
Hash: a43eab94ff01539b8592
Time: 31733ms
chunk {main} main.js, main.js.map (main) 9.38 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 226 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.4 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.05 MB [initial] [rendered] >ng build --prod --watch
Date: 2018-05-05T09:17:01.803Z
Hash: f25fd6788a4969c52b70
Time: 73279ms
chunk {0} runtime.6afe30102d8fe7337431.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.6c08419970f9e4781b69.js (polyfills) 59.4 kB [initial] [rendered] ng add @angular/material
