if (imageName == null) return Json(new { success = false }, JsonRequestBehavior.AllowGet);
return Json(new { success = false }, "text/html", JsonRequestBehavior.AllowGet);
if (imageName == null) return Json(new { success = false }, JsonRequestBehavior.AllowGet);
return Json(new { success = false }, "text/html", JsonRequestBehavior.AllowGet);
<uses-permission android:name="android.permission.RECORD_AUDIO" />
سیستمعامل مجاز به اجرای برنامهای بدون امضاء نخواهد بود.
prototype: { startRequest: function( element ) { //... }, stopRequest: function( element, valid ) { //... },
var originalStartRequest = $.validator.prototype.startRequest; $.validator.prototype.startRequest = function (element) { // یافتن عنصر در حال بررسی var container = $('form').find("[data-valmsg-for='" + element.name + "']"); // افزودن کلاس نمایش منتظر بمانید container.addClass('loading'); // فراخوانی متد اصلی برای انجام کارهای درونی افزونه originalStartRequest.apply(this, arguments); }; var originalStopRequest = $.validator.prototype.stopRequest; $.validator.prototype.stopRequest = function (element) { // یافتن عنصر در حال بررسی var container = $('form').find("[data-valmsg-for='" + element.name + "']"); // حذف کلاس نمایش منتظر بمانید container.removeClass('loading'); // فراخوانی متد اصلی برای انجام کارهای درونی افزونه originalStopRequest.apply(this, arguments); };
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Url"></span>
bower install chosen
{ "name": "asp-net-mvc5x-angular2x", "version": "1.0.0", "authors": [ "DNT" ], "license": "MIT", "ignore": [ "node_modules", "bower_components" ], "dependencies": { "chosen": "1.4.2" }, "devDependencies": { } }
<script src="~/node_modules/jquery/dist/jquery.min.js"></script> <script src="~/node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="~/bower_components/chosen/chosen.jquery.min.js"></script> <link href="~/bower_components/chosen/chosen.min.css" rel="stylesheet" type="text/css" />
declare var jQuery: any;
روش متداول استفاده از jQuery، فراخوانی آن پس از رخداد document ready است. در اینجا معادل این رخداد، hook ویژهای به نام ngAfterViewInit است. بنابراین تمام فراخوانیهای jQuery را باید در این متد انجام داد.
constructor(private _el: ElementRef) { }
import { Component, ElementRef, AfterViewInit } from "@angular/core"; declare var jQuery: any; // untyped @Component({ templateUrl: "app/using-jquery-addons/using-jquery-addons.component.html" }) export class UsingJQueryAddonsComponent implements AfterViewInit { dropDownItems = ["First", "Second", "Third"]; selectedValue = "Second"; constructor(private _el: ElementRef) { } ngAfterViewInit() { jQuery(this._el.nativeElement) .find("select") .chosen() .on("change", (e, args) => { this.selectedValue = args.selected; }); } }
<select> <option *ngFor="let item of dropDownItems" [value]="item" [selected]="item == selectedValue"> {{item}} option </option> </select> <h4> {{selectedValue}}</h4>
npm install -g typings typings install jquery --save --ambient
/// <reference path="../typings/browser/ambient/jquery/index.d.ts" />
// declare var jQuery: any; // untyped declare var jQuery: JQueryStatic; // typed
interface JQuery { //... chosen(options?:any):JQuery; } declare module "jquery" { export = $; }
همانطور که در قسمت اول گفته شد، اجزای رابط کاربری (تگهای HTML) در کتابخانهی React به عنوان کامپوننتها (مؤلفههای جزء) شناخته میشوند. React تگها را به عنوان اجزایی مستقل و با وضعیتی مشخص در حافظه میشناسد. دلایل ارزشمند بودن این روش در ادامه بررسی میشود.
React میتواند تگهای یگانه یا مخلوطی از تگهای به هم مرتبط را در پس زمینه ساخته و با یک نام واحد (کامپوننت) به HTML DOM ارسال کند. یعنی اگر جایی یک کامپوننت صدا زده شود، تگ یا تگهای مرتبط به آن کامپوننت را به عنوان خروجی خواهیم داشت. همانطور که میشود تگهای مختلف را به صورت تو در تو استفاده کرد، کامپوننتها را هم میشود به همین روش فراخوانی کرد. در مثال زیر روش صدا زدن چند کامپوننت و تگهایی را که ارائه میدهد، داریم.
// Components in a JavaScript file. <clickableImage href="http://google.com" src="google.png" /> <LinksContainer> <LinksList> <clickableImage href="http://yahoo.com" src="yahoo.png" /> </LinksList> </LinksContainer> <!--Output in HTML DOM--> <a href="http://google.com"> <img src="google.png" /> </a> <div> <div> <ul> <li> <a href="http://google.com"> <img src="google.png" /> </a> </li> </ul> </div> </div>
در قسمت کامپوننتها میبینیم که چطور کامپوننتها یکبار به صورت تکی و یک بار به صورت تو در تو اجرا میشوند. خروجی در قسمت Output واضح است که با نام کامپوننتها هماهنگی دارد. با این مثال چند مورد مشخص میشود.
در ادامه وقتی با روش ساخت کامپوننتها آشنا شدیم، متوجه میشویم که کامپوننتها چیزی بیشتر از یک تابع نیستند. وقتی نام یک کامپوننت را فراخوانی کنیم در واقع یک تابع را اجرا میکنیم، به آن پارامتر ورودی را میدهیم و از آن خروجی میگیریم. میدانیم که توابع را میشود یکبار ساخت و چندبار استفاده کرد. بخصوص اگر این توابع به متغیرهای سراسری و سایر توابع وابسته نباشند و به صورت مستقل عمل کنند، میشود آنها را به برنامههای دیگر هم انتقال داد.
در React به سه روش میشود کامپوننتها را ایجاد کرد. در روش اول توضیحات زیاد خواهند بود، اما در دو روش بعدی فقط نکات کلیدی گفته خواهد شد.
میخواهیم یک منو از نوشیدنیها را با استفاده از کامپوننتها نمایش دهیم. در یک فایل جاوااسکریپت کدهای زیر را وارد کنید. در ادامه هر بخش توضیح داده خواهد شد.
var hotDrinks = [ { item: "Tea", price: "7000" }, { item: "Espresso", price: "10000" }, { item: "Hot Chocolate", price: "12000" } ]; var MenuItem = function (props) { return ( <li className="list-group-item"> <span className="badge">{props.price}</span> <p>{props.item}</p> </li> ) }; var Menu = function (props) { return ( <div className="row"> <div className="col-md-4"> <ul className="list-group"> {props.data.map(item => <MenuItem {...item} />)} </ul> </div> </div> ) }; ReactDOM.render( <Menu data={hotDrinks} />, document.getElementById("reactTestContainer") )
React یک API درونی برای ایجاد کامپوننتها، به نام createClass دارد. این تابع باید یک شیء پیکربندی درون خود داشته باشد که در آن و بین دو آکولاد {} خواص و متدها تعریف میشوند. تابع createClass برای کار حداقل باید یک متد به نام render داشته باشد که در آن تگهای JSX را قرار میدهیم. کامپوننت MenuItem را که به صورت Stateless ساختیم، دوباره با createClass ایجاد میکنیم.
var MenuItem = React.createClass({ render: function () { return ( <li className="list-group-item"> <span className="badge">{this.props.price}</span> <p>{this.props.item}</p> </li> ) } });
برای خواندن مقادیر ورودی در این روش باید از this استفاده کنیم. بر اساس قواعد شیء گراییِ، MenuItem و Menu کلاس هستند و هر بار در ReactDOM.render کامپوننت Menu را به HTML DOM ارسال میکنیم. یک نمونه از این کلاس ساخته میشود و کلاس Menu، نمونههایی از کلاس MenuItem را میسازد. this به نمونهی ساخته شده از یک کلاس اشاره دارد.
در روش آخر با استفاده از extend، از کلاس React.Component ارث بری میکنیم و کامپوننت را میسازیم. مفاهیم کلاس و ارث بری در جاوااسکریپ را میشود از اینجا یاد گرفت. مجددا MenuItem را با این روش ایجاد میکنیم.
class MenuItem extends React.Component { render() { return ( <li className="list-group-item"> <span className="badge">{this.props.price}</span> <p>{this.props.item}</p> </li> ); } }
همانطور که میبینید بین دو روش React.Component و React.createClass تفاوتی جز در syntax آنها نیست. در اینجا از سایر امکانات کلاس در جاوااسکریپت مثل سازنده کلاس میشود استفاده کرد. کامپوننتها در React میتوانند کاری بیشتر از ساخت تگها در HTML DOM را انجام دهند. در قسمت بعد به قابلیت مهم حفظ و دنبال کردن تغییرات در وضعیت کامپوننتها میپردازیم.
پروژه bootstrap-sidebar : پلاگین نوار منوی کناری (Sidebar) بر روی BootStap 3.0
اگر منوهای شما داخل یک نوار منو (menubar ) افقی، زیاد هستند یا شما احتیاج به نوار منوی کناری واکنشگرای سازگار با Bootstrap3 دارید، میتوانید از این پلاگین برای نمایش لیست منوهای خودتان در صفحات واکنشگرای وب استفاده نمایید.
نسخهی نمایشی (دمو)
// Named function function add(x, y) { return x + y; } // Anonymous function let myAdd = function(x, y) { return x+y; };
let z = 100; function addToZ(x, y) { return x + y + z; }
function add(x: number, y: number): number { return x + y; } let myAdd = function(x: number, y: number): number { return x+y; };
function PublicationMessage(year: number): string { return 'Date published: ' + year; }
let publishFunc: (someYear: number) => string;
publishFunc = PublicationMessage; let message: string = publishFunc(2016);
همچنین میتوان function type را به صورت inline نیز تعریف کرد:
let myAdd: (baseValue:number, increment:number) => number = function(x, y) { return x + y; };
Optional and Default Parameters
در جاوا اسکریپت تمامی پارامترهای یک تابع اختیاری هستند. اما TypeScript کمی متفاوت است. یعنی در حالت پیشفرض، ذکر تمامی پارامترها ضروری است؛ مگر اینکه پارامترهای موردنیاز را به صورت اختیاری تعیین کنید. به طور مثال در تابع زیر دو پارامتر را تعریف کردهایم:
function CreateCustomer(name: string, age?: number) {}
همانطور که مشاهده میکنید با افزودن علامت سوال بعد از نام پارامتر، توانستهایم آن را به صورت اختیاری تعریف کنیم. نکتهایی که در اینجا وجود دارد این است که تمامی پارامترهای optional، حتماً باید بعد از پارامترهای required تعریف شوند.
برای تعیین مقدار پیشفرض برای هر پارامتر نیز میتوانیم به اینصورت عمل کنیم:
function GetBookByTitle(title: string = 'C# 6.0 in a Nutshell') {}
default parameters در صورتیکه بعد از required parameters آورده شوند، به عنوان optional در نظر گرفته میشوند. یعنی در اینحالت لزومی به گذاشتن علامت سوال، بعد از نام پارامتر نیست. نکتهی قابل توجهایی که در استفاده از default parameters وجود دارد این است که علاوه بر رشتهها میتوان عبارات (expressions) را نیز به آنها اختصاص داد:
function GetBookByTitle(title: string = GetMostPopularBooks()) {}
Rest Parameters
rest parameters به شما این امکان را میدهند تا به تعداد نامحدودی پارامتر به یک تابع ارسال کنید:
function GetBooksReadForCust(name: string, ...bookIDs: number[]) {}
تابع فوق دو پارامتر را از ورودی دریافت میکند. پارامتر دوم این تابع به صورت rest تعریف شده است. یعنی برای پارامتر دوم میتوانیم هر تعداد پارامتری را به این تابع ارسال کنیم. همچنین برای نوع این پارامتر، یک آرایه از نوع number را تعیین کردهایم. یعنی پارامترهای دریافتی، درون یک آرایه از نوع number ذخیره خواهند شد. در ES 5 برای داشتن این چنین قابلیتی از شیء arguments استفاده میکردیم. یعنی تابع فوق را میبایستی اینگونه مینوشتیم:
function GetBooksReadForCust(name) { var bookIDs = []; for (var _i = 1; _i < arguments.length; _i++) { bookIDs[_i - 1] = arguments[_i]; } }
استفاده از this
درک this در جاوا اسکریپت، در ابتدا باعث مقداری سردرگمی میشود. یعنی مقدار آن در زمان فراخوانی تابع، ست خواهد شد. یعنی در هر بلاک از کد، وضعیتهای متفاوتی را ارائه میدهد. به عنوان مثال درون callback مربوط به تابع setInterval در تابع زیر میخواهیم به مقدار متغیر publishDate دسترسی داشته باشم:
function Book() { let self = this; self.publishDate = 2016; setInterval(function() { console.log(self.publishDate); }, 1000); }
همانطور که مشاهده میکنید برای دسترسی به این پراپرتی، مقدار this را درون یک متغیر با نام self، در ابتدا تعریف کردهایم. زیرا استفادهی مستقیم از this.publishDate درون callback به چیز دیگری اشاره میکند. این روش در ES 5 خیلی رایج است. اما با استفاده از Arrow Functions به راحتی میتوانیم به this در هر جایی دسترسی داشته باشیم. بنابراین کد فوق را میتوانیم به این صورت بازنویسی کنیم:
function Book() { this.publishDate = 2016; setInterval(() => { console.log(this.publishDate); }, 1000); }
در واقع Arrow Function در پشت صحنه کار capture کردن this را برایمان انجام خواهد داد.
Function overloads
قابلیت function overloading در بیشتر typed languageها در دسترس میباشد. همانطور که میدانید این قابلیت جهت تعریف امضاءهای مختلف برای یک تابع استفاده میشود. یعنی ایجاد توابعی با یک نام، اما با انواع متفاوت. از آنجائیکه TypeScript به جاوا اسکریپت کامپایل میشود، در نتیجه جاوا اسکریپت فاقد نوع (type) است. پس در زمان کامپایل نوعها برداشته خواهند شد. بنابراین داشتن توابعی همنام باعث بروز مشکلاتی خواهد شد. برای داشتن نسخههای مختلفی از یک تابع میتوانیم تعاریف موردنیازمان را ارائه داده، اما تنها یک پیادهسازی داشته باشیم. برای مثال میخواهیم یک overload دیگر برای تابع زیر داشته باشیم:
function GetTitles(author: string) : string[];
تابع فوق یک رشته را از ورودی دریافت کرده و در نهایت یک آرایه از رشتهها را بر میگرداند. برای overload دیگر این تابع میخواهیم به جای دریافت رشته، یک boolean از ورودی دریافت کنیم:
function GetTitles(available: boolean) : string[];
همانطور که مشاهده میکنید، هیچکدام از overloadهای فوق پیادهسازیایی ندارند. در واقع تا اینجا به TypeScript گفتهایم که نیاز به دو نسخه از تابع GetTitles خواهیم داشت. اکنون میتوانیم یک پیادهسازی کلی برای دو overload فوق داشته باشیم:
function GetTitles(bookProperty: any) : string[] { if(typeof bookProperty == 'string') { // some code } else if (typeof bookProperty == 'boolean') { // some code } return result; }
همانطور که عنوان شد، تنها پیادهسازی فوق را برای تمامی overloadها خواهیم داشت. در نتیجه اینبار نوع پارامتر ورودی را any تعریف کردهایم. سپس درون بدنهی تابع، نوع پراپرتی را توسط typeof تشخیص دادهایم. بنابراین برای فراخوانی هر یک از overloadها، میتوانیم کدهای خاصی را اجرا کنیم.