public class AA { public virtual ICollection<CC> Cs { get; set; } } public class BB { public virtual ICollection<CC> Cs { get; set; } } public class CC { public virtual AA AA { get; set; } public virtual long AAId { get; set; } public virtual BB BB { get; set; } public virtual long BBId { get; set; } public virtual string Value{get;set} }
- چرا مسیریابی نشانه ای؟
- فعال سازی مسیریابی نشانه ای
- پارامترهای اختیاری URI و مقادیر پیش فرض
- پیشوند مسیر ها
- مسیر پیش فرض
- محدودیتهای مسیر ها
- محدودیتهای سفارشی
- نام مسیر ها
- ناحیهها (Areas)
چرا مسیریابی نشانه ای
- {productId:int}/{productTitle}
- {username}
- {username}/catalogs/{catalogId:int}/{catalogTitle}
routes.MapRoute( name: "ProductPage", url: "{productId}/{productTitle}", defaults: new { controller = "Products", action = "Show" }, constraints: new { productId = "\\d+" } );
[Route("{productId:int}/{productTitle}")] public ActionResult Show(int productId) { ... }
فعال سازی Attribute Routing
public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapMvcAttributeRoutes(); } }
public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapMvcAttributeRoutes(); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); }
پارامترهای اختیاری URI و مقادیر پیش فرض
public class BooksController : Controller { // eg: /books // eg: /books/1430210079 [Route("books/{isbn?}")] public ActionResult View(string isbn) { if (!String.IsNullOrEmpty(isbn)) { return View("OneBook", GetBook(isbn)); } return View("AllBooks", GetBooks()); } // eg: /books/lang // eg: /books/lang/en // eg: /books/lang/he [Route("books/lang/{lang=en}")] public ActionResult ViewByLanguage(string lang) { return View("OneBook", GetBooksByLanguage(lang)); } }
پیشوند مسیرها (Route Prefixes)
public class ReviewsController : Controller { // eg: /reviews [Route("reviews")] public ActionResult Index() { ... } // eg: /reviews/5 [Route("reviews/{reviewId}")] public ActionResult Show(int reviewId) { ... } // eg: /reviews/5/edit [Route("reviews/{reviewId}/edit")] public ActionResult Edit(int reviewId) { ... } }
[RoutePrefix("reviews")] public class ReviewsController : Controller { // eg.: /reviews [Route] public ActionResult Index() { ... } // eg.: /reviews/5 [Route("{reviewId}")] public ActionResult Show(int reviewId) { ... } // eg.: /reviews/5/edit [Route("{reviewId}/edit")] public ActionResult Edit(int reviewId) { ... } }
[RoutePrefix("reviews")] public class ReviewsController : Controller { // eg.: /spotlight-review [Route("~/spotlight-review")] public ActionResult ShowSpotlight() { ... } ... }
مسیر پیش فرض
[RoutePrefix("promotions")] [Route("{action=index}")] public class ReviewsController : Controller { // eg.: /promotions public ActionResult Index() { ... } // eg.: /promotions/archive public ActionResult Archive() { ... } // eg.: /promotions/new public ActionResult New() { ... } // eg.: /promotions/edit/5 [Route("edit/{promoId:int}")] public ActionResult Edit(int promoId) { ... } }
محدودیتهای مسیر ها
// eg: /users/5 [Route("users/{id:int}"] public ActionResult GetUserById(int id) { ... } // eg: users/ken [Route("users/{name}"] public ActionResult GetUserByName(string name) { ... }
مثال | توضیحات | محدودیت |
{x:alpha} | کاراکترهای الفبای لاتین را تطبیق (match) میدهد (a-z, A-Z). | alpha |
{x:bool} | یک مقدار منطقی را تطبیق میدهد. | bool |
{x:datetime} | یک مقدار DateTime را تطبیق میدهد. | datetime |
{x:decimal} | یک مقدار پولی را تطبیق میدهد. | decimal |
{x:double} | یک مقدار اعشاری 64 بیتی را تطبیق میدهد. | double |
{x:float} | یک مقدار اعشاری 32 بیتی را تطبیق میدهد. | float |
{x:guid} | یک مقدار GUID را تطبیق میدهد. | guid |
{x:int} | یک مقدار 32 بیتی integer را تطبیق میدهد. | int |
{(x:length(6} {(x:length(1,20} | رشته ای با طول تعیین شده را تطبیق میدهد. | length |
{x:long} | یک مقدار 64 بیتی integer را تطبیق میدهد. | long |
{(x:max(10} | یک مقدار integer با حداکثر مجاز را تطبیق میدهد. | max |
{(x:maxlength(10} | رشته ای با حداکثر طول تعیین شده را تطبیق میدهد. | maxlength |
{(x:min(10} | مقداری integer با حداقل مقدار تعیین شده را تطبیق میدهد. | min |
{(x:minlength(10} | رشته ای با حداقل طول تعیین شده را تطبیق میدهد. | minlength |
{(x:range(10,50} | مقداری integer در بازه تعریف شده را تطبیق میدهد. | range |
{(${x:regex(^\d{3}-\d{3}-\d{4} | یک عبارت با قاعده را تطبیق میدهد. | regex |
// eg: /users/5 // but not /users/10000000000 because it is larger than int.MaxValue, // and not /users/0 because of the min(1) constraint. [Route("users/{id:int:min(1)}")] public ActionResult GetUserById(int id) { ... }
// eg: /greetings/bye // and /greetings because of the Optional modifier, // but not /greetings/see-you-tomorrow because of the maxlength(3) constraint. [Route("greetings/{message:maxlength(3)?}")] public ActionResult Greet(string message) { ... }
محدودیتهای سفارشی
public class ValuesConstraint : IRouteConstraint { private readonly string[] validOptions; public ValuesConstraint(string options) { validOptions = options.Split('|'); } public bool Match(HttpContextBase httpContext, Route route, string parameterName, RouteValueDictionary values, RouteDirection routeDirection) { object value; if (values.TryGetValue(parameterName, out value) && value != null) { return validOptions.Contains(value.ToString(), StringComparer.OrdinalIgnoreCase); } return false; } }
public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); var constraintsResolver = new DefaultInlineConstraintResolver(); constraintsResolver.ConstraintMap.Add("values", typeof(ValuesConstraint)); routes.MapMvcAttributeRoutes(constraintsResolver); } }
public class TemperatureController : Controller { // eg: temp/celsius and /temp/fahrenheit but not /temp/kelvin [Route("temp/{scale:values(celsius|fahrenheit)}")] public ActionResult Show(string scale) { return Content("scale is " + scale); } }
نام مسیر ها
[Route("menu", Name = "mainmenu")] public ActionResult MainMenu() { ... }
<a href="@Url.RouteUrl("mainmenu")">Main menu</a>
ناحیهها (Areas)
[RouteArea("Admin")] [RoutePrefix("menu")] [Route("{action}")] public class MenuController : Controller { // eg: /admin/menu/login public ActionResult Login() { ... } // eg: /admin/menu/show-options [Route("show-options")] public ActionResult Options() { ... } // eg: /stats [Route("~/stats")] public ActionResult Stats() { ... } }
Url.Action("Options", "Menu", new { Area = "Admin" })
[RouteArea("BackOffice", AreaPrefix = "back-office")]
public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapMvcAttributeRoutes(); AreaRegistration.RegisterAllAreas(); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); }
<Button Text="This is a test button" />
Tabbed Page نیز چندین Tab را نمایش میدهد که هر Tab خود یک Content Page است. Carousel Page نیز همانند Tabbed Page است، ولی با Swipe کردن به چپ و راست میشود بین صفحات چرخید. هر دوی اینها Multi Page محسوب میشوند. MasterDetail نیز این امکان را میدهد که از بغل منویی برای Swipe کردن وجود داشته باشد. در نهایت Navigation Page محتوای یک Content Page را نمایش میدهد، ولی در بالای آن Navigation Bar دارد؛ شامل دکمه بازگشت به صفحه قبل و Title صفحه جاری و ...
علاوه بر Page ها، Layoutها نیز وجود دارند. برای مثال، Stack Layout برای چینش خطی (افقی یا عمودی) استفاده میشود. Grid برای ساختار شبکهای استفاده میشود و Flex Layout عملکردی مشابه با Flex در وب دارد.
برای مثال، در صورتی که بخواهید چهار دکمه را هم اندازه با هم نمایش دهید، دارید:
<Grid> <Button Text="1" Grid.Row="0" Grid.Column="0" /> <Button Text="2" Grid.Row="0" Grid.Column="1" /> <Button Text="3" Grid.Row="1" Grid.Column="0" /> <Button Text="4" Grid.Row="1" Grid.Column="1" /> </Grid>
در نهایت کنترلها را داریم. برای مثال Label، Button و ... هر کدام از اینها نقشی را ایفا میکنند و امکاناتی دارند.
پس Page داریم، داخل Page از Layout استفاده میکنیم برای چینش کلی صفحه و در نهایت از کنترلهای Image، ListView، Button و ... استفاده میکنیم تا ظاهر فرم تکمیل شود.
هر Page علاوه بر ظاهر خود، دارای یک منطق نیز هست. منطق، کاری است که آن فرم انجام میدهد. برای مثال فرم لاگین میتواند یک Stack Layout عمودی باشد، شامل یک Entry برای گرفتن نام کاربری، یک Entry برای گرفتن رمز عبور، که IsPassword آن True است و در نهایت یک دکمه که برای انجام عمل لاگین است.
در قسمت منطق که با CSharp نوشته میشود، ما یک Property از جنس string برای نگه داشتن نام کاربری داریم. یک Property از جنس string برای نگه داشتن رمز عبور و یک Command که عمل لاگین را انجام دهد. Property اول با نام UserName به Text آن Entry اول وصل میشود (به اصطلاح Bind میشود) و همین طور Property دوم با نام Password نیز به Text آن Entry دوم که IsPassword اش True بود وصل میشود و در نهایت Command لاگین به دکمه لاگین وصل میشود.
برای زدن ظاهر فرم لاگین، در پروژه XamApp روی فولدر Views راست کلیک نموده و از منوی Add به New Item رفته و Content Page را میزنیم. نام آن را LoginView.xaml میگذاریم که داخل تگ Content Page خواهیم داشت:
<StackLayout Orientation="Vertical"> <Entry Placeholder="User name" Text="{Binding UserName}" /> <Entry IsPassword="True" Placeholder="Password" Text="{Binding Password}" /> <Button Command="{Binding LoginCommand}" Text="Login" /> </StackLayout>
برای زدن منطق، در پروژه XamApp روی فولدر ViewModels راست کلیک نموده و از منوی Add گزینه Class را انتخاب کرده و نام آن را LoginViewModel.cs میگذاریم که در داخل آن خواهیم داشت:
public class LoginViewModel : BitViewModelBase { public string UserName { get; set; } public string Password { get; set; } public BitDelegateCommand LoginCommand { get; set; } public LoginViewModel() { LoginCommand = new BitDelegateCommand(Login); } public async Task Login() { // Login implementation ... } }
BitDelegateCommand در این مثال، وظیفه اجرای متد Login را به عهده دارد و آن را اجرا میکند؛ زمانیکه کاربر روی دکمه لاگین Click یا Tap کند.
برای این که Content Page جدید، یعنی LoginView به همراه منطق آن، یعنی LoginViewModel در برنامه نشان داده شوند، لازم است با Navigation به آن صفحه برویم. برای این کار، ابتدا باید این زوج را رجیستر کنیم. برای این کار به متد RegisterTypes در کلاس App رفته (زیر فایل App.xaml یک فایل App.xaml.cs است) و خط زیر را به آن اضافه میکنیم:
containerRegistry.RegisterForNav<LoginView, LoginViewModel>("Login");
حال در متد OnInitializedAsync در چند خط بالاتر داریم:
await NavigationService.NavigateAsync("/Login", animated: false);
این سطر باعث میشود که Navigation Service که همان طور که از اسمش بر میآید، کارش Navigation بین صفحات است، صفحه لاگین را باز کند.
هم اکنون پروژه XamApp بروز شده و دارای این مثال است. در صورتی که آن را الآن Clone کنید و یا در صورتی که از قبل گرفته بودید، دستور git pull را برای گرفتن آخرین تغییرات بزنید، میتوانید این کدها رو داخل پروژه داشته باشید.
برنامه را اجرا کنید و در متد Login، یک Break point بگذارید. سپس برنامه را اجرا کنید. User Name و Password را پر کنید و بر روی دکمه لاگین بزنید. خواهید دید که متد لاگین اجرا میشود و User Name و Password با مقادیری که نوشته بودید، پر شدهاند.
هنوز موارد زیادی برای آموزش باقی مانده، اما با این توضیحات میتوانید در محیط توسعهای که آماده کردهاید، فرمهایی ساده را پیاده سازی کنید و برایشان منطقهایی ساده را بنویسید و به برنامه بگویید که در ابتدای اجرا آن، صفحه را برای شما باز کند. در قسمت بعدی، به صورت عمیقتر وارد UI میشویم.
در این مطلب نحوهی یکپارچه سازی Windows Authentication دومینهای ویندوزی را با IdentityServer بررسی میکنیم.
کار با تامین کنندههای هویت خارجی
اغلب کاربران، دارای اکانت ثبت شدهای در جای دیگری نیز هستند و شاید آنچنان نسبت به ایجاد اکانت جدیدی در IDP ما رضایت نداشته باشند. برای چنین حالتی، امکان یکپارچه سازی IdentityServer با انواع و اقسام IDPهای دیگر نیز پیش بینی شدهاست. در اینجا تمام اینها، روشهای مختلفی برای ورود به سیستم، توسط یک کاربر هستند. کاربر ممکن است توسط اکانت خود در شبکهی ویندوزی به سیستم وارد شود و یا توسط اکانت خود در گوگل، اما در نهایت از دیدگاه سیستم ما، یک کاربر مشخص بیشتر نیست.
نگاهی به شیوهی پشتیبانی از تامین کنندههای هویت خارجی توسط Quick Start UI
Quick Start UI ای را که در «قسمت چهارم - نصب و راه اندازی IdentityServer» به IDP اضافه کردیم، دارای کدهای کار با تامین کنندههای هویت خارجی نیز میباشد. برای بررسی آن، کنترلر DNT.IDP\Controllers\Account\ExternalController.cs را باز کنید:
[HttpGet] public async Task<IActionResult> Challenge(string provider, string returnUrl) [HttpGet] public async Task<IActionResult> Callback()
در اکشن متد Callback، اطلاعات کاربر از کوکی رمزنگاری شدهی متد Challenge استخراج میشود و بر اساس آن هویت کاربر در سطح IDP شکل میگیرد.
فعالسازی Windows Authentication برای ورود به IDP
در ادامه میخواهیم برنامه را جهت استفادهی از اکانت ویندوزی کاربران جهت ورود به IDP تنظیم کنیم. برای این منظور باید نکات مطلب «فعالسازی Windows Authentication در برنامههای ASP.NET Core 2.0» را پیشتر مطالعه کرده باشید.
پس از فعالسازی Windows Authentication در برنامه، اگر برنامهی IDP را توسط IIS و یا IIS Express و یا HttpSys اجرا کنید، دکمهی جدید Windows را در قسمت External Login مشاهده خواهید کرد:
یک نکته: برچسب این دکمه را در حالت استفادهی از مشتقات IIS، به صورت زیر میتوان تغییر داد:
namespace DNT.IDP { public class Startup { public void ConfigureServices(IServiceCollection services) { services.Configure<IISOptions>(iis => { iis.AuthenticationDisplayName = "Windows Account"; iis.AutomaticAuthentication = false; });
اتصال کاربر وارد شدهی از یک تامین کنندهی هویت خارجی به کاربران بانک اطلاعاتی برنامه
سازندهی کنترلر DNT.IDP\Controllers\Account\ExternalController.cs نیز همانند کنترلر Account که آنرا در قسمت قبل تغییر دادیم، از TestUserStore استفاده میکند:
public ExternalController( IIdentityServerInteractionService interaction, IClientStore clientStore, IEventService events, TestUserStore users = null) { _users = users ?? new TestUserStore(TestUsers.Users); _interaction = interaction; _clientStore = clientStore; _events = events; }
private readonly IUsersService _usersService; public ExternalController( // ... IUsersService usersService) { // ... _usersService = usersService; }
الف) در متد FindUserFromExternalProvider
سطر قدیمی
var user = _users.FindByExternalProvider(provider, providerUserId);
var user = await _usersService.GetUserByProviderAsync(provider, providerUserId);
private async Task<(User user, string provider, string providerUserId, IEnumerable<Claim> claims)> FindUserFromExternalProvider(AuthenticateResult result)
private TestUser AutoProvisionUser(string provider, string providerUserId, IEnumerable<Claim> claims) { var user = _users.AutoProvisionUser(provider, providerUserId, claims.ToList()); return user; }
مفهوم «Provisioning a user» در اینجا به معنای درخواست از کاربر، جهت ورود اطلاعاتی مانند نام و نام خانوادگی او است که پیشتر صفحهی ثبت کاربر جدید را برای این منظور در قسمت قبل ایجاد کردهایم و از آن میشود در اینجا استفادهی مجدد کرد. بنابراین در ادامه، گردش کاری ورود کاربر از طریق تامین کنندهی هویت خارجی را به نحوی اصلاح میکنیم که کاربر جدید، ابتدا به صفحهی ثبت نام وارد شود و اطلاعات تکمیلی خود را وارد کند؛ سپس به صورت خودکار به متد Callback بازگشته و ادامهی مراحل را طی نماید:
در اکشن متد نمایش صفحهی ثبت نام کاربر جدید، متد RegisterUser تنها آدرس بازگشت به صفحهی قبلی را دریافت میکند:
[HttpGet] public IActionResult RegisterUser(string returnUrl)
namespace DNT.IDP.Controllers.UserRegistration { public class RegistrationInputModel { public string ReturnUrl { get; set; } public string Provider { get; set; } public string ProviderUserId { get; set; } public bool IsProvisioningFromExternal => !string.IsNullOrWhiteSpace(Provider); } }
namespace DNT.IDP.Controllers.Account { [SecurityHeaders] [AllowAnonymous] public class ExternalController : Controller { public async Task<IActionResult> Callback() { var result = await HttpContext.AuthenticateAsync(IdentityServer4.IdentityServerConstants.ExternalCookieAuthenticationScheme); var returnUrl = result.Properties.Items["returnUrl"] ?? "~/"; var (user, provider, providerUserId, claims) = await FindUserFromExternalProvider(result); if (user == null) { // user = AutoProvisionUser(provider, providerUserId, claims); var returnUrlAfterRegistration = Url.Action("Callback", new { returnUrl = returnUrl }); var continueWithUrl = Url.Action("RegisterUser", "UserRegistration" , new { returnUrl = returnUrlAfterRegistration, provider = provider, providerUserId = providerUserId }); return Redirect(continueWithUrl); }
returnUrl ارسالی به اکشن متد RegisterUser، به همین اکشن متد جاری اشاره میکند. یعنی کاربر پس از تکمیل اطلاعات و اینبار نال نبودن user او، گردش کاری جاری را ادامه خواهد داد.
در ادامه نیاز است امضای متد نمایش صفحهی ثبت نام را نیز بر این اساس اصلاح کنیم:
namespace DNT.IDP.Controllers.UserRegistration { public class UserRegistrationController : Controller { [HttpGet] public IActionResult RegisterUser(RegistrationInputModel registrationInputModel) { var vm = new RegisterUserViewModel { ReturnUrl = registrationInputModel.ReturnUrl, Provider = registrationInputModel.Provider, ProviderUserId = registrationInputModel.ProviderUserId }; return View(vm); }
namespace DNT.IDP.Controllers.UserRegistration { public class RegisterUserViewModel : RegistrationInputModel {
اکنون نیاز است RegisterUser.cshtml را اصلاح کنیم:
- ابتدا دو فیلد مخفی دیگر Provider و ProviderUserId را نیز به این فرم اضافه میکنیم؛ از این جهت که در حین postback به سمت سرور به مقادیر آنها نیاز داریم:
<inputtype="hidden"asp-for="ReturnUrl"/> <inputtype="hidden"asp-for="Provider"/> <inputtype="hidden"asp-for="ProviderUserId"/>
@if (!Model.IsProvisioningFromExternal) { <div> <label asp-for="Password"></label> <input type="password" placeholder="Password" asp-for="Password" autocomplete="off"> </div> }
پس از آن نیاز است اطلاعات اکانت خارجی این کاربر را در حین postback و ارسال اطلاعات به اکشن متد RegisterUser، ثبت کنیم:
namespace DNT.IDP.Controllers.UserRegistration { public class UserRegistrationController : Controller { [HttpPost] [ValidateAntiForgeryToken] public async Task<IActionResult> RegisterUser(RegisterUserViewModel model) { // ... if (model.IsProvisioningFromExternal) { userToCreate.UserLogins.Add(new UserLogin { LoginProvider = model.Provider, ProviderKey = model.ProviderUserId }); } // add it through the repository await _usersService.AddUserAsync(userToCreate); // ... } }
همچنین در ادامهی این اکشن متد، کار لاگین خودکار کاربر نیز انجام میشود. با توجه به اینکه پس از ثبت اطلاعات کاربر نیاز است مجددا گردش کاری اکشن متد Callback طی شود، این لاگین خودکار را نیز برای حالت ورود از طریق تامین کنندهی خارجی، غیرفعال میکنیم:
if (!model.IsProvisioningFromExternal) { // log the user in // issue authentication cookie with subject ID and username var props = new AuthenticationProperties { IsPersistent = false, ExpiresUtc = DateTimeOffset.UtcNow.Add(AccountOptions.RememberMeLoginDuration) }; await HttpContext.SignInAsync(userToCreate.SubjectId, userToCreate.Username, props); }
بررسی ورود به سیستم توسط دکمهی External Login -> Windows
پس از این تغییرات، اکنون در حین ورود به سیستم (تصویر ابتدای بحث در قسمت فعالسازی اعتبارسنجی ویندوزی)، گزینهی External Login -> Windows را انتخاب میکنیم. بلافاصله به صفحهی ثبتنام کاربر هدایت خواهیم شد:
همانطور که مشاهده میکنید، IDP اکانت ویندوزی جاری را تشخیص داده و فعال کردهاست. همچنین در اینجا خبری از ورود کلمهی عبور هم نیست.
پس از تکمیل این فرم، بلافاصله کار ثبت اطلاعات کاربر و هدایت خودکار به برنامهی MVC Client انجام میشود.
در ادامه از برنامهی کلاینت logout کنید. اکنون در صفحهی login مجددا بر روی دکمهی Windows کلیک نمائید. اینبار بدون پرسیدن سؤالی، لاگین شده و وارد برنامهی کلاینت خواهید شد؛ چون پیشتر کار اتصال اکانت ویندوزی به اکانتی در سمت IDP انجام شدهاست.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید.
برای اجرای برنامه:
- ابتدا به پوشهی src\WebApi\ImageGallery.WebApi.WebApp وارد شده و dotnet_run.bat آنرا اجرا کنید تا WebAPI برنامه راه اندازی شود.
- سپس به پوشهی src\IDP\DNT.IDP مراجعه کرده و و dotnet_run.bat آنرا اجرا کنید تا برنامهی IDP راه اندازی شود.
- در آخر به پوشهی src\MvcClient\ImageGallery.MvcClient.WebApp وارد شده و dotnet_run.bat آنرا اجرا کنید تا MVC Client راه اندازی شود.
اکنون که هر سه برنامه در حال اجرا هستند، مرورگر را گشوده و مسیر https://localhost:5001 را درخواست کنید. در صفحهی login نام کاربری را User 1 و کلمهی عبور آنرا password وارد کنید.
یک نکته: برای آزمایش برنامه جهت فعالسازی Windows Authentication بهتر است برنامهی IDP را توسط IIS Express اجرا کنید و یا اگر از IIS Express استفاده نمیکنید، نیاز است UseHttpSys فایل program.cs را مطابق توضیحات «یک نکتهی تکمیلی: UseHttpSys و استفادهی از HTTPS» فعال کنید.
که اینجا دکمهها از سمت راست به چپ، عملیات افزودن، عدم انتخاب، ویرایش و حذف را انجام میدهند. کدهای HTML این پنل را در ادامه مشاهده میکنید:
<div id="CrudPanel" class="row treeview-panel" > <div class="col-lg-7 pull-right"> <input type="text" id="txtLocationTitle" class="form-control" /> </div> <div class="col-lg-5 pull-left" style="text-align: left;"> <button data-toggle="tooltip" data-placement="left" title="افزودن" id="btnAddLocation" class="btn btn-sm btn-success"> <i class="fa fa-plus"></i> </button> <button data-toggle="tooltip" data-placement="left" title="عدم انتخاب" id="btnUnSelect" class="btn btn-sm btn-info"> <i class="fa fa-square-o"></i> </button> <button data-toggle="tooltip" data-placement="left" title="ویرایش" id="btnEditLocation" class="btn btn-sm btn-warning"> <i class="fa fa-pencil"></i> </button> <button data-toggle="tooltip" data-placement="left" title="حذف" id="btnDeleteLocation" class="btn btn-sm btn-danger"> <i class="fa fa-times"></i> </button> </div> </div>
و قطعه کد ذیل مربوط به پنل ویرایش است که در ابتدای کار کلاس hide به آن انتساب داده شده و پنهان میشود:
<div id="EditPanel" class="row edit hide treeview-panel"> <div class="col-lg-7 pull-right"> <input type="text" id="txtLocationEditTitle" class="form-control" /> </div> <div class="col-lg-5 pull-left" style="text-align: left"> <input type="button" value="ویرایش" id="btnEditPanelLocation" data-code="" data-parentId="" class="btn btn-sm btn-success" /> <input type="button" value="انصراف" id="btnCancle" class="btn btn-sm btn-info" /> </div> </div>
در آخر این تکه کد نیز مربوط به KendoUI TreeView است:
<div class="col-lg-6 k-rtl treeview-style"> @(Html.Kendo() .TreeView() .Name("treeview") .DataTextField("Title") .DragAndDrop(false) .DataSource(dataSource => dataSource .Model(model => model.Id("Id")) .Read(read => read.Action(MVC.Admin.Location.ActionNames.GetAllAssetGroupTree, MVC.Admin.Location.Name))) ) </div>
یک نکته
- کلاس k-rtl مربوط به خود treeview میباشد و با این کلاس، درخت ما راست به چپ میشود.
در ادامه cssهای مربوط به کلاسهای treeview-style ،hide و treeview-panel بررسی خواهند شد:
.treeview-style { min-height: 86px; max-height: 300px; overflow: scroll; overflow-x: hidden; position: relative; } .treeview-panel { background-color: #eee; padding: 25px 0 25px 0; } .hide { display: none; }
تا اینجای مقاله، کدهای Html و Css موجود را بررسی کردیم. حالا سراغ قسمت اصلی خواهیم رفت. یعنی عملیات CRUD.
لازم به ذکر است در ابتدای قسمت script باید این چند خط کد نوشته شود:
var treeview = null; $(window).load(function () { treeview = $("#treeview").data("kendoTreeView"); });
در اینجا بعد از بارگذاری کامل صفحه، درخت مورد نظر ما ساخته خواهد شد و میتوان به متغیر treeview در تمام قسمت script دسترسی داشت.
پیاده سازی عملیات افزودن:
$(document).on('click', '#btnAddLocation', function () { var title = $('#txtLocationTitle').val(); var selectedNodeId = null; var selectedNode = treeview.select(); if (selectedNode.length == 0) { selectedNode = null; } else { selectedNodeId = treeview.dataItem(selectedNode).id;// گرفتن آی دی گره انتخاب شده } $.ajax({ url: '@Url.Action(MVC.Admin.Location.CreateByAjax())', type: 'POST', data: { Title: title, ParentId: selectedNodeId }, success: function (data) { debugger; showMessage(data.message, data.notificationType); if (data.result) treeview.dataSource.read(); }, error: function () { showMessage('لطفا مجددا تلاش نمایید', 'warning'); } }); });
توضیحات: مقدار گره جدید را خوانده و در متغیر title قرار میدهیم. گره انتخاب شده را توسط این خط
var selectedNode = treeview.select();
می گیریم و سپس در ادامه بررسی خواهیم کرد تا اگر گرهای انتخاب نشده باشد، به کاربر پیغامی را نشان دهد؛ در غیر این صورت توسط ajax، مقادیر مورد نظر، به اکشن ما در LocationController ارسال میشوند:
[HttpPost] public virtual ActionResult CreateByAjax(AddLocationViewModel locationViewModel) { if (ModelState.IsNotValid()) return JsonResult(false, "عنوان نباید خالی و یا کمتر از دو کاراکتر باشد.", NotificationType.Error); var result = _locationService.Add(locationViewModel);//سرویس مورد نظر برای اضافه کردن به دیتابیس switch (result) { case AddStatus.AddSuccessful: _uow.SaveChanges(); return JsonResult(true, Messages.SaveSuccessfull, NotificationType.Success); case AddStatus.Faild: return JsonResult(false, Messages.SaveFailed, NotificationType.Error); case AddStatus.Exists: return JsonResult(false, Messages.DataExists, NotificationType.Warning); default: return JsonResult(false, Messages.SaveFailed, NotificationType.Error); } }
public virtual JsonResult JsonResult(bool result, string message, string notificationType) { return Json(new { result = result, message = message, notificationType = notificationType }, JsonRequestBehavior.AllowGet); }
اکشن JsonResult که مقادیر نتیجه، پیغام و نوع اطلاع رسانی را میگیرد و یک آبجکت از نوع json را به تابع success ایجکس، ارسال میکند.
public class AddLocationViewModel { [DisplayName("عنوان")] [Required(ErrorMessage ="لطفا عنوان گروه را وارد نمایید"),MinLength(2,ErrorMessage ="طول عنوان خیلی کوتاه میباشد ")] public string Title { get; set; } [DisplayName("گروه پدر")] public Guid? ParentId { get; set; } }
این کلاس viewModel ما میباشد.
public enum AddStatus { AddSuccessful, Faild, Exists }
و این مورد هم کلاس AddStatus از نوع enum.
public class Messages { #region Fields public const string SaveSuccessfull = "اطلاعات با موفقیت ذخیره شد"; public const string SaveFailed = "خطا در ثبت اطلاعات"; public const string DeleteMessage = "کابر گرامی ، آیا از حذف کردن این رکورد مطمئن هستید ؟"; public const string DeleteSuccessfull = "اطلاعات با موفقیت حذف شد"; public const string DeleteFailed = "خطا در حذف اطلاعات ، لطفا مجددا تلاش نمایید"; public const string DeleteHasInclude = "کاربر گرامی ، رکورد مورد نظر هم اکنون در بانک اطلاعاتی سیستم در حال استفاده توسط منابع دیگر میباشد"; public const string NotFoundData = "اطلاعات یافت نشد"; public const string NoAttachmentSelect = "تصویری انتخاب نشده است"; public const string DataExists = "اطلاعات وارد شده در بانک اطلاعاتی موجود میباشد"; public const string DeletedRowHasIncluded = "کاربر گرامی ، رکوردی که قصد حذف آن را دارید هم اکنون در بانک اطلاعاتی سیستم ، توسط سایر بخشها در حال استفاده میباشد"; #endregion }
و این موارد هم مقادیر ثابت فیلدهای مورد استفادهی ما در کلاس Message.
پیاده سازی عملیات حذف
به طور اختصار، عملیات حذف را توضیح میدهم تا به قسمت اصلی مقاله یعنی ویرایش بپردازیم:
$(document).on('click', '#btnDeleteLocation', function () { var selectedNode = treeview.select(); var currentNode = treeview.dataItem(selectedNode); if (selectedNode.length == 0) { showMessage('گزینه ای انتخاب نشده است. لطفا یک گزینه انتخاب نمایید', 'warning'); } else { var selectedNodeId = treeview.dataItem(selectedNode).id; if (currentNode.hasChildren) { var title = 'کاربر گرامی ، با حذف شدن این گره، تمام زیر شاخههای آن حذف میشود. آیا مطمئن هستید ؟ '; DeleteConfirm(selectedNodeId, '@Url.Action(MVC.Admin.Location.DeleteByAjax())', title); } else { $.ajax({ url: '@Url.Action(MVC.Admin.Location.DeleteByAjax())', type: 'POST', data: { id: selectedNodeId }, success: function (data) { debugger; showMessage(data.message, data.notificationType); if (data.result) treeview.remove(selectedNode); }, error: function () { showMessage('لطفا مجددا تلاش نمایید', 'warning'); } }); } } });
این مورد نیز همانند عملیات افزودن عمل میکند. یعنی ابتدا چک میکند که آیا گرهای انتخاب شده است یا خیر؟ و اگر گره انتخابی ما دارای فرزند باشد، به کاربر پیغامی را نشان میدهد و میگوید «گره مورد نظر، دارای فرزند است. آیا مایل به حذف تمام فرزندان آن هستید؟» مانند تصویر زیر:
در نهایت چه گره انتخابی دارای فرزند باشد و چه نباشد، به یک مسیر مشترک ارسال میشوند:
public virtual ActionResult DeleteByAjax(Guid id) { var result = _locationService.Delete(id); switch (result) { case DeleteStatus.Successfull: _uow.SaveChanges(); return DeleteJsonResult(true, Messages.DeleteSuccessfull, NotificationType.Success); case DeleteStatus.NotFound: return DeleteJsonResult(false, Messages.NotFoundData, NotificationType.Error); case DeleteStatus.Failed: return DeleteJsonResult(false, Messages.DeleteFailed, NotificationType.Error); case DeleteStatus.ThisRowHasIncluded: return DeleteJsonResult(false, Messages.DeletedRowHasIncluded, NotificationType.Warning); default: return DeleteJsonResult(false, Messages.DeleteFailed, NotificationType.Error); } }
در سرویس مورد نظر ما یعنی Delete، اگه گرهای دارای فرزند باشد، تمام فرزندان آن را حذف میکند. حتی فرزندان فرزندان آن را:
public DeleteStatus Delete(Guid id) { var model = GetAsModel(id); if (model == null) return DeleteStatus.NotFound; if (!CanDelete(model)) return DeleteStatus.ThisRowHasIncluded; _uow.MarkAsSoftDelete(model, _userManager.GetCurrentUserId()); if (model.Children.Any()) DeleteChildren(model); return DeleteStatus.Successfull; }
private void DeleteChildren(Location model) { foreach (var item in model.Children) { _uow.MarkAsSoftDelete(item, _userManager.GetCurrentUserId()); if (item.Children.Any()) DeleteChildren(item); } }
public class Location:BaseEntity,ISoftDelete { public string Title { get; set; } public Location Parent { get; set; } public Guid? ParentId { get; set; } public bool IsDeleted { get; set; } public virtual ICollection<Location> Children { get; set; } }
و این هم مدل Location که سمت سرور از مدل استفاده میکنیم.
پیاده سازی عملیات ویرایش
حالا به قسمت اصلی مقاله رسیدیم. در اینجا قرار است گرهای را انتخاب نماییم و با زدن دکمه ویرایش و باز شدن پنل آن، آن را ویرایش کنیم. با زدن دکمه ویرایش، کدهای زیر اجرا میشوند:
// Open Edit Panel $(document).on('click', '#btnEditLocation', function () { debugger; var selectedNode = treeview.select(); var currentNode = treeview.dataItem(selectedNode);// با استفاده از این خط، گره انتخاب شده جاری را میگیریم. if (selectedNode.length == 0) { //این شرط به ما میگوید اگر گره ای انتخاب نشده بود پیغامی به کاربر نمایش بده showMessage('گزینه ای انتخاب نشده است. لطفا یک گزینه انتخاب نمایید', 'warning'); } else { var selectedNodeCode = treeview.dataItem(selectedNode).Code; var selectedNodeTitle = treeview.dataItem(selectedNode).Title; var selectedNodeParentId = treeview.dataItem(selectedNode).ParentId; // آی دی یا کد، عنوان و آی دی پدر گره انتخاب شده را با استفاده از این سه خط در اختیار میگیریم $('#CrudPanel').toggleClass('hide'); //المنت کرادپنل که در حال حاضر کاربر آن را میبیند، با این خط کد، پنهان میشود $('#EditPanel').toggleClass('hide'); //المنت ادیت پنل که در حال حاضر از دید کاربر پنهان است، قابل نمایش میشود $("#txtLocationEditTitle").val(selectedNodeTitle); //عنوان گره ای که میخواهیم آن را ویرایش کنیم در تکست باکس مورد نظر قرار میگیرد $("#txtLocationEditTitle").focusTextToEnd(); // با استفاده از این پلاگین، کرسر ماوس در انتهای مقدار دیفالت تکست باکس قرار میگیرد $("#btnEditPanelLocation").attr('data-code', selectedNodeCode); $("#btnEditPanelLocation").attr('data-parentId', selectedNodeParentId == null ? '' : selectedNodeParentId); //مقادیر پرنت آی دی و کد را در دیتا اتریبیوتهای موجود در المنت خودمان قرار میدهیم // Disable clicking in treeview $("#treeview").children().bind('click', function () { return false; }); } }); (function ($) { $.fn.focusTextToEnd = function () { this.focus(); var $thisVal = this.val(); this.val('').val($thisVal); return this; } }(jQuery));
کد زیر باعث میشود تا زمانیکه پنل ویرایش باز است، کاربر نتواند هیچ کلیکی را در عناصر داخل درخت ما، داشته باشد.
$("#treeview").children().bind('click', function () { return false; });
و در نهایت با زدن دکمه ویرایش، پنل ویرایش ما به صورت زیر باز میشود:
همانطور که در تصویر بالا مشاهده میکنید، با انتخاب ساختمان مرکزی و زدن دکمه ویرایش، پنل CRUD ما پنهان و پنل ویرایش ظاهر میگردد. همچنین عنوان گره انتخابی به عنوان پیش فرض تکست باکس ما تنظیم میشود و کاربر نمیتواند گره دیگری را انتخاب کند؛ به شرط آنکه این پنل ویرایش بسته شود.
با تغییر عنوان تکست باکس و زدن دکمهی ویرایش، رویداد زیر رخ میدهد:
// Edit tree node $(document).on('click', '#btnEditPanelLocation', function () { debugger; var code = $("#btnEditPanelLocation").attr('data-code'); var parentId = $("#btnEditPanelLocation").attr('data-parentId'); var title = $("#txtLocationEditTitle").val().trim(); $.ajax({ url: '@Url.Action(MVC.Admin.Location.EditByAjax())', type: 'POST', data: { Code: code, Title: title, ParentId: parentId.length === 0 ? null : parentId }, success: function (data) { debugger; showMessage(data.message, data.notificationType); if (data.result) { treeview.dataSource.read(); CloseEditPanel(); } }, error: function () { showMessage('لطفا مجددا تلاش نمایید', 'warning'); } }); });
[HttpPost] public virtual ActionResult EditByAjax(EditLocationViewModel editLocationViewModel) { if (ModelState.IsNotValid()) return JsonResult(false,"عنوان نباید خالی و یا کمتر از دو کاراکتر باشد.", NotificationType.Error); var result = _locationService.Edit(editLocationViewModel); switch (result) { case EditStatus.Successful: _uow.SaveChanges(); return JsonResult(true, Messages.SaveSuccessfull, NotificationType.Success); case EditStatus.NotFound: return JsonResult(false, Messages.NotFoundData, NotificationType.Error); case EditStatus.Faild: return JsonResult(false, Messages.SaveFailed, NotificationType.Error); case EditStatus.Exists: return JsonResult(false, Messages.DataExists, NotificationType.Warning); default: return JsonResult(false, Messages.SaveFailed, NotificationType.Error); } }
تابع CloseEditPanel بعد از اتمام ویرایش هر گره و یا با زدن دکمه انصراف در شکل بالا، فراخوانی میشود که کد آن به شکل زیر است:
function CloseEditPanel() { $('#CrudPanel').toggleClass('hide'); //پنل کراد ما که در حال حاضر از دید کاربر پنهان است با این خط ظاهر میگردد $('#EditPanel').toggleClass('hide'); //پنل ویرایش ما که در حال حاضر کاربر آن را میبیند، پنهان میشود از دید کاربر $("#txtLocationEditTitle").val(''); //مقدار تکست باکس خالی میشود $("#btnEditPanelLocation").attr('data-code', ''); $("#btnEditPanelLocation").attr('data-parentId', ''); //دیتا اتریبیوتهای ما که مقادیر کد و آی دی والد در آن قرار گرفته نیز خالی میشود // Enable clicking in treeview $("#treeview").children().unbind('click').bind('click', function () { return true; }); //اگر یادتان باشد با یک خط کد به کاربر اجازه ندادیم که با باز شدن پنل ویرایش، گره دیگری را انتخاب نمایی. حالا این خط کد عکس کد قبلیست و به کاربر اجازه میدهد در المنت مورد نظر کلیک کند }
// Cancle edit Node tree $(document).on('click', '#btnCancle', function () { CloseEditPanel(); });
$(document).on('click', '#btnUnSelect', function () { //رویداد عدم انتخاب treeview.select(null); });
- ایجاد یک پروژهی جدید ASP.NET Core در VS 2017
- تنظیمات یک برنامهی ASP.NET Core خالی برای اجرای یک برنامهی Angular CLI
- تنظیمات فایل آغازین یک برنامهی ASP.NET Core جهت ارائهی برنامههای Angular
- ایجاد ساختار اولیهی برنامهی Angular CLI در داخل پروژهی جاری: این مورد را تاکنون انجام دادهایم و تکمیل کردهایم. بنابراین تنها کاری که نیاز است انجام شود، cut و paste محتوای پوشهی angular-template-driven-forms-lab (پروژهی این سری) به ریشهی پروژهی ASP.NET Core است.
- تنظیم محل خروجی نهایی Angular CLI به پوشهی wwwroot
- روش اول و یا دوم اجرای برنامههای مبتنی بر ASP.NET Core و Angular CLI
البته سورس کامل تمام این تنظیمات را از انتهای بحث نیز میتوانید دریافت کنید.
ضمن اینکه هیچ نیازی هم به استفاده از VS 2017 نیست و هر دوی برنامهی Angular و ASP.NET Core را میتوان توسط VSCode به خوبی مدیریت و اجرا کرد.
ایجاد ساختار مقدماتی سرویس ارسال اطلاعات به سرور
در برنامههای Angular مرسوم است جهت کاهش مسئولیتهای یک کلاس و امکان استفادهی مجدد از کدها، منطق ارسال اطلاعات به سرور، به درون کلاس یک سرویس منتقل شود و سپس این سرویس به کلاسهای کامپوننتها، برای مثال یک فرم ثبت اطلاعات، برای ارسال و یا دریافت اطلاعات، تزریق گردد. به همین جهت، ابتدا ساختار ابتدایی این سرویس و تنظیمات مرتبط با آنرا انجام میدهیم.
ابتدا از طریق خط فرمان به پوشهی ریشهی برنامه وارد شده (جائیکه فایل Startup.cs قرار دارد) و سپس دستور ذیل را اجرا میکنیم:
>ng g s employee/FormPoster -m employee.module
installing service create src\app\employee\form-poster.service.spec.ts create src\app\employee\form-poster.service.ts update src\app\employee\employee.module.ts
ساختار ابتدایی این سرویس را نیز به نحو ذیل تغییر میدهیم:
import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import { Employee } from './employee'; @Injectable() export class FormPosterService { constructor(private http:Http) { } postEmployeeForm(employee: Employee) { } }
چون این کلاس از ماژول توکار Http استفاده میکند، نیاز است این ماژول را نیز به قسمت imports فایل src\app\app.module.ts اضافه کنیم:
import { HttpModule } from "@angular/http"; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, EmployeeModule, AppRoutingModule ]
import { FormPosterService } from "../form-poster.service"; export class EmployeeRegisterComponent implements OnInit { constructor(private formPoster: FormPosterService) {} }
در ادامه برای آزمایش برنامه، به ریشهی پروژه وارد شده و دو پنجرهی کنسول مجزا را باز کنید. در اولی، دستورات:
>npm install >ng build --watch
>dotnet restore >dotnet watch run
به همین جهت برای آزمایش ابتدایی آن، آدرس http://localhost:5000 را در مرورگر باز کنید. برگهی developer tools مرورگر را نیز بررسی کنید تا خطایی در آن ظاهر نشده باشد. برای مثال اگر فراموش کرده باشید تا HttpModule را به app.module اضافه کنید، خطای no provider for HttpModule را مشاهده خواهید کرد.
مدیریت رخداد submit فرم در Angular
تا اینجا کار برپایی تنظیمات اولیهی کار با سرویس Http را انجام دادیم. مرحلهی بعد مدیریت رخداد submit فرم است. به همین جهت فایل src\app\employee\employee-register\employee-register.component.html را گشوده و سپس رخدادگردان submit را به فرم آن اضافه کنید:
<form #form="ngForm" (submit)="submitForm(form)" novalidate>
export class EmployeeRegisterComponent implements OnInit { submitForm(form: NgForm) { console.log(this.model); console.log(form.value); } }
در همین حال اگر بر روی دکمهی ok کلیک کنیم، چنین خروجی را در کنسول developer مروگر میتوان مشاهده کرد:
اولین مورد، محتوای this.model است و دومی محتوای form.value را گزارش کردهاست. همانطور که مشاهده میکنید، مقدار form.value بسیار شبیه است به وهلهای از مدلی که در سطح کلاس تعریف کردهایم و این مقدار همواره توسط Angular نگهداری و مدیریت میشود. بنابراین حتما الزامی نیست تا مدلی را جهت کار با فرمهای مبتنی بر قالبها به صورت جداگانهای تهیه کرد. توسط شیء form نیز میتوان به تمام اطلاعات فیلدها دسترسی یافت.
تکمیل سرویس ارسال اطلاعات به سرور
در ادامه میخواهیم اطلاعات مدل فرم را به سرور ارسال کنیم. برای این منظور سرویس FormPoster را به صورت ذیل تکمیل میکنیم:
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 { Employee } from "./employee"; @Injectable() export class FormPosterService { private baseUrl = "api/employee"; constructor(private http: Http) {} private extractData(res: Response) { const body = res.json(); return body.fields || {}; } private handleError(error: Response): Observable<any> { console.error("observable error: ", error); return Observable.throw(error.statusText); } postEmployeeForm(employee: Employee): Observable<Employee> { const body = JSON.stringify(employee); const headers = new Headers({ "Content-Type": "application/json" }); const options = new RequestOptions({ headers: headers }); return this.http .post(this.baseUrl, body, options) .map(this.extractData) .catch(this.handleError); } }
در متد postEmployeeForm، ابتدا توسط JSON.stringify محتوای شیء کارمند encode میشود. البته متد post اینکار را به صورت توکار نیز میتواند مدیریت کند. سپس ذکر هدر مناسب در اینجا الزامی است تا در سمت سرور بتوانیم اطلاعات دریافتی را به شیء متناظری نگاشت کنیم. در غیراینصورت model binder سمت سرور نمیداند که چه نوع فرمتی را دریافت کردهاست و چه نوع decoding را باید انجام دهد.
در قسمت map، کار بررسی اطلاعات دریافتی از سرور را انجام خواهیم داد و اگر در این بین خطایی وجود داشت، توسط متد handleError در کنسول developer مرورگر نمایش داده میشود.
خروجی متد postEmployeeForm یک Observable است. بنابراین تا زمانیکه یک subscriber نداشته باشد، اجرا نخواهد شد. به همین جهت به کلاس EmployeeRegisterComponent مراجعه کرده و متد submitForm را به نحو ذیل تکمیل میکنیم:
submitForm(form: NgForm) { console.log(this.model); console.log(form.value); // validate form this.validatePrimaryLanguage(this.model.primaryLanguage); if (this.hasPrimaryLanguageError) { return; } this.formPoster .postEmployeeForm(this.model) .subscribe( data => console.log("success: ", data), err => console.log("error: ", err) ); }
یک نکته: اگر علاقمند باشید تا ساختار واقعی شیء NgForm را مشاهده کنید، در ابتدای متد فوق، console.log(form.form) را فراخوانی کنید و سپس شیء حاصل را در کنسول developer مرورگر بررسی نمائید.
تکمیل Web API برنامهی ASP.NET Core جهت دریافت اطلاعات از کلاینتها
در ابتدای سرویس formPoster، یک چنین تعریفی را داریم:
export class FormPosterService { private baseUrl = "api/employee";
ابتدا مدل زیر را به پروژهی ASP.NET Core جاری، معادل نمونهی تایپاسکریپتی سمت کلاینت آن اضافه میکنیم. البته در اینجا یک Id نیز اضافه شدهاست:
namespace AngularTemplateDrivenFormsLab.Models { public class Employee { public int Id { set; get; } public string FirstName { get; set; } public string LastName { get; set; } public bool IsFullTime { get; set; } public string PaymentType { get; set; } public string PrimaryLanguage { get; set; } } }
سپس کنترلر جدید EmployeeController را با محتوای ذیل اضافه خواهیم کرد:
using Microsoft.AspNetCore.Mvc; using AngularTemplateDrivenFormsLab.Models; namespace AngularTemplateDrivenFormsLab.Controllers { [Route("api/[controller]")] public class EmployeeController : Controller { public IActionResult Post([FromBody] Employee model) { //todo: save model model.Id = 100; return Created("", new { fields = model }); } } }
در اینجا پس از ثبت فرضی مدل، Id آن به همراه اطلاعات مدل، به نحوی که ملاحظه میکنید، بازگشت داده شدهاست. این نوع خروجی، یک چنین JSON ایی را تولید میکند:
{"fields":{"id":100,"firstName":"Vahid","lastName":"N","isFullTime":true,"paymentType":"FullTime","primaryLanguage":"Persian"}}
private extractData(res: Response) { const body = res.json(); return body.fields || {}; }
نمایش success به همراه شیءایی که از سمت سرور دریافت شدهاست؛ که حاصل اجرای سطر ذیل در متد submitForm است:
data => console.log("success: ", data)
بارگذاری اطلاعات drop down از سرور
تا اینجا اطلاعات drop down نمایش داده شده از یک آرایهی مشخص سمت کلاینت تامین شدند. در ادامه قصد داریم تا آنها را از سرور دریافت کنیم. به همین جهت اکشن متد ذیل را به کنترلر سمت سرور برنامه اضافه کنید:
[HttpGet("/api/[controller]/[action]")] public IActionResult Languages() { string[] languages = { "Persian", "English", "Spanish", "Other" }; return Ok(languages); }
پس از آن در سمت کلاینت این تغییرات نیاز هستند:
ابتدا به سرویس FormPosterService دو متد ذیل را اضافه میکنیم که کار آنها دریافت و پردازش اطلاعات از api/employee/languages سمت سرور هستند:
private extractLanguages(res: Response) { const body = res.json(); return body || {}; } getLanguages(): Observable<any> { return this.http .get(`${this.baseUrl}/languages`) .map(this.extractLanguages) .catch(this.handleError); }
پس از آن دو تغییر ذیل را نیاز است به EmployeeRegisterComponent اعمال کنیم:
languages = []; ngOnInit() { this.formPoster .getLanguages() .subscribe( data => this.languages = data, err => console.log("get error: ", err) ); }
مشکل! ممکن است مدت زمانی طول بکشد تا این اطلاعات از سمت سرور دریافت شوند. در این حالت میتوان به شکل زیر در فایل employee-register.component.html فرم را تا زمان پر شدن دراپ داون آن مخفی کرد:
<h3 *ngIf="languages.length == 0">Loading...</h3> <div class="container" *ngIf="languages.length > 0">
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: angular-template-driven-forms-lab-05.zip
برای اجرای آن فرض بر این است که پیشتر Angular CLI را نصب کردهاید. سپس به ریشهی پروژه وارد شده و دو پنجرهی کنسول مجزا را باز کنید. در اولی دستورات:
>npm install >ng build --watch
>dotnet restore >dotnet watch run
در این قسمت قصد داریم اطلاعات بازگشتی از لایه سرویس برنامه را کش کنیم؛ اما نمیخواهیم مدام کدهای مرتبط با کش کردن اطلاعات را در مکانهای مختلف لایه سرویس پراکنده کنیم. میخواهیم یک ویژگی یا Attribute سفارشی را تهیه کرده (مثلا به نام CacheMethod) و به متد یا متدهایی خاص اعمال کنیم. سپس برنامه، در زمان اجرا، بر اساس این ویژگیها، خروجیهای متدهای تزئین شده با ویژگی CacheMethod را کش کند.
در اینجا نیز از ترکیب StructureMap و DynamicProxy پروژه Castle، برای رسیدن به این مقصود استفاده خواهیم کرد. به کمک StructureMap میتوان در زمان وهله سازی کلاسها، آنها را به کمک متدی به نام EnrichWith توسط یک محصور کننده دلخواه، مزین یا غنی سازی کرد. این مزین کننده را جهت دخالت در فراخوانیهای متدها، یک DynamicProxy درنظر میگیریم. با پیاده سازی اینترفیس IInterceptor کتابخانه DynamicProxy مورد استفاده و تحت کنترل قرار دادن نحوه و زمان فراخوانی متدهای لایه سرویس، یکی از کارهایی را که میتوان انجام داد، کش کردن نتایج است که در ادامه به جزئیات آن خواهیم پرداخت.
پیشنیازها
ابتدا یک برنامه جدید کنسول را آغاز کنید. تنظیمات آنرا از حالت Client profile به Full تغییر دهید.
سپس همانند قسمتهای قبل، ارجاعات لازم را به StructureMap و Castle.Core نیز اضافه نمائید:
PM> Install-Package structuremap PM> Install-Package Castle.Core
از این جهت که از HttpRuntime.Cache قصد داریم استفاده کنیم. HttpRuntime.Cache در برنامههای کنسول نیز کار میکند. در این حالت از حافظه سیستم استفاده خواهد کرد و در پروژههای وب از کش IIS بهره میبرد.
ویژگی CacheMethod مورد استفاده
using System; namespace AOP02.Core { [AttributeUsage(AttributeTargets.Method)] public class CacheMethodAttribute : Attribute { public CacheMethodAttribute() { // مقدار پیش فرض SecondsToCache = 10; } public double SecondsToCache { get; set; } } }
در ویژگی CacheMethod، خاصیت SecondsToCache بیانگر مدت زمان کش شدن نتیجه متد خواهد بود.
ساختار لایه سرویس برنامه
using System; using System.Threading; using AOP02.Core; namespace AOP02.Services { public interface IMyService { string GetLongRunningResult(string input); } public class MyService : IMyService { [CacheMethod(SecondsToCache = 60)] public string GetLongRunningResult(string input) { Thread.Sleep(5000); // simulate a long running process return string.Format("Result of '{0}' returned at {1}", input, DateTime.Now); } } }
تدارک یک CacheInterceptor
using System; using System.Web; using Castle.DynamicProxy; namespace AOP02.Core { public class CacheInterceptor : IInterceptor { private static object lockObject = new object(); public void Intercept(IInvocation invocation) { cacheMethod(invocation); } private static void cacheMethod(IInvocation invocation) { var cacheMethodAttribute = getCacheMethodAttribute(invocation); if (cacheMethodAttribute == null) { // متد جاری توسط ویژگی کش شدن مزین نشده است // بنابراین آنرا اجرا کرده و کار را خاتمه میدهیم invocation.Proceed(); return; } // دراینجا مدت زمان کش شدن متد از ویژگی کش دریافت میشود var cacheDuration = ((CacheMethodAttribute)cacheMethodAttribute).SecondsToCache; // برای ذخیره سازی اطلاعات در کش نیاز است یک کلید منحصربفرد را // بر اساس نام متد و پارامترهای ارسالی به آن تهیه کنیم var cacheKey = getCacheKey(invocation); var cache = HttpRuntime.Cache; var cachedResult = cache.Get(cacheKey); if (cachedResult != null) { // اگر نتیجه بر اساس کلید تشکیل شده در کش موجود بود // همان را بازگشت میدهیم invocation.ReturnValue = cachedResult; } else { lock (lockObject) { // در غیر اینصورت ابتدا متد را اجرا کرده invocation.Proceed(); if (invocation.ReturnValue == null) return; // سپس نتیجه آنرا کش میکنیم cache.Insert(key: cacheKey, value: invocation.ReturnValue, dependencies: null, absoluteExpiration: DateTime.Now.AddSeconds(cacheDuration), slidingExpiration: TimeSpan.Zero); } } } private static Attribute getCacheMethodAttribute(IInvocation invocation) { var methodInfo = invocation.MethodInvocationTarget; if (methodInfo == null) { methodInfo = invocation.Method; } return Attribute.GetCustomAttribute(methodInfo, typeof(CacheMethodAttribute), true); } private static string getCacheKey(IInvocation invocation) { var cacheKey = invocation.Method.Name; foreach (var argument in invocation.Arguments) { cacheKey += ":" + argument; } // todo: بهتر است هش این کلید طولانی بازگشت داده شود // کار کردن با هش سریعتر خواهد بود return cacheKey; } } }
توضیحات ریز قسمتهای مختلف آن به صورت کامنت، جهت درک بهتر عملیات، ذکر شدهاند.
اتصال Interceptor به سیستم
خوب! تا اینجای کار صرفا تعاریف اولیه تدارک دیده شدهاند. در ادامه نیاز است تا DI و DynamicProxy را از وجود آنها مطلع کنیم.
using System; using AOP02.Core; using AOP02.Services; using Castle.DynamicProxy; using StructureMap; namespace AOP02 { class Program { static void Main(string[] args) { ObjectFactory.Initialize(x => { var dynamicProxy = new ProxyGenerator(); x.For<IMyService>() .EnrichAllWith(myTypeInterface => dynamicProxy.CreateInterfaceProxyWithTarget(myTypeInterface, new CacheInterceptor())) .Use<MyService>(); }); var myService = ObjectFactory.GetInstance<IMyService>(); Console.WriteLine(myService.GetLongRunningResult("Test")); Console.WriteLine(myService.GetLongRunningResult("Test")); } } }
حال اگر برنامه را اجرا کنید یک چنین خروجی قابل مشاهده خواهد بود:
Result of 'Test' returned at 2013/04/09 07:19:43 Result of 'Test' returned at 2013/04/09 07:19:43
از این پیاده سازی میشود به عنوان کش سطح دوم ORMها نیز استفاده کرد (صرفنظر از نوع ORM در حال استفاده).
دریافت مثال کامل این قسمت
AOP02.zip
public class Startup
{
public void ConfigureServices(IServiceCollections services)
{
services.AddMvc(); // موجب فعال شدن «صفحات» و کنترلرها میشود
}
public void Configure(IApplicationBuilder app)
{
app.UseMvc();
}
}
@page @{ var message = "Hello, World!"; } <html> <body> <p>@message</p> </body> </html>
URL متناظر | نام فایل و مسیر آن |
/ یا /Index | /Pages/Index.cshtml |
/Contact | /Pages/Store/Contact.cshtml |
/Store/Contact | /Pages/Store/Contact.cshtml |
using System.ComponentModel.DataAnnotations; namespace MyApp { public class Contact { [Required] public string Name { get; set; } [Required] public string Email { get; set; } } }
@page @using MyApp @using Microsoft.AspNetCore.Mvc.RazorPages @addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers" @inject ApplicationDbContext Db @functions { [BindProperty] public Contact Contact { get; set; } public async Task<IActionResult> OnPostAsync() { if (ModelState.IsValid) { Db.Contacts.Add(Contact); await Db.SaveChangesAsync(); return RedirectToPage(); } return Page(); } } <html> <body> <p>فرم زیر را پر کنید تا در اسرع وقت، کارشناسان ما با شما بگیرند</p> <div asp-validation-summary="All"></div> <form method="POST"> <div>Name: <input asp-for="Contact.Name" /></div> <div>Email: <input asp-for="Contact.Email" /></div> <input type="submit" /> </form> </body> </html>
- اگر خطایی نبود، اطلاعات ذخیره شده و به صفحۀ دیگر ریدایرکت میشود.
- درغیراینصورت، صفحه را دوباره بههمراه خطاهای اعتبار سنجی نمایش میدهد.
- اگر اطلاعات موفقتآمیز وارد شوند، آنگاه متد هندلر OnPostAsync، هلپر RedirctToPage را برای برگرداندن نمونهای از RedirectToPageResult فراخوانی میکند. این یک نوع جدید بازگشتی برای اکشن متد است که شبیه RedirectToAction یا RedirectToRoute است؛ با این تفاوت که مخصوص صفحات طراحی شده است.
@page @using MyApp @using MyApp.Pages @using Microsoft.AspNetCore.Mvc.RazorPages @addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers" @model ContactModel <html> <body> <p>فرم زیر را پر کنید تا در اسرع وقت، کارشناسان ما با شما بگیرند </p> <div asp-validation-summary="All"></div> <form method="POST"> <div>Name: <input asp-for="Contact.Name" /></div> <div>Email: <input asp-for="Contact.Email" /></div> <input type="submit" /> </form> </body> </html>
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; namespace MyApp.Pages { public class ContactModel : PageModel { public ContactModel(ApplicationDbContext db) { Db = db; } [BindProperty] public Contact Contact { get; set; } private ApplicationDbContext Db { get; } public async Task<IActionResult> OnPostAsync() { if (ModelState.IsValid) { Db.Contacts.Add(Contact); await Db.SaveChangesAsync(); return RedirectToPage(); } return Page(); } } }
EF Code First #3
public class KalaType { [Key, Column(Order = 0)] public int kalaID { get; set; } [Key, Column(Order = 1)] public int typeID { get; set; } ... }
using System.Data.Entity; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Schema; using System.ComponentModel.Design; using System.ComponentModel.DataAnnotations.Resources;
Compiler Error Message: CS0246: The type or namespace name 'Column' could not be found (are you missing a using directive or an assembly reference?)
public class Student { public int Id { get; set; } public string Name { get; set; } public string Family { get; set; } public DateTime Birthdate { get; set; } public string Tel { get; set; } public string CellPhone { get; set; } [Email] public string Email { get; set; } }
public class StudentViewModel { public string Name { get; set; } public string Family { get; set; } public string Email { get; set; } }
public ActionResult Index() { var model = db.Students.ToList(); AutoMapper.Mapper.CreateMap<Student,StudentViewModel>(); var studentViewModel = AutoMapper.Mapper.Map<List<Student>, IEnumerable<StudentViewModel>>(model); return View(studentViewModel); }
AutoMapper.Mapper.CreateMap<Student,StudentViewModel>();
An exception of type 'AutoMapper.AutoMapperMappingException' occurred in AutoMapper.dll but was not handled in user code