public class NestedClass { private int _field2; public NestedClass() { _field2 = 12; } } public class MyClass { private int _field1; private NestedClass _nestedClass; public MyClass() { _field1 = 1; _nestedClass = new NestedClass(); } private string GetData() { return "Test"; } }
حالت متداول دسترسی به فیلد خصوصی آن از طریق Reflection، یک چنین شکلی را دارد:
var myClass = new MyClass(); var field1Obj = myClass.GetType().GetField("_field1", BindingFlags.NonPublic | BindingFlags.Instance); if (field1Obj != null) { Console.WriteLine(Convert.ToInt32(field1Obj.GetValue(myClass))); }
var getDataMethod = myClass.GetType().GetMethod("GetData", BindingFlags.NonPublic | BindingFlags.Instance); if (getDataMethod != null) { Console.WriteLine(getDataMethod.Invoke(myClass, null)); }
var nestedClassObj = myClass.GetType().GetField("_nestedClass", BindingFlags.NonPublic | BindingFlags.Instance); if (nestedClassObj != null) { var nestedClassFieldValue = nestedClassObj.GetValue(myClass); var field2Obj = nestedClassFieldValue.GetType() .GetField("_field2", BindingFlags.NonPublic | BindingFlags.Instance); if (field2Obj != null) { Console.WriteLine(Convert.ToInt32(field2Obj.GetValue(nestedClassFieldValue))); } }
چقدر خوب بود اگر میشد بجای این همه کد، نوشت:
myClass._field1 myClass._nestedClass._field2 myClass.GetData()
برای این مشکل راه حلی معرفی شدهاست به نام Dynamic Proxy که در ادامه به معرفی آن خواهیم پرداخت.
معرفی Dynamic Proxy
Dynamic Proxy یکی از مفاهیم AOP است. به این معنا که توسط آن یک محصور کنندهی نامرئی، اطراف یک شیء تشکیل خواهد شد. از این غشای نامرئی عموما جهت مباحث ردیابی اطلاعات، مانند پروکسیهای Entity framework، همانجایی که تشخیص میدهد کدام خاصیت به روز شدهاست یا خیر، استفاده میشود و یا این غشای نامرئی کمک میکند که در حین دسترسی به خاصیت یا متدی، بتوان منطق خاصی را در این بین تزریق کرد. برای مثال فرآیند تکراری logging سیستم را به این غشای نامرئی منتقل کرد و به این ترتیب میتوان به کدهای تمیزتری رسید.
یکی دیگر از کاربردهای این محصور کننده یا غشای نامرئی، ساده سازی مباحث Reflection است که نمونهای از آن در پروژهی EntityFramework.Extended بکار رفتهاست.
در اینجا، کار با محصور سازی نمونهای از کلاس مورد نظر با Dynamic Proxy شروع میشود. سپس کل عملیات Reflection فوق در همین چند سطر ذیل به نحوی کاملا عادی و طبیعی قابل انجام است:
// Accessing a private field dynamic myClassProxy = new DynamicProxy(myClass); dynamic field1 = myClassProxy._field1; Console.WriteLine((int)field1); // Accessing a nested private field dynamic field2 = myClassProxy._nestedClass._field2; Console.WriteLine((int)field2); // Accessing a private method dynamic data = myClassProxy.GetData(); Console.WriteLine((string)data);
بنابراین با استفاده از Dynamic Proxy فوق میتوان به دو مهم دست یافت:
1) ساده سازی و زیبا سازی کدهای کار با Reflection
2) استفادهی ضمنی از مباحث Fast Reflection. در کتابخانهی Dynamic Proxy معرفی شده، دسترسی به خواص و متدها، توسط کدهای IL بهینه سازی شدهاست و در دفعات آتی کار با آنها، دیگر شاهد سربار بالای Reflection نخواهیم بود.
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید:
DynamicProxyTests.zip
نگهداری مرتب تر کدها با افزونه Tidy
RuleFor(x => x.StringField).NotNull().NotEmpty().WithMessage("...");
در مطلب جاری قصد داریم با نحوه ارائه یک UI کاربر پسند برای این منظور آشنا شویم و سؤال مهم هم این است: «چگونه میتوان کار کاربر را در حین وارد کردن تعدادی از برچسبهای مرتبط با یک مطلب سادهتر کرد؟». برای این منظور یکی از راه حلهایی که در بسیاری از سایتها مرسوم شده است، استفاده از افزونههایی مانند jQuery TagIt میباشد که در ادامه با نحوه استفاده از آن در ASP.NET MVC آشنا خواهیم شد.
پیشنیازها:
دریافت افزونه TagIt
همچنین دریافت jQuery UI (افزونه TagIt برای نمایش لیست Auto Complete آیتمها از jQuery UI در پشت صحنه استفاده میکند)
<head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/TagIt/jquery-ui-1.8.23.custom.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/TagIt/tagit-simple-blue.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Content/TagIt/jquery-ui-1.8.23.custom.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Content/TagIt/tagit.js")" type="text/javascript"></script> @RenderSection("JavaScript", required: false) </head>
آشنایی با مدل برنامه
using System.ComponentModel; using System.ComponentModel.DataAnnotations; namespace jQueryMvcSample04.Models { public class BlogPostViewModel { [DisplayName("عنوان"), Required(ErrorMessage = "*")] public string Title { set; get; } [DisplayName("متن"), Required(ErrorMessage = "*")] public string Body { set; get; } /// <summary> /// آرایهای محدود از برچسبهای این مطلب خاص به صورت جیسون که پیشتر ثبت شده است /// هدف استفاده در حین ویرایش مطلب /// </summary> public string InitialTags { set; get; } /// <summary> /// آرایهای جیسونی از تمام برچسبهای موجود در سیستم /// هدف نمایش منوی انتخاب برچسبها از لیست /// </summary> public string TagsSource { set; get; } /// <summary> /// آرایهای از برچسبهای وارد شده توسط کاربر در حین ثبت مطلب /// </summary> [DisplayName("برچسبها"), Required(ErrorMessage = "*")] public string[] Tags { set; get; } public int? Id { set; get; } } }
افزونه TagIt برای نمایش اطلاعات خود به دو منبع داده نیاز دارد:
الف) TagsSource : لیستی است به فرمت JSON، از هر آنچه که در سیستم پیشتر به عنوان یک برچسب ثبت شده است. از این لیست برای نمایش منوی خودکار انتخاب آیتمها استفاده میشود.
ب) InitialTags : لیستی است به فرمت JSON، از تمام برچسبهای مرتبط با یک مطلب. از این اطلاعات در حین ویرایش یک مطلب استفاده خواهد شد.
در این ViewModel یک خاصیت دیگر به شکل آرایه، به نام Tags تعریف شده است که لیست برچسبهای وارد شده توسط کاربر را دریافت خواهد کرد.
معرفی کنترلر برنامه
using System.Web.Mvc; using jQueryMvcSample04.Extensions; using jQueryMvcSample04.Models; namespace jQueryMvcSample04.Controllers { public class HomeController : Controller { [HttpGet] public ActionResult Index(int? id) { //در ابتدای کار تمام تگهای موجود در سیستم از بانک اطلاعاتی دریافت خواهند شد //از این تگها برای تشکیل منوی انتخاب برچسبها استفاده میشود var tagsSource = new[] { "C#", "C++", "C", "ASP.NET", "MVC" }.ToJson(); //همچنین صرفا برچسبهای مطلب جاری که پیشتر ثبت شدهاند نیز باید از بانک اطلاعاتی دریافت گردند //از این برچسبها برای ویرایش یک مطلب موجود استفاده خواهد شد var init = new[] { "ASP.NET" }.ToJson(); var model = new BlogPostViewModel { TagsSource = tagsSource, InitialTags = init, Id = id }; return View(model); } [HttpPost] public ActionResult Index(BlogPostViewModel data) { if (this.ModelState.IsValid) { //todo: save data // ... return RedirectToAction(actionName: "index", controllerName: "home"); } //در صورت بروز خطا مجددا اطلاعات موجود نمایش داده خواهند شد data.TagsSource = new[] { "C#", "C++", "C", "ASP.NET", "MVC" }.ToJson(); data.InitialTags = data.Tags.ToJson(); return View(data); } } }
با توجه به توضیحاتی که ارائه شد، کنترلر برنامه ساختار واضحتری را یافته است. در اولین بار نمایش صفحه، لیست منبع داده تگها و همچنین تگهای مرتبط با یک مطلب (در صورت وجود) به View ارائه خواهند شد.
از همین ViewModel، در عملیات Post نیز استفاده گردیده و اطلاعات دریافت میگردد.
تعریف متد الحاقی ToJson مورد استفاده را نیز در ادامه ملاحظه مینمائید:
using System.Linq; using System.Web.Script.Serialization; namespace jQueryMvcSample04.Extensions { public static class JsonExt { public static string ToJson(this string[] initialTags) { if (initialTags == null || !initialTags.Any()) return "[]"; else return new JavaScriptSerializer().Serialize(initialTags); } } }
و مرحله آخر تعریف View متناظر است
@model jQueryMvcSample04.Models.BlogPostViewModel @{ ViewBag.Title = "Index"; } @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>ثبت مطلب جدید</legend> @Html.HiddenFor(model => model.Id) <div class="editor-label"> @Html.LabelFor(model => model.Title) </div> <div class="editor-field"> @Html.EditorFor(model => model.Title) @Html.ValidationMessageFor(model => model.Title) </div> <div class="editor-label"> @Html.LabelFor(model => model.Body) </div> <div class="editor-field"> @Html.EditorFor(model => model.Body) @Html.ValidationMessageFor(model => model.Body) </div> <div class="editor-label"> @Html.LabelFor(model => model.Tags) </div> <div class="editor-field"> <ul id="tagsList" dir="ltr" name="Tags"> </ul> @Html.ValidationMessageFor(model => model.Tags) </div> <p> <input type="submit" value="Create" /> </p> </fieldset> } @section JavaScript { <script type="text/javascript"> $(document).ready(function () { var tagsSource = @Html.Raw(Model.TagsSource); $('#tagsList').tagit({ tagSource: tagsSource, select: true, triggerKeys: ['enter', 'comma', 'tab'], initialTags: @Html.Raw(Model.InitialTags) }); }); </script> }
الف) برای نمایش افزونه TagIt از یک ul با id مساوی tagsList استفاده شده است.
ب) خواص اضافی موجود در ViewModel که اطلاعات JSON ایی مورد نیاز را بازگشت میدهند در قسمت اسکریپت صفحه مورد استفاده قرار گرفتهاند. در اینجا نیاز است از Html.Raw استفاده شود تا اطلاعات مرتبط با JSON اشتباها encode نشده و قابل استفاده باشند.
دریافت مثال و پروژه کامل این قسمت
jQueryMvcSample04.zip
dotnet new api -n DotNetGraphQLClient
https://localhost:5003;http://localhost:5004
{ "Logging": { "LogLevel": { "Default": "Warning" } }, "GraphQLURI": "https://localhost:5001/graphql", "AllowedHosts": "*" }
dotnet add package GraphQL.Client
public void ConfigureServices(IServiceCollection services) { services.AddScoped(x => new GraphQL.Client.GraphQLClient(Configuration["GraphQLURI"])); ... }
public class OwnerConsumer { private readonly GraphQL.Client.GraphQLClient _client; public OwnerConsumer(GraphQL.Client.GraphQLClient client) { _client = client; } }
public void ConfigureServices(IServiceCollection services) { services.AddScoped(x => new GraphQL.Client.GraphQLClient(Configuration["GraphQLURI"])); services.AddScoped<OwnerConsumer>(); ... }
public enum TypeOfAccount { Cash, Savings, Expense, Income }
public class Account { public Guid Id { get; set; } public TypeOfAccount Type { get; set; } public string Description { get; set; } }
public class Owner { public Guid Id { get; set; } public string Name { get; set; } public string Address { get; set; } public ICollection<Account> Accounts { get; set; } }
public class OwnerInput { public string Name { get; set; } public string Address { get; set; } }
public async Task<List<Owner>> GetAllOwners() { var query = new GraphQLRequest { Query = @" query ownersQuery{ owners { id name address accounts { id type description } } }" }; var response = await _client.PostAsync(query); return response.GetDataFieldAs<List<Owner>>("owners"); }
[Route("api/owners")] public class OwnerController: Controller { private readonly OwnerConsumer _consumer; public OwnerController(OwnerConsumer consumer) { _consumer = consumer; } [HttpGet] public async Task<IActionResult> Get() { var owners = await _consumer.GetAllOwners(); return Ok(owners); } }
public async Task<Owner> CreateOwner(OwnerInput ownerToCreate) { var query = new GraphQLRequest { Query = @" mutation($owner: ownerInput!){ createOwner(owner: $owner){ id, name, address } }", Variables = new { owner = ownerToCreate } }; var response = await _client.PostAsync(query); return response.GetDataFieldAs<Owner>("createOwner"); }
[HttpPost] public async Task<IActionResult> PostItem([FromBody]OwnerInput model) { var result = await _consumer.CreateOwner(model); return Json(result); }
- یک کلاینت ASP.NET Core را برای فراخوانی GraphQL API آماده سازی کنیم.
- چه کتابخانههایی مورد نیاز است که میتوانند به ما در انجام فرآیند فراخوانی GraphQL API کمک کنند.
- ایجاد کردن queryها و mutationها در یک کلاینت ASP.NET Core.
متدهای کمکی مفید در پروژه های asp.net mvc
public static class StringHelpers { public static string ToSeoUrl(this string url) { // make the url lowercase string encodedUrl = (url ?? "").ToLower(); // replace & with and encodedUrl = Regex.Replace(encodedUrl, @"\&+", "and"); // remove characters encodedUrl = encodedUrl.Replace("'", ""); // remove invalid characters encodedUrl = Regex.Replace(encodedUrl, @"[^a-z0-9-\u0600-\u06FF]", "-"); // remove duplicates encodedUrl = Regex.Replace(encodedUrl, @"-+", "-"); // trim leading & trailing characters encodedUrl = encodedUrl.Trim('-'); return encodedUrl; } }
بعد از آمدن نسخهی سوم ASP.NET MVC مکانیسمی به نام Remote Validation به آن اضافه شد که کارش اعتبارسنجی از راه دور بود. فرض کنید نیاز است در یک فرم، قبل از اینکه کل فرم به سمت سرور ارسال شود، مقداری بررسی شده و اعتبارسنجی آن انجام گیرد و این اعتبارسنجی چیزی نیست که بتوان سمت کاربر و بدون فرستاده شدن مقداری به سمت سرور صورت گیرد. نمونه بارز این مسئله صفحه عضویت اکثر سایتهایی هست که روزانه داریم با آنها کار میکنیم. فیلد نام کاربری توسط شما پر شده و بعد از بیرون آمدن از آن فیلد، سریعا مشخص میشود که آیا این نام کاربری قابل استفاده برای شما هست یا خیر. بهصورت معمول برای انجام این کار باید با جاوا اسکریپت، مدیریتی روی فیلد مربوطه انجام دهیم. مثلا با بیرون آمدن فوکوس از روی فیلد، با Ajax نام کاربری وارد شده را به سمت سرور بفرستیم، چک کنیم و بعد از اینکه جواب برگشت بررسی کنیم که الان آیا این نام کاربری قبلا گرفته شده یا نه.
انجام این کار بهراحتی با مزینکردن خصوصیت (Property) مربوطه موجود در مدل برنامه به Attribute یا ویژگی Remote و داشتن یک Action در Controller مربوطه که کارش بررسی وجود یوزرنیم هست امکان پذیر است. ادامه بحث را با مثال همراه میکنم.
به عنوان مثال در سیستمی که قرار هست محصولات ما را ثبت کند، باید بیایم و قبل از اینکه محصول جدید به ثبت برسد این عملیات چککردن را انجام دهیم تا کالای تکراری وارد سیستم نشود. شناسه اصلی که برای هر محصول وجود دارد بارکد هست و ما آن را میخواهیم مورد بررسی قرار دهیم.
مدل برنامه
public class ProductModel { public int Id { get; set; } [Display(Name = "نام کالا")] [Required(ErrorMessage = "{0} یک فیلد اجباری است و باید آن را وارد کنید.")] [StringLength(50, ErrorMessage = "طول {0} باید کمتر از {1} کاراکتر باشد.")] public string Name { get; set; } [Display(Name = "قیمت")] [Required(ErrorMessage = "{0} یک فیلد اجباری است و باید آن را وارد کنید.")] [DataType(DataType.Currency)] public double Price { get; set; } [Display(Name = "بارکد")] [Required(ErrorMessage = "{0} یک فیلد اجباری است و باید آن را وارد کنید.")] [StringLength(50, ErrorMessage = "طول {0} باید کمتر از {1} کاراکتر باشد.")] [Remote("IsProductExist", "Product", HttpMethod = "POST", ErrorMessage = "این بارکد از قبل در سیستم وجود دارد.")] public string Barcode { get; set; } }
همونطور که میبینید خصوصیت Barcode را مزین کردیم به ویژگی Remote. این ویژگی دارای ورودیهای خاص خودش هست. وارد کردن نام اکشن و کنترلر مربوطه برای انجام این چککردن از مهمترین قسمتهای اصلی هست. چیزهایی دیگهای هم هست که میتوانیم آنها را مقداردهی کنیم. مثل HttpMethod، ErrorMessage و یا AdditionFields. HttpMethod که همان طریقهی ارسال درخواست به سرور هست. ErrorMessage هم همان خطایی هست که در زمان رخداد قرار است نشان داده شود. AdditionFields هم خصوصیتی را مشخص میکند که ما میخوایم بههمراه فیلد مربوطه به سمت سرور بفرستیم. مثلا میتونیم بههمراه بارکد، نام کالا را هم برای بررسیهای مورد نیازمان بفرستیم.
کنترلر برنامه
[HttpPost] [OutputCache(Location = OutputCacheLocation.None, NoStore = true)] public ActionResult IsProductExist(string barcode) { if (barcode == "123456789") return Json(false); // اگر محصول وجود داشت return Json(true); }
در اینجا به نمایش قسمتی از کنترلر برنامه میپردازیم. اکشنی که مربوط میشود به چککردن مقدارهای لازم و در پایان آن یک خروجی Json را برمیگردانیم که مقدار true یا false دارد. در حقیقت مقدار را به این صورت برمیگردانیم که اگر مقدار ورودی در پایگاه داده وجود دارد، false را برمیگرداند و اگر وجود نداشت true. همینطور آمدیم از کش شدن درخواستهایی که با Ajax آمده با ویژگی OutputCache جلوگیری کردیم.