Bootstrap 5 has officially landed! After three alphas, three betas, and several months of hard work, we’re shipping the first stable release of our new major version. It’s been a wild ride made possible by our maintainers and the amazing community that uses and contributes to Bootstrap. Thanks to all who have helped us get here!
jQuery Sortable is a flexible, opinionated sorting plugin. It enables items in a list (or table etc.) to be sorted horizontally and vertically using the mouse. Supports nested lists and pure drag/drop containers. Demo
jQuery Sortable does not depend on jQuery UI and works well with Twitter's Bootstrap (You can even sort the Bootstrap navigation).
با انتخاب ok باز نیز با قالب جدیدی به شکل زیر برای انتخاب پروژه مواجه می‌شوید.
اینجا همه چیز تکراری است به غیر از گزینه Configure Authentication.
همه‌ی گزینه‌ها تکراری اند به غیر از گزینه Individual User Accounts. البته این همان FormsAuthentication قبلی است. نکته قابل توجه، یکپارچی آن با سرویس‌های اجتماعی و شبکه‌های سرویس دهنده است. البته در نسخه‌ی قبلی نیز این سیستم وجود داشت، ولی این دفعه با ASP.NET Identity یک پارچه است که در ادامه بیشتر آن را خواهید دید.
البته گویا حالت دیگری به نام Organizational Accounts نیز وجود دارد که گویا برای فعال سازی،باید یک بسته‌ی به روز رسانی دریافت می‌کردم، که من نکردم.(اینترنت حجمی و شبانه دانلود کردن...)
این حالت که در شکل زیر مشخص است، امکان یکپارچگی احراز هویت با Active Directory در windows server و azure را دارد.
با توجه به پوشه‌ی مدل این را متوجه می‌شویم که مایکروسافت هم به لزوم ViewModel اعتقاد پیدا کرده است.
با اجرا کردن پروژه bootstrap و responsive بودن آن، خودنمایی می‌کنند.
<tbody>
<tr *ngFor="let item of queryResult.items; let i = index">
<td class="text-center">{{ itemsPerPage * (currentPage - 1) + i + 1 }}</td>
<td class="text-center">{{ item.productId }}</td>
<td class="text-center">{{ item.productName }}</td>
<td class="text-center">{{ item.price | number:'.0' }}</td>
<td class="text-center">
<input id="item-{{ item.productId }}" type="checkbox" [checked]="item.isAvailable"
disabled="disabled" />
</td>
</tr>
</tbody>
</table> <tbody>
<tr *ngFor="let item of queryResult.items; let i = index">
<ng-container [ngTemplateOutlet]="loadTemplate(item)"
[ngOutletContext]="{ $implicit: item, idx: i }"></ng-container>
</tr>
</tbody> 
<!--The Html Template for Read-Only Rows-->
<ng-template #readOnlyTemplate let-item let-i="idx">
<td class="text-center">{{ itemsPerPage * (currentPage - 1) + i + 1 }}</td>
<td class="text-center">{{ item.productId }}</td>
<td class="text-center">{{ item.productName }}</td>
<td class="text-center">{{ item.price | number:'.0' }}</td>
<td class="text-center">
<input id="item-{{ item.productId }}" type="checkbox" [checked]="item.isAvailable"
disabled="disabled" />
</td>
<td>
<input type="button" value="Edit" class="btn btn-default btn-xs" (click)="editItem(item)"
/>
</td>
<td>
<input type="button" value="Delete" (click)="deleteItem(item)" class="btn btn-danger btn-xs"
/>
</td>
</ng-template> @ViewChild("readOnlyTemplate") readOnlyTemplate: TemplateRef<any>; 
<!--The Html Template for Editable Rows-->
<ng-template #editTemplate let-item let-i="idx">
<td class="text-center">{{ itemsPerPage * (currentPage - 1) + i + 1 }}</td>
<td class="text-center">{{ item.productId }}</td>
<td class="text-center">
<input type="text" [(ngModel)]="selectedItem.productName" class="form-control" />
</td>
<td class="text-center">
<input type="text" [(ngModel)]="selectedItem.price" class="form-control" />
</td>
<td class="text-center">
<input id="item-{{ item.productId }}" type="checkbox" [checked]="item.isAvailable"
[(ngModel)]="selectedItem.isAvailable" />
</td>
<td>
<input type="button" value="Save" (click)="saveItem()" class="btn btn-success btn-xs"
/>
</td>
<td>
<input type="button" value="Cancel" (click)="cancel()" class="btn btn-warning btn-xs"
/>
</td>
</ng-template> @ViewChild("editTemplate") editTemplate: TemplateRef<any>; @ViewChild("readOnlyTemplate") readOnlyTemplate: TemplateRef<any>;
@ViewChild("editTemplate") editTemplate: TemplateRef<any>;
selectedItem: AppProduct;
isNewRecord: boolean; editItem(item: AppProduct) {
this.selectedItem = item;
} loadTemplate(item: AppProduct) {
if (this.selectedItem && this.selectedItem.productId === item.productId) {
return this.editTemplate;
} else {
return this.readOnlyTemplate;
}
} <div class="panel"> <input type="button" value="Add new product" class="btn btn-primary" (click)="addItem()" /> </div>
addItem() {
this.selectedItem = new AppProduct(0, "", 0, false);
this.isNewRecord = true;
this.queryResult.items.push(this.selectedItem);
this.queryResult.totalItems++;
} cancel() {
this.selectedItem = null;
} deleteItem(item: AppProduct) {
this.productsService
.deleteAppProduct(item.productId)
.subscribe((resp: Response) => {
this.getPagedProductsList();
});
} saveItem() {
if (this.isNewRecord) {
this.productsService
.addAppProduct(this.selectedItem)
.subscribe((resp: AppProduct) => {
this.selectedItem.productId = resp.productId;
this.isNewRecord = false;
this.selectedItem = null;
});
} else {
this.productsService
.updateAppProduct(this.selectedItem.productId, this.selectedItem)
.subscribe((resp: AppProduct) => {
this.selectedItem = null;
});
}
} در مطلب آشنایی با Directiveها در AngularJS با نحوه‌ی ایجاد Directive آشنا شدیم. هدف از این مطلب، آشنایی بیشتر با Directive در AngularJS است؛ یکی از بهترین فریم ورک‌های جاوااسکریپتی، با قابلیت ایجاد کتابخانه‌هایی از کامپوننت‌ها که می‌توانند به HTML اضافه شوند .
کتابخانه‌های جاوااسکریپتی زیادی وجود دارند. به عنوان مثال Bootstrap یکی از محبوب‌ترین "front-end
framework" ها است که امکان تغییر در ظاهر المنت‌ها را فراهم می‌کند و شامل
تعدادی کامپوننت جاوااسکریپتی نیز می‌باشد. مشکل کار، در هنگام استفاده از کامپوننت ها است. شخصی که در حال توسعه‌ی HTML است
باید در کد جاوااسکریپتی خود از jQuery استفاده کند و بعنوان مثال یک Popover را فعال یا غیر فعال کند و این، یک فرآیند خسته کننده و مستعد خطا
است.
یک مثال ساده از Directives AngularJS و بررسی آن
var m = angular.module("myApp");
myApp.directive("myDir", function() {
return {
restrict: "E",
scope: {
name: "@",
amount: "=",
save: "&"
},
template:
"<div>" +
" {{name}}: <input ng-model='amount' />" +
" <button ng-click='save()'>Save</button>" +
"</div>",
replace: true,
transclude: false,
controller: [ "$scope", function ($scope) { … }],
link: function (scope, element, attrs, controller) {…}
}
}); به الگوی نامگذاری directive دقت کنید. پیشوند my شبیه به یک namespace است. بنابراین اگر یک Application از دایرکتیوهای قرار گرفته در Module های متفاوت استفاده کند، به راحتی می‌توان محل تعریف یک directive را تشخیص داد. این نام می‌تواند نشان دهنده‌ی این باشد که این directive را خودتان توسعه داده‌اید یا از یک directive توسعه داده شده توسط شخص دیگری در حال استفاده هستید. به هر حال این نحوه‌ی نام گذاری یک اجبار نیست و به عنوان یک پیشنهاد است.
سازنده directive یک شیء را با تعدادی خاصیت باز می‌گرداند که تمامی آنها در سایت AngularJS توضیح داده شده‌اند. در اینجا قصد داریم تا توضیحی مختصر در مورد کاری که این خصوصیات انجام می‌دهند داشته باشیم.
· restrict : تشخیص می‌دهد که آیا directive در HTML استفاده خواهد شد. گزینه‌های قابل استفاده ‘A’ ، ‘E’ ، ‘C’ برای attribute ، element ، class و یا comment است . پیش فرض ‘A’ برای attribute است. اما ما بیشتر علاقه به استفاده از ویژگی element برای ایجاد المنت‌های UI داریم.
· scope : ایجاد یک scope ایزوله که متعلق به directive است و موجب ایزوله شدن آن از scope صدا زننده directive می‌شود. متغیرهای scope پدر از طریق خصوصیات تگ directive ارسال می‌شوند. این ایزوله کردن زمانی کاربردی است که در حال ایجاد کامپوننت هایی با قابلیت استفاده مجدد هستیم، که نباید متکی به scope پدر باشند. شیء scope در directive نام و نوع متغیرهای scope را تعیین می‌کنند. در مثال بالا سه متغیر برای scope تعریف شده است:
- name: "@" (by value, one-way) : علامت @ مشخص می‌کند که مقدار متغیر ارسال می‌شود. Directive یک رشته را دریافت می‌کند که شامل مقدار ارسال شده از scope پدر می‌باشد. Directive می‌تواند از آن استفاده کند، اما نمی‌تواند مقدار آن را در scope پدر تغییر دهد.
- amount: "=" (by reference, two-way) : علامت = مشخص می‌کند این متغیر با ارجاع ارسال می‌شود. Directive یک ارجاع به مقدار متغیر در scope اصلی دریافت می‌کند. مقدار می‌تواند هر نوع داده ای، شامل یک شیء complex یا یک آرایه باشد. Directive می‌تواند مقدار را در scope پدر تغییر دهد. این نوع متغیر، زمانیکه نیاز باشد directive مقدار را در scope پدر تغییر دهد، استفاده می‌شود.
- save: "&" (expression) : علامت & مشخص می‌کند این متغیر یک expression را که در scope پدر اجرا می‌شود، نگهداری می‌کند. اکنون directive قابلیت انجام کارهایی فراتر از تغییر یک مقدار را دارد. به عنوان مثال می‌توان یک تابع را از scope پدر فراخوانی و نتیجه‌ی اجرا را دریافت کرد.
· template : الگوی رشته ای که جایگزین المنت تعریف شده می‌شود. فرآیند جایگزینی تمامی خصوصیات را از المنت قدیمی به المنت جدید انتقال می‌دهد. به نحوه استفاده از متغیرهای تعریف شده در scope ایزوله دقت کنید. این مورد به شما امکان تعریف directive های macro-style را می‌دهد که نیاز به کد اضافه‌ای، ندارند. اگرچه در بیشتر موارد الگو یک تگ ساده <div> است که از کدهای link که در زیر توضیح داده شده است استفاده می‌کند.
· replace : تعیین می‌کند که آیا الگوی directive باید جایگزین المنت شود. مقدار پیش فرض false است.
· transclude : تعیین کننده این است که محتوای directive باید در المنت کپی شود یا خیر. در مثال زیر المنت tab شامل المنت‌های HTML دیگر است پس transclude برابر true است.
<body ng-app="components"> <h3>BootStrap Tab Component</h3> <tabs> <pane title="First Tab"> <div>This is the content of the first tab.</div> </pane> <pane title="Second Tab"> <div>This is the content of the second tab.</div> </pane> </tabs> </body>
· link : این تابع بیشتر منطق directive را شامل می‌شود. Link وظیفه دستکاری DOM ، ایجاد event listener ها و... را دارد. تابع Link پارامترهای زیر را دریافت می‌کند:
- scope : ارجاع به scope ایزوله شده directive دارد.
- element : ارجاع به المنت‌های DOM که directive را تعریف کرده اند. تابع link معمولا برای دستکاری المنت از jQuery استفاده می‌کند. (یا از Angular's jqLite در صورتی که jQuery بارگذاری نشده باشد)
- controller : در مواقعی که از دایرکتیوهای تو در تو استفاده می‌شود کاربرد دارد. این پارامتر یک directive فرزند با ارجاعی به پدر را فراهم می‌کند، بنابراین موجب ارتباط directive ها می‌شود.
به عنوان مثال، این directive که پیاده سازی bootstrap tab را انجام داده است، می‌توانید مشاهده نمایید.
موفق باشید
یکی از موارد فوق العاده تکراری در هنگام توسعه‌ی وب، برای یک توسعه دهنده سمت کاربر (Front end Developer) ریلود کردن مرورگر است. همچنین تست وب سایت یا آپلود در موبایل و سایر داستگاه‌ها، متداول است. با پلاگین گالپ می‌توان این مشکل را به صورت بهینه‌ای حل کرد.
npm install browser-sync gulp --save-dev
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
notify = require('gulp-notify'),
browserSync = require('browser-sync'), // Add browser syns plugin
bower = require('gulp-bower'); gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: './' //our server root
}
});
}); gulp.task('watch', [ 'css','browserSync'], function() {
}) // Rerun the task when a file changes
gulp.task('watch', ['html', 'css','browserSync'], function() {
gulp.watch(config.sassPath + '/**/*.scss', ['css']);
gulp.watch(config.htmlPath , ['html'] )
browserSync.watch("./*.html").on("change", browserSync.reload); // browserSync watch task
}); .pipe(browserSync.reload({
stream: true
})); 
@import "bootstrap"; @import "font-awesome";
@import "fonts-fa"; @import "variable"; @import "bootstrap"; @import "font-awesome"; @import "rtl.scss"; @import "typography";
http://en.هشام.com/post/build-customizable-language-switcher-tag-helper-with-bootstrap
WebRequest wr = WebRequest.Create(uri);
using (WebResponse response = wr.GetResponse()) { } The remote name could not be resolved: 'en.هشام.com'
<configuration>
<uri>
<idn enabled="All" />
<iriParsing enabled="true" />
</uri>
</configuration> var unicode = @"en.هشام.com"; var mapping = new IdnMapping(); // IDN = Internationalizing Domain Names var ascii = mapping.GetAscii(unicode); Console.WriteLine(ascii); string convertedBackToUnicode = mapping.GetUnicode(ascii); Console.WriteLine(convertedBackToUnicode);