در ابتدا ما یک empty solution را با نام "AspNetIdentity" همانند شکل مقابل می‌سازیم.
یک ASP.NET Web Application با نام "AspNetIdentity.WebApi" را به این solution اضافه می‌نماییم. در بخش select template ما empty template را انتخاب می‌کنیم. همچنین در قسمت add folders and core references for: نیز هیچیک از گزینه‌ها را انتخاب نمی‌کنیم.
در زیر packageهای مورد نیاز برای ASP.NET Web API و Owin را مشاهده میکنید. همچنین packageهای مربوط به ASP.Net Identity 2.1 نیز در زیر قرار داده شده‌اند.
Install-Package Microsoft.AspNet.Identity.Owin -Version 2.1.0 Install-Package Microsoft.AspNet.Identity.EntityFramework -Version 2.1.0 Install-Package Microsoft.Owin.Host.SystemWeb -Version 3.0.0 Install-Package Microsoft.AspNet.WebApi.Owin -Version 5.2.2 Install-Package Microsoft.Owin.Security.OAuth -Version 3.0.0 Install-Package Microsoft.Owin.Cors -Version 3.0.0
حال که تمامی پکیج‌های مورد نیاز را به پروژه خود اضافه نمودیم، قصد داریم تا اولین کلاس EF را با نام "ApplicationUser" به پروژه اضافه کنیم. این کلاس، کاربری را که قصد ثبت نام در membership system، دارد را نمایش می‌دهد. برای این کار ما یک کلاس جدید را به نام "ApplicationUser" می‌سازیم و کلاس "Microsoft.AspNet.Identity.EntityFramework.IdentityUser" را در آن به ارث می‌بریم.
برای این کار ما یک پوشه‌ی جدید را در برنامه با نام "Infrastructure" می‌سازیم و درون آن کلاس ذکر شده را اضافه می‌کنیم:
public class ApplicationUser : IdentityUser
{
[Required]
[MaxLength(100)]
public string FirstName { get; set; }
[Required]
[MaxLength(100)]
public string LastName { get; set; }
[Required]
public byte Level { get; set; }
[Required]
public DateTime JoinDate { get; set; }
} پس از افزودن کلاس User، نوبت به اضافه نمودن Db Context است. این کلاس وظیفه‌ی ارتباط با پایگاه داده را بر عهده دارد. ما یک کلاس جدید را با نام ApplicationDbContext، به پوشه‌ی Infrastructure اضافه می‌نماییم. کد مربوط به این کلاس به صورت زیر است:
public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
{
public ApplicationDbContext()
: base("DefaultConnection", throwIfV1Schema: false)
{
Configuration.ProxyCreationEnabled = false;
Configuration.LazyLoadingEnabled = false;
}
public static ApplicationDbContext Create()
{
return new ApplicationDbContext();
}
} همانطور که ملاحظه میکنید این کلاس از IdentityDbContext ارث بری نموده است. این کلاس یک نسخه‌ی جدیدتر از DbContext است که تمامی نگاشت‌های Entity Framework Code First را انجام می‌دهد. در ادامه ما یک Connection String را با نام DefaultConnection در فایل web.config اضافه می‌نماییم.
همچنین متد static ایی را با نام Create که در تکه کد فوق از سوی Owin Startup class فراخوانی می‌گردد که در ادامه به شرح آن نیز خواهیم پرداخت.
ConnectionString قرار داده شده در فایل web.config در قسمت زیر قرار داده شده است:
<connectionStrings>
<add name="DefaultConnection" connectionString="Data Source=.\sqlexpress;Initial Catalog=AspNetIdentity;Integrated Security=SSPI;" providerName="System.Data.SqlClient" />
</connectionStrings> حال ما باید EF CodeFirst Migration را برای آپدیت کردن دیتابیس، بجای دوباره ساختن آن به ازای هر تغییری، فعال نماییم. برای این کار بایستی در قسمت NuGet Package Manager Console عبارت زیر را وارد نماییم:
enable-migrations add-migration InitialCreate
اگر تا به اینجای کار تمامی مراحل به درستی صورت گرفته باشند، پوشه‌ی Migration با موفقیت ساخته می‌شود. همچنین پایگاه داده متشکل از جداول مورد نیاز برای سیستم Identity نیز ایجاد می‌شود. برای اطلاعات بیشتر می‌توانید مقالات مرتبط با Code First را مطالعه نمایید. ساختار جداول ما باید به صورت زیر باشد:
در بخش بعدی، کلاس‌های مربوط به UserManager را ایجاد خواهیم کرد و پس از آن فایل Startup Owin را برای مدیریت کاربران، تشریح می‌کنیم.
public class Product
{
public int Id { set; get; }
public DateTime AddDate { set; get; }
public string Name { set; get; }
public decimal Price { set; get; }
} 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/PersianDatePicker.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
@RenderBody()
</div>
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.11.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-fa.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/PersianDatePicker.js"></script>
<script src="~/Scripts/jquery.price_format.2.0.js"></script>
@RenderSection("Scripts", required: false)
</body>
</html> colModel: [
{
name: 'Name', index: 'Name', align: 'right', width: 100,
editable: true, edittype: 'text',
editoptions: {
maxlength: 40,
dataInit: function (elem) {
// http://jqueryui.com/autocomplete/
$(elem).autocomplete({
source: '@Url.Action("GetProductNames","Home")',
minLength: 2,
select: function (event, ui) {
$(elem).val(ui.item.value);
$(elem).trigger('change');
}
});
}
},
editrules: {
required: true
}
}
], public ActionResult GetProductNames(string term)
{
var list = ProductDataSource.LatestProducts
.Where(x => x.Name.StartsWith(term))
.Select(x => x.Name)
.Take(10)
.ToArray();
return Json(list, JsonRequestBehavior.AllowGet);
} colModel: [
{
name: 'AddDate', index: 'AddDate', align: 'center', width: 100,
editable: true, edittype: 'text',
editoptions: {
maxlength: 10,
// https://www.dntips.ir/post/1382
onclick: "PersianDatePicker.Show(this,'@today');"
},
editrules: {
required: true
}
}
], @{
ViewBag.Title = "Index";
var today = DateTime.Now.ToPersianDate();
} colModel: [
{
name: 'Price', index: 'Price', align: 'center', width: 100,
formatter: 'currency',
formatoptions:
{
decimalSeparator: '.',
thousandsSeparator: ',',
decimalPlaces: 2,
prefix: '$'
},
editable: true, edittype: 'text',
editoptions: {
dir: 'ltr',
dataInit: function (elem) {
// http://jquerypriceformat.com/
$(elem).priceFormat({
prefix: '',
thousandsSeparator: ',',
clearPrefix: true,
centsSeparator: '',
centsLimit: 0
});
}
},
editrules: {
required: true,
minValue: 0
}
}
], using System;
using System.Globalization;
using System.Threading;
using System.Web.Mvc;
namespace jqGrid05.CustomModelBinders
{
/// <summary>
/// How to register it in the Application_Start method of Global.asax.cs
/// ModelBinders.Binders.Add(typeof(decimal), new DecimalBinder());
/// </summary>
public class DecimalBinder : DefaultModelBinder
{
public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
{
if (bindingContext.ModelType == typeof(decimal) || bindingContext.ModelType == typeof(decimal?))
{
return bindDecimal(bindingContext);
}
return base.BindModel(controllerContext, bindingContext);
}
private static object bindDecimal(ModelBindingContext bindingContext)
{
var valueProviderResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
if (valueProviderResult == null)
return null;
bindingContext.ModelState.SetModelValue(bindingContext.ModelName, valueProviderResult);
decimal value;
var valueAsString = valueProviderResult.AttemptedValue == null ?
null : valueProviderResult.AttemptedValue.Trim();
if (string.IsNullOrEmpty(valueAsString))
return null;
if (!decimal.TryParse(valueAsString, NumberStyles.Any, Thread.CurrentThread.CurrentCulture, out value))
{
const string error ="عدد وارد شده معتبر نیست";
var ex = new InvalidOperationException(error, new Exception(error, new FormatException(error)));
bindingContext.ModelState.AddModelError(bindingContext.ModelName, ex);
return null;
}
return value;
}
}
} using System;
using System.Web.Mvc;
using System.Web.Routing;
using jqGrid05.CustomModelBinders;
namespace jqGrid05
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RouteConfig.RegisterRoutes(RouteTable.Routes);
ModelBinders.Binders.Add(typeof(DateTime), new PersianDateModelBinder());
ModelBinders.Binders.Add(typeof(decimal), new DecimalBinder());
}
}
} 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/font-awesome.css" rel="stylesheet" />
<link href="Content/froala_editor.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/froala_editor.min.js"></script>
<script src="Scripts/langs/fa.js"></script>
</head>
<body>
<form id="form1" runat="server">
</form>
</body>
</html> @{
ViewBag.Title = "Index";
}
<style type="text/css">
/*تنظیم فونت پیش فرض ادیتور*/
.froala-element {
}
</style>
@using (Html.BeginForm(actionName: "Index", controllerName: "Home"))
{
@Html.TextArea(name: "Editor1")
<input type="submit" value="ارسال" />
}
@section Scripts
{
<script type="text/javascript">
$(function () {
$('#Editor1').editable({
buttons: ["bold", "italic", "underline", "strikeThrough", "fontFamily",
"fontSize", "color", "formatBlock", "align", "insertOrderedList",
"insertUnorderedList", "outdent", "indent", "selectAll", "createLink",
"insertImage", "insertVideo", "undo", "redo", "html", "save", "inserthorizontalrule"],
inlineMode: false,
inverseSkin: true,
preloaderSrc: '@Url.Content("~/Content/img/preloader.gif")',
allowedImageTypes: ["jpeg", "jpg", "png"],
height: 300,
language: "fa",
direction: "rtl",
fontList: ["Tahoma, Geneva", "Arial, Helvetica", "Impact, Charcoal"],
autosave: true,
autosaveInterval: 2500,
saveURL: '@Url.Action("FroalaAutoSave", "Home")',
saveParams: { postId: "123" },
spellcheck: true,
plainPaste: true,
imageButtons: ["removeImage", "replaceImage", "linkImage"],
borderColor: '#00008b',
imageUploadURL: '@Url.Action("FroalaUploadImage", "Home")',
imageParams: { postId: "123" },
enableScript: false
});
});
</script>
} /// <summary>
/// ذخیره سازی خودکار
/// </summary>
[HttpPost]
[ValidateInput(false)]
public ActionResult FroalaAutoSave(string body, int? postId) // نام پارامتر بادی را تغییر ندهید
{
//todo: save body ...
return new EmptyResult();
} // todo: مسایل امنیتی آپلود را فراموش نکنید
/// <summary>
/// ذخیره سازی تصاویر ارسالی
/// </summary>
[HttpPost]
public ActionResult FroalaUploadImage(HttpPostedFileBase file, int? postId) // نام پارامتر فایل را تغییر ندهید
{
var fileName = Path.GetFileName(file.FileName);
var rootPath = Server.MapPath("~/images/");
file.SaveAs(Path.Combine(rootPath, fileName));
return Json(new { link = "images/" + fileName }, JsonRequestBehavior.AllowGet);
} <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master"
ValidateRequest="false"
EnableEventValidation="false"
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FroalaWebFormsTest.Default" %>
<%--اعتبارسنجی ورودی غیرفعال شده چون باید تگ ارسال شود--%>
<%--همچنین در وب کانفیگ هم تنظیم دیگری نیاز دارد--%>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<%--حالت کلاینت آی دی بهتر است تنظیم شود در اینجا--%>
<asp:TextBox ID="txtEditor" ClientIDMode="Static"
runat="server" Height="199px" TextMode="MultiLine" Width="447px"></asp:TextBox>
<br />
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="ارسال" />
<style type="text/css">
/*تنظیم فونت پیش فرض ادیتور*/
.froala-element {
}
</style>
<script type="text/javascript">
$(function () {
$('#txtEditor').editable({
buttons: ["bold", "italic", "underline", "strikeThrough", "fontFamily",
"fontSize", "color", "formatBlock", "align", "insertOrderedList",
"insertUnorderedList", "outdent", "indent", "selectAll", "createLink",
"insertImage", "insertVideo", "undo", "redo", "html", "save", "inserthorizontalrule"],
inlineMode: false,
inverseSkin: true,
preloaderSrc: 'Content/img/preloader.gif',
allowedImageTypes: ["jpeg", "jpg", "png"],
height: 300,
language: "fa",
direction: "rtl",
fontList: ["Tahoma, Geneva", "Arial, Helvetica", "Impact, Charcoal"],
autosave: true,
autosaveInterval: 2500,
saveURL: 'FroalaHandler.ashx',
saveParams: { postId: "123" },
spellcheck: true,
plainPaste: true,
imageButtons: ["removeImage", "replaceImage", "linkImage"],
borderColor: '#00008b',
imageUploadURL: 'FroalaHandler.ashx',
imageParams: { postId: "123" },
enableScript: false
});
});
</script>
</asp:Content> using System.IO;
using System.Web;
using System.Web.Script.Serialization;
namespace FroalaWebFormsTest
{
public class FroalaHandler : IHttpHandler
{
//todo: برای اینکارها بهتر است از وب ای پی آی استفاده شود
//todo: یا دو هندلر مجزا یکی برای تصاویر و دیگری برای ذخیره سازی متن
public void ProcessRequest(HttpContext context)
{
var body = context.Request.Form["body"];
var postId = context.Request.Form["postId"];
if (!string.IsNullOrWhiteSpace(body) && !string.IsNullOrWhiteSpace(postId))
{
//todo: save changes
context.Response.ContentType = "text/plain";
context.Response.Write("");
context.Response.End();
}
var files = context.Request.Files;
if (files.Keys.Count > 0)
{
foreach (string fileKey in files)
{
var file = context.Request.Files[fileKey];
if (file == null || file.ContentLength == 0)
continue;
//todo: در اینجا مسایل امنیتی آپلود فراموش نشود
var fileName = Path.GetFileName(file.FileName);
var rootPath = context.Server.MapPath("~/images/");
file.SaveAs(Path.Combine(rootPath, fileName));
var json = new JavaScriptSerializer().Serialize(new { link = "images/" + fileName });
// البته اینجا یک فایل بیشتر ارسال نمی‌شود
context.Response.ContentType = "text/plain";
context.Response.Write(json);
context.Response.End();
}
}
context.Response.ContentType = "text/plain";
context.Response.Write("");
context.Response.End();
}
public bool IsReusable
{
get { return false; }
}
}
} <location path="upload">
<system.webServer>
<handlers accessPolicy="Read" />
</system.webServer>
</location> در قسمت قبل با نحوه ساخت تم سفارشی در انگیولار متریال ۲، آشنا شدیم. در این قسمت نحوه ساخت چند تم دیگر در کنار تم اصلی، ساخت تم به ازای هر کامپوننت و نحوه تعویض تم از طریق کد را دنبال خواهیم کرد.
ساخت تم اضافی در انگیولار متریال ۲ بسیار ساده است. شما می‌توانید با استفاده مجدد از تابع angular-material-theme داخل یک کلاس CSS، صاحب یک تم اضافی دیگر شوید. برای نمونه در اینجا فایل my-custom-theme.scss را باز کرده و به شکل زیر تغییر می‌دهیم.
@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($mat-teal);
$my-app-accent: mat-palette($mat-amber, 500, A100, A400);
$my-app-warn: mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
/*تعریف تم اضافی در کنار تم اصلی*/
$alternate-primary: mat-palette($mat-light-blue);
$alternate-accent: mat-palette($mat-yellow, 500);
$alternate-warn: mat-palette($mat-red, 500);
$alternate-theme: mat-dark-theme($alternate-primary, $alternate-accent);
.alternate-theme {
@include angular-material-theme($alternate-theme);
} با این‌کار در کنار تم روشن اصلی، یک تم مشکی به صورت اضافی داخل کلاس CSS به نام alternate-theme تعریف کرده‌ایم. در این حالت تمامی کامپوننتهایی که داخل المنت با کلاس alternate-theme قرار گرفته‌اند، از تم مشکی تعریف شده استفاده خواهند کرد.
با تغییر فایل app.component.html به شکل زیر:
<md-card>
<md-card-header>
<md-card-title>تم اصلی</md-card-title>
</md-card-header>
<button md-raised-button color="primary">
Primary
</button>
<button md-raised-button color="accent">
Accent
</button>
<button md-raised-button color="warn">
Warning
</button>
</md-card>
<div>
<md-card>
<md-card-header>
<md-card-title>تم اضافی</md-card-title>
</md-card-header>
<md-card-content>
<button md-raised-button color="primary">
Primary
</button>
<button md-raised-button color="accent">
Accent
</button>
<button md-raised-button color="warn">
Warning
</button>
</md-card-content>
</md-card>
</div> تصویر زیر را در خروجی خواهید داشت.
به همین روش می‌توانید تعداد دلخواهی از تم‌ها را بسازید. همچنین می‌توانید هر تم اضافی را در یک فایل Sass تعریف کنید و از این طریق تم‌های مختلف را از هم جدا کنید. در این حالت به این نکته توجه داشته باشید که نباید mat-core@ در سرتاسر برنامه بیش از یکبار بارگذاری شده باشد.
با استفاده از mixin به نام angular-material-theme خروجی تولید شده بر روی تمامی کامپوننت‌های انگیولار متریال ۲ اعمال خواهد شد. اگر از تمامی کامپوننت‌های انگیولار متریال ۲ استفاده نمی‌کنید، می‌توانید برای کاهش حجم فایل CSS تولید شده از mixin مخصوص به هر کامپوننت استفاده کنید. همچنین برای ساخت تم‌های متفاوت به ازای هر کامپوننت نیز می‌توانید از این روش استفاده کنید.
برای این کار تمامی مراحلی که برای ساخت تم مورد نیاز بود، باید طی شود. فقط به جای استفاده از mixin به نام angular-material-theme بایستی به طریق زیر عمل شود.
اول: بارگذاری mixin با نام mat-core-them. این mixin تمامی استایل‌های مشترک رفتاری (مانند موج (ripple) در هنگام کلیک) برای کامپوننت‌ها را در بر دارد. این mixin خروجی تابع mat-light-theme یا mat-dark-theme را به عنوان ورودی دریافت می‌کند.
دوم: بارگذاری mixin مربوط به هر کامپوننت. برای مثال برای دکمه از mixin به نام mat-button-theme و برای checkbox از mixin به نام mat-checkbox-theme می‌توانید استفاده کنید. در زیر لیست mixinها به ازای کامپوننت‌های مختلف ذکر شده است.
mat-autocomplete-theme mat-button-theme mat-button-toggle-theme mat-card-theme mat-checkbox-theme mat-chips-theme mat-datepicker-theme mat-dialog-theme mat-grid-list-theme mat-icon-theme mat-input-theme mat-list-theme mat-menu-theme mat-progress-bar-theme mat-progress-spinner-theme mat-radio-theme mat-select-theme mat-sidenav-theme mat-slide-toggle-theme mat-slider-theme mat-tabs-theme mat-toolbar-theme mat-tooltip-theme
در مثال زیر می‌خواهیم تمامی کامپوننت‌ها به جز کامپوننت دکمه، تم سبز(در گروه Primary) و دکمه‌ها نیز تم آبی داشته باشند. کافی است کدهای زیر را در فایل Sass خود وارد کنید.
@import '~@angular/material/theming'; @include mat-core(); $my-app-primary: mat-palette($mat-teal); $my-app-accent: mat-palette($mat-amber, 500, A100, A400); $my-app-warn: mat-palette($mat-deep-orange); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); @include mat-material-theme($my-app-theme); /* تعریف تم برای دکمه */ $button-primary: mat-palette($mat-light-blue); $button-accent: mat-palette($mat-yellow, 500); $button-warn: mat-palette($mat-red, 500); $button-theme: mat-light-theme($button-primary, $button-accent); @include mat-button-theme($button-theme);
با توجه به اینکه mat-material-theme در داخل خود mat-button-theme را بارگذاری می‌کند دو نتیجه زیر را می‌توان گرفت.
اول: اگر mat-material-theme بعد از هر کدام از mixinهای مربوط به کامپوننت‌ها نوشته شود، تمامی Cssهای تولید شده به ازای کامپوننت را دوباره نویسی کرده و عملا هیچ کدام کارایی نخواهند داشت. برای مثال کافی است فایل Sass خود را به شکل زیر تغییر دهید. در این صورت تم مربوط به دکمه کاریی نخواهد داشت.
@import '~@angular/material/theming'; @include mat-core(); /* تعریف تم برای دکمه */ $button-primary: mat-palette($mat-light-blue); $button-accent: mat-palette($mat-yellow, 500); $button-warn: mat-palette($mat-red, 500); $button-theme: mat-ligth-theme($button-primary, $button-accent); @include mat-button-theme($button-theme); $my-app-primary: mat-palette($mat-teal); $my-app-accent: mat-palette($mat-amber, 500, A100, A400); $my-app-warn: mat-palette($mat-deep-orange); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); @include mat-material-theme($my-app-theme);
دوم: همانطور که گفتیم mat-button-theme در mat-material-theme قبلا بارگذاری شده است. با بارگذاری دوباره توسط mat-button-theme کدهای CSS که قبلا برای دکمه تولید شده‌اند را از نو دوباره می‌نویسد و این باعث بزرگ شدن حجم فایل Css تولید شده خواهد شد. پس بهتر است هنگام استفاده از mixinهای مختص کامپوننت‌ها از mat-material-theme استفاده نکنیم.
@import '~@angular/material/theming'; @include mat-core(); $my-app-primary: mat-palette($mat-teal); $my-app-accent: mat-palette($mat-amber, 500, A100, A400); $my-app-warn: mat-palette($mat-deep-orange); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); $button-primary: mat-palette($mat-light-blue); $button-accent: mat-palette($mat-yellow, 500); $button-warn: mat-palette($mat-red, 500); $button-theme: mat-light-theme($button-primary, $button-accent); @include mat-core-theme($my-app-theme); @include mat-autocomplete-theme($my-app-theme); @include mat-button-theme($button-theme); @include mat-button-toggle-theme($my-app-theme); @include mat-card-theme($my-app-theme); @include mat-checkbox-theme($my-app-theme); @include mat-chips-theme($my-app-theme); @include mat-datepicker-theme($my-app-theme); @include mat-dialog-theme($my-app-theme); @include mat-grid-list-theme($my-app-theme); @include mat-icon-theme($my-app-theme); @include mat-input-theme($my-app-theme); @include mat-list-theme($my-app-theme); @include mat-menu-theme($my-app-theme); @include mat-progress-bar-theme($my-app-theme); @include mat-progress-spinner-theme($my-app-theme); @include mat-radio-theme($my-app-theme); @include mat-select-theme($my-app-theme); @include mat-sidenav-theme($my-app-theme); @include mat-slide-toggle-theme($my-app-theme); @include mat-slider-theme($my-app-theme); @include mat-tabs-theme($my-app-theme); @include mat-toolbar-theme($my-app-theme); @include mat-tooltip-theme($my-app-theme);
فرض کنید یک تم پیش فرض و یک تم اضافی به نام alternate-theme دارید. برای تعویض تم از طریق کد کافی است کلاس المنت پدر در صفحه html خود را از طریق [ngClass] با نام تم، مقدار دهی کنید. کدهای داخل app.component.ts را به شکل زیر تغییر می‌دهیم.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
themes = [
{value: 'alternate-theme', text: 'تم مشکی'},
{value: '', text: 'تم سفید'},
];
activeTheme = '';
} آرایه‌ای جهت نمایش در کامپوننت md-select با دو مقدار تم پیش فرض و تم با نام 'alternate-theme تعریف می‌کنیم. همچنین متغیری با نام activeTheme را تعریف می‌کنیم. این متغیر در هر لحظه نام تم اعمال شده را در خود نگهداری می‌کند. مقدار اولیه این متغیر تم اصلی است.
کامپوننت md-select را به شکل زیر به فایل app.component.html به تگ main اضافه می‌کنیم.
<md-select dir="rtl" [(ngModel)]="activeTheme" placeholder="تعویض تم">
<md-option *ngFor="let theme of themes" [value]="theme.value">
{{ theme.text }}
</md-option>
</md-select> <div [ngClass]="activeTheme">
IGenericService<T> GenericService<T> : IGenericService IUserService : IGenericService<User> UserService : GenericService<User>, IUserService
// User-defined functions
connection.CreateFunction(
"volume",
(double radius, double height)
=> Math.PI * Math.Pow(radius, 2) * height);
// And use the function in SQL to find the biggest cylinder.
SELECT id, volume(radius, height) AS volume
FROM cylinder
ORDER BY volume DESC
LIMIT 1 
public class Category
{
public int CategoryId { set; get; }
public string CategoryName { set; get; }
[JsonIgnore]
public IList<Product> Products { set; get; }
}
public class Product
{
public int ProductId { set; get; }
public string ProductName { set; get; }
} namespace AngularTemplateDrivenFormsLab.Controllers
{
[Route("api/[controller]")]
public class ProductController : Controller
{
[HttpGet("[action]")]
public async Task<IActionResult> GetCategories()
{
await Task.Delay(500);
return Json(CategoriesDataSource.Items);
}
[HttpGet("[action]/{categoryId:int}")]
public async Task<IActionResult> GetProducts(int categoryId)
{
await Task.Delay(500);
var products = CategoriesDataSource.Items
.Where(category => category.CategoryId == categoryId)
.SelectMany(category => category.Products)
.ToList();
return Json(products);
}
}
} >ng g m Product -m app.module --routing
>ng g c product/product-group
>ng g cl product/product >ng g cl product/Category >ng g cl product/product-group-form
export class ProductGroupForm {
constructor(
public categoryId?: number,
public productId?: number
) { }
}
export class Product {
constructor(
public productId: number,
public productName: string
) { }
}
export class Category {
constructor(
public categoryId: number,
public categoryName: string
) { }
} >ng g s product/product-items -m product.module
import { Injectable } from "@angular/core";
import { Http, Response, Headers, RequestOptions } from "@angular/http";
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/do";
import "rxjs/add/operator/catch";
import "rxjs/add/observable/throw";
import "rxjs/add/operator/map";
import "rxjs/add/observable/of";
import { Category } from "./category";
import { Product } from "./product";
@Injectable()
export class ProductItemsService {
private baseUrl = "api/product";
constructor(private http: Http) { }
private handleError(error: Response): Observable<any> {
console.error("observable error: ", error);
return Observable.throw(error.statusText);
}
getCategories(): Observable<Category[]> {
return this.http
.get(`${this.baseUrl}/GetCategories`)
.map(response => response.json() || {})
.catch(this.handleError);
}
getProducts(categoryId: number): Observable<Product[]> {
return this.http
.get(`${this.baseUrl}/GetProducts/${categoryId}`)
.map(response => response.json() || {})
.catch(this.handleError);
}
} export class ProductGroupComponent implements OnInit {
categories: Category[] = [];
model = new ProductGroupForm();
constructor(private productItemsService: ProductItemsService) { }
ngOnInit() {
this.productItemsService.getCategories().subscribe(
data => {
this.categories = data;
},
err => console.log("get error: ", err)
);
} <div class="container">
<h3>Cascading Drop-down Lists</h3>
<form #form="ngForm" (submit)="submitForm(form)" novalidate>
<div class="form-group">
<label class="control-label">Category</label>
<span class="glyphicon glyphicon-refresh glyphicon-spin spinner" *ngIf="categories.length == 0"></span>
<select class="form-control" name="categoryCtrl" #categoryCtrl (change)="fetchProducts(categoryCtrl.value)"
[(ngModel)]="model.categoryId">
<option value="undefined">Select a Category...</option>
<option *ngFor="let category of categories" value="{{category.categoryId}}">
{{ category.categoryName }}
</option>
</select>
</div> products: Product[] = [];
isLoadingProducts = false;
fetchProducts(categoryId?: number) {
console.log(categoryId);
this.products = [];
if (categoryId === undefined || categoryId.toString() === "undefined") {
return;
}
this.isLoadingProducts = true;
this.productItemsService.getProducts(categoryId).subscribe(
data => {
this.products = data;
this.isLoadingProducts = false;
},
err => {
console.log("get error: ", err);
this.isLoadingProducts = false;
}
);
} <option value="undefined">Select a Category...</option>
public categoryId?: number
model = new ProductGroupForm();
<div class="form-group">
<label class="control-label">Product</label>
<span class="glyphicon glyphicon-refresh glyphicon-spin spinner" *ngIf="isLoadingProducts"></span>
<select class="form-control" name="productCtrl" [(ngModel)]="model.productId">
<option value="undefined">Select a Product...</option>
<option *ngFor="let product of products" value="{{product.productId}}">
{{ product.productName }}
</option>
</select>
</div> /* Spinner */
.spinner {
font-size:15px;
z-index:10
}
.glyphicon-spin {
-webkit-animation: spin 1000ms infinite linear;
animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
} >npm install >ng build --watch
>dotnet restore >dotnet watch run
namespace NHSample5.Domain
{
public class Patient
{
public virtual int Id { get; set; }
public virtual string FirstName { get; set; }
public virtual string LastName { get; set; }
}
}
using System.Collections.Generic;
namespace NHSample5.Domain
{
public class Doctor
{
public virtual int Id { get; set; }
public virtual string Name { get; set; }
public virtual IList<Patient> Patients { get; set; }
public Doctor()
{
Patients = new List<Patient>();
}
}
}
using NHibernate.Validator.Constraints;
namespace NHSample5.Domain
{
public class Patient
{
public virtual int Id { get; set; }
[Length(Min = 3, Max = 20,Message="طول نام باید بین 3 و 20 کاراکتر باشد")]
public virtual string FirstName { get; set; }
[Length(Min = 3, Max = 60, Message = "طول نام خانوادگی باید بین 3 و 60 کاراکتر باشد")]
public virtual string LastName { get; set; }
}
}
[NotNull]
[Pattern(Regex = "[A-Za-z0-9]+")]
using NHibernate.Validator.Cfg.Loquacious;
using NHSample5.Domain;
namespace NHSample5.Validation
{
public class DoctorDef : ValidationDef<Doctor>
{
public DoctorDef()
{
Define(x => x.Name).LengthBetween(3, 50);
Define(x => x.Patients).NotNullableAndNotEmpty();
}
}
}
using NHSample5.Domain;
using NHibernate.Validator.Cfg.Loquacious;
namespace NHSample5.Validation
{
public class PatientDef : ValidationDef<Patient>
{
public PatientDef()
{
Define(x => x.FirstName)
.LengthBetween(3, 20)
.WithMessage("طول نام باید بین 3 و 20 کاراکتر باشد");
Define(x => x.LastName)
.LengthBetween(3, 60)
.WithMessage("طول نام خانوادگی باید بین 3 و 60 کاراکتر باشد");
}
}
}
/// <summary>
/// استفاده از اعتبار سنجی ویژه به صورت مستقیم
/// در صورت استفاده از ویژگی‌ها
/// </summary>
static void WithoutConfiguringTheEngine()
{
//تعریف یک بیمار غیر معتبر
var patient1 = new Patient() { FirstName = "V", LastName = "N" };
var ve = new ValidatorEngine();
var invalidValues = ve.Validate(patient1);
if (invalidValues.Length == 0)
{
Console.WriteLine("patient1 is valid.");
}
else
{
Console.WriteLine("patient1 is NOT valid!");
//نمایش پیغام‌های تعریف شده مربوط به هر فیلد
foreach (var invalidValue in invalidValues)
{
Console.WriteLine(
"{0}: {1}",
invalidValue.PropertyName,
invalidValue.Message);
}
}
//تعریف یک بیمار معتبر بر اساس قیودات اعمالی
var patient2 = new Patient() { FirstName = "وحید", LastName = "نصیری" };
if (ve.IsValid(patient2))
{
Console.WriteLine("patient2 is valid.");
}
else
{
Console.WriteLine("patient2 is NOT valid!");
}
}
public static ValidatorEngine GetFluentlyConfiguredEngine()
{
var vtor = new ValidatorEngine();
var configuration = new FluentConfiguration();
configuration
.Register(
Assembly
.GetExecutingAssembly()
.GetTypes()
.Where(t => t.Namespace.Equals("NHSample5.Validation"))
.ValidationDefinitions()
)
.SetDefaultValidatorMode(ValidatorMode.UseExternal);
vtor.Configure(configuration);
return vtor;
}
/// <summary>
/// استفاده از اعتبار سنجی ویژه به صورت مستقیم
/// در صورت تعریف آن‌ها با کمک
/// ValidationDef
/// </summary>
static void WithConfiguringTheEngine()
{
var ve2 = VeConfig.GetFluentlyConfiguredEngine();
var doctor1 = new Doctor() { Name = "S" };
if (ve2.IsValid(doctor1))
{
Console.WriteLine("doctor1 is valid.");
}
else
{
Console.WriteLine("doctor1 is NOT valid!");
}
var patient1 = new Patient() { FirstName = "وحید", LastName = "نصیری" };
if (ve2.IsValid(patient1))
{
Console.WriteLine("patient1 is valid.");
}
else
{
Console.WriteLine("patient1 is NOT valid!");
}
var doctor2 = new Doctor() { Name = "شمس", Patients = new List<Patient>() { patient1 } };
if (ve2.IsValid(doctor2))
{
Console.WriteLine("doctor2 is valid.");
}
else
{
Console.WriteLine("doctor2 is NOT valid!");
}
}
/// <summary>
/// از این کانفیگ برای آغاز سشن فکتوری باید کمک گرفته شود
/// </summary>
/// <param name="nhConfiguration"></param>
public static void BuildIntegratedFluentlyConfiguredEngine(ref Configuration nhConfiguration)
{
var vtor = new ValidatorEngine();
var configuration = new FluentConfiguration();
configuration
.Register(
Assembly
.GetExecutingAssembly()
.GetTypes()
.Where(t => t.Namespace.Equals("NHSample5.Validation"))
.ValidationDefinitions()
)
.SetDefaultValidatorMode(ValidatorMode.UseExternal)
.IntegrateWithNHibernate
.ApplyingDDLConstraints()
.And
.RegisteringListeners();
vtor.Configure(configuration);
//Registering of Listeners and DDL-applying here
ValidatorInitializer.Initialize(nhConfiguration, vtor);
}
SingletonCore()
{
Configuration cfg = DbConfig.GetConfig().BuildConfiguration();
VeConfig.BuildIntegratedFluentlyConfiguredEngine(ref cfg);
//با همان کانفیگ تنظیم شده برای اعتبار سنجی باید کار شروع شود
_sessionFactory = cfg.BuildSessionFactory();
}
/// <summary>
/// استفاده از اعتبار سنجی یکپارچه و خودکار
/// </summary>
static void tryToSaveInvalidPatient()
{
using (Repository<Patient> repo = new Repository<Patient>())
{
try
{
var patient1 = new Patient() { FirstName = "V", LastName = "N" };
repo.Save(patient1);
}
catch (InvalidStateException ex)
{
Console.WriteLine("Validation failed!");
foreach (var invalidValue in ex.GetInvalidValues())
Console.WriteLine(
"{0}: {1}",
invalidValue.PropertyName,
invalidValue.Message);
log4net.LogManager.GetLogger("NHibernate.SQL").Error(ex);
}
}
}
/// <summary>
/// استفاده از اعتبار سنجی یکپارچه و خودکار
/// </summary>
static void tryToSaveValidPatient()
{
using (Repository<Patient> repo = new Repository<Patient>())
{
var patient1 = new Patient() { FirstName = "Vahid", LastName = "Nasiri" };
repo.Save(patient1);
}
}
public static void CreateValidDb()
{
bool script = false;//آیا خروجی در کنسول هم نمایش داده شود
bool export = true;//آیا بر روی دیتابیس هم اجرا شود
bool dropTables = false;//آیا جداول موجود دراپ شوند
Configuration cfg = DbConfig.GetConfig().BuildConfiguration();
VeConfig.BuildIntegratedFluentlyConfiguredEngine(ref cfg);
//با همان کانفیگ تنظیم شده برای اعتبار سنجی باید کار شروع شود
new SchemaExport(cfg).Execute(script, export, dropTables);
}
var personViewModel = {
firstName: ko.observable("Masoud"),
lastName: ko.observable("Pakdel")
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
};<span data-bind='text: fullName'></span>
function Product(name, price) {
this.name = ko.observable(name);
this.price = ko.observable(price);
}this.shoppingCart = ko.observableArray([
new Product("Beer", 10.99),
new Product("Brats", 7.99),
new Product("Buns", 1.49)
]);<table>
<thead><tr>
<th>Product</th>
<th>Price</th>
</tr></thead>
<tbody data-bind='foreach: shoppingCart'>
<tr>
<td data-bind='text: name'></td>
<td data-bind='text: price'></td>
</tr>
</tbody>
</table><button data-bind='click: addProduct'>Add Beer</button>
this.addProduct = function() {
this.shoppingCart.push(new Product("More Beer", 10.99));
};function PersonViewModel()
{
this.firstName = ko.observable("John");
this.lastName = ko.observable("Smith");
this.checkout = function () {
alert("Trying to checkout");
};
this.fullName = ko.computed(function(){
return this.firstName() + " " + this.lastName();
}, this);
this.shoppingCart = ko.observableArray([
new Product("Beer", 10.99),
new Product("Brats", 7.99),
new Product("Buns", 1.49)
]);
this.addProduct = function () {
this.shoppingCart.push(new Product("More beer", 10.99));
};
};this.removeProduct = function(product) {
self.shoppingCart.remove(product);
}; function PersonViewModel() {
var self = this;<tr> <td data-bind='text: name'></td> <td data-bind='text: price'></td> <td><button data-bind='click: $root.removeProduct'>Remove</button></td> </tr>