اشتراکها
طراحی آیکن جدید برای VSCode
تغییر کدهای T4 برای حالت فرمهای Modal به صورت زیر است :
حالا تنها مشکلم نحوه نمایش گروه محصولات داخل DropDownList است.
<# if (!mvcHost.IsContentPage) { #> <# } } #> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> ×</button> <#= mvcHost.ViewDataType.Name #> </div> @using (Html.BeginForm()) { <div class="modal-body"> @Html.ValidationSummary(true, null, new { @class = "alert alert-error alert-block" }) <fieldset class="form-horizontal"> <legend><#= mvcHost.ViewDataType.Name #></legend> <# foreach (ModelProperty property in GetModelProperties(mvcHost.ViewDataType)) { if (!property.IsPrimaryKey && !property.IsReadOnly && property.Scaffold) { #> <div class="control-group"> <# if (property.IsForeignKey) { #> @Html.LabelFor(model => model.<#= property.Name #>, "<#= property.AssociationName #>",new {@class="control-label"}) <# } else { #> @Html.LabelFor(model => model.<#= property.Name #>,new {@class="control-label"}) <# } #> <div class="controls"> <# if (property.IsForeignKey) { #> @Html.DropDownList("<#= property.Name #>", String.Empty) <# } else { #> @Html.EditorFor(model => model.<#= property.Name #>) <# } #> @Html.ValidationMessageFor(model => model.<#= property.Name #>,null,new{@class="help-inline"}) </div> </div> <# } } #> </fieldset> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> ارسال</button> <button class="btn" data-dismiss="modal" aria-hidden="true"> انصراف</button> </div> }
حالا تنها مشکلم نحوه نمایش گروه محصولات داخل DropDownList است.
اشتراکها
کتابخانه GreedyNav
A responsive navigation menu that stacks items into a dropdown menu when they overflow Demo
هرچند کار کردن با کلاسها و اینترفیسهای strongly typed سادهتر است، اما گاهی از اوقات نیاز است تا با نوع object کار کرد. به علاوه حتی در حین کار کردن با کلاسها و اینترفیسها هم نیاز است تا نوع خاصی از کلاسهای مشتق شده را جهت فراخوانی متدی ویژه، بررسی کرد. به همین جهت مفهوم «pattern matching» به C# 7 اضافه شدهاست تا بتوان با سلسله مراتب اشیاء، سادهتر کار کرد. برای این منظور اپراتور is و عبارت switch، با الگوهای const ،var و type بهبود و تکامل بخشیده شدهاند.
استفاده از اپراتور is به همراه pattern matching
اپراتور is از اولین نگارش #C مهیا بودهاست و هدف آن بررسی تطابق شیءایی خاص، با نوعی مفروض است. برای مثال آیا این نوع مورد بررسی، اینترفیس خاصی را پیاده سازی میکند و یا اینکه آیا از کلاسی خاص مشتق شدهاست یا خیر؟ حاصل این بررسی هم true یا false است.
با بهبودهای حاصل شدهی در C# 7، اکنون میتوان از اپراتور is جهت بررسی الگوها نیز استفاده کرد.
الگوی const
در مثال ذیل، آرایهای از اشیاء، شامل یک نال، یک عدد و دو شیء کاربر، تعریف شدهاند:
اولین الگوی مهیای در C# 7، با نام «const pattern» شناخته میشود که نمونهای از آنرا در بدنهی حلقهی فوق مشاهده میکنید.
در C# 7 میتوان اپراتور is را بر روی یک عدد ثابت مانند 42 و یا یک null بکار گرفت. پیش از C# 7 برای بررسی نال بودن یک شیء، تنها از پراتور == میشد استفاده کرد.
الگوی Type
دومین الگوی مهیای در C# 7، «الگوی نوع» نام دارد و هدف آن بررسی تطابق یک شیء، با شیءایی دیگر است. مهمترین تفاوت آن با نگارشهای پیشین سی شارپ این است که اگر اکنون تطابقی تشخیص داده شود، شیء، به متغیر جدید تعریف شده، انتساب داده میشود:
همانطور که ملاحظه میکنید اینبار میتوان پس از اپراتور is، یک متغیر جدید را هم تعریف کرد و در صورت تطابق، این متغیر به صورت خودکار مقدار دهی میگردد. به علاوه در اینجا امکان ترکیب شرطها نیز پس از is، مانند سومین if نوشته شده، میسر است.
و یا اکنون قطعه کد قدیمی ذیل را
میتوان با pattern matching و استفاده از «الگوی نوع»، به نحو ذیل خلاصه کرد:
الگوی Var
سومین الگوی مهیای در C# 7، الگوی var نام دارد و در این حالت میتوان بجای ذکر صریح نوع تطابق داده شده، از var استفاده کرد.
بدیهی است این الگو همواره با موفقیت روبرو میشود؛ چون var به همان نوع شیء مفروض اشاره میکند:
مهمترین مزیت آن این است که متغیر تعریف شدهی پس از var دقیقا دارای همان مقدار و نوع اصلی شیء است و پس از فراخوانی GetType میتوان به خواص آن دسترسی یافت؛ مانند خاصیت Name ذکر شدهی در مثال فوق.
در این حالت اگر item دقیقا null باشد، برای بررسی آن میتوان از null conditional operator معرفی شدهی در C# 6 استفاده کرد.
استفاده از عبارت switch به همراه pattern matching
در C# 7، عبارت switch نیز تکامل یافتهاست. در اینجا الگوهای const ،var و type را نیز میتوان پس از ذکر case بکار گرفت:
الگوهایی را که در اینجا مشاهده میکنید دقیقا همانهایی هستند که پیشتر بررسی کردیم. الگوی const برای بررسی نال و یک عدد. الگوی type برای بررسی تطابق با یک شیء خاص و سپس استفادهی از آن شیء و الگوی var برای دسترسی به نام نوع مفروض.
تنها نکتهی جدید در اینجا، استفاده از واژهی کلیدی when است برای ترکیب شرطها (case User p when p.Name.StartsWith). بنابراین در C# 7 امکان نوشتن case null میسر است؛ به همراه نوشتن شرطها توسط when، در حین تعاریف caseها. به علاوه اینبار عبارت switch محدود به نوعهای پایه مانند اعداد، رشتهها و enums نیست و در اینجا میتوان یک شیء را نیز مشخص کرد.
شبیه سازی switch موجود در ویژوال بیسیک در C# 7
ویژوال بیسیک از نگارشهای ابتدایی آن دارای caseهای پیشرفتهتری است نسبت به #C. برای نمونه در اینجا امکان تعریف تعدادی عدد، استفاده از To و استفادهی از =< را هم مشاهده میکنید:
اکنون در C# 7 میتوان یک چنین توانمندی را با pattern matching هم پیاده سازی کرد:
در این مثال یکی از کاربردهای عملی الگوی var را مشاهده میکنید؛ یا همان دسترسی به مقدار و نوع وارد شده و سپس اعمال شرط بر روی آن.
همانطور که مشاهده میکنید، در قسمت when نیز میتوان توسط && و || نیز شرطها را ترکیب کرد و یا متدی را با خروجی bool (مانند Contains) بر روی مقدار دریافتی اعمال کرد.
استفاده از اپراتور is به همراه pattern matching
اپراتور is از اولین نگارش #C مهیا بودهاست و هدف آن بررسی تطابق شیءایی خاص، با نوعی مفروض است. برای مثال آیا این نوع مورد بررسی، اینترفیس خاصی را پیاده سازی میکند و یا اینکه آیا از کلاسی خاص مشتق شدهاست یا خیر؟ حاصل این بررسی هم true یا false است.
با بهبودهای حاصل شدهی در C# 7، اکنون میتوان از اپراتور is جهت بررسی الگوها نیز استفاده کرد.
الگوی const
در مثال ذیل، آرایهای از اشیاء، شامل یک نال، یک عدد و دو شیء کاربر، تعریف شدهاند:
public class User { public User(string name) { Name = name; } public string Name { get; } } object[] data = { null, 42, new User("User 1"), new User("User 2") }; foreach (var item in data) { if (item is null) Console.WriteLine("it's a const pattern"); if (item is 42) Console.WriteLine("it's 42"); }
در C# 7 میتوان اپراتور is را بر روی یک عدد ثابت مانند 42 و یا یک null بکار گرفت. پیش از C# 7 برای بررسی نال بودن یک شیء، تنها از پراتور == میشد استفاده کرد.
الگوی Type
دومین الگوی مهیای در C# 7، «الگوی نوع» نام دارد و هدف آن بررسی تطابق یک شیء، با شیءایی دیگر است. مهمترین تفاوت آن با نگارشهای پیشین سی شارپ این است که اگر اکنون تطابقی تشخیص داده شود، شیء، به متغیر جدید تعریف شده، انتساب داده میشود:
object[] data = { null, 42, new User("User 1"), new User("User 2") }; foreach (var item in data) { if (item is int i) Console.WriteLine($"it's a type pattern with an int and the value {i}"); if (item is User p) Console.WriteLine($"it's a person: {p.Name}"); if (item is User p2 && p2.Name.StartsWith("U")) { Console.WriteLine($"it's a person starting with U {p2.Name}"); } }
و یا اکنون قطعه کد قدیمی ذیل را
object obj1 = "Hello, World!"; var str1 = obj1 as string; if (str1 != null) { Console.WriteLine(str1); }
object obj2 = "Hello, World!"; if (obj2 is string str2) { Console.WriteLine(str2); }
الگوی Var
سومین الگوی مهیای در C# 7، الگوی var نام دارد و در این حالت میتوان بجای ذکر صریح نوع تطابق داده شده، از var استفاده کرد.
بدیهی است این الگو همواره با موفقیت روبرو میشود؛ چون var به همان نوع شیء مفروض اشاره میکند:
object[] data = { null, 42, new User("User 1"), new User("User 2") }; foreach (var item in data) { if (item is var x) Console.WriteLine($"it's a var pattern with the type {x?.GetType()?.Name}"); }
در این حالت اگر item دقیقا null باشد، برای بررسی آن میتوان از null conditional operator معرفی شدهی در C# 6 استفاده کرد.
استفاده از عبارت switch به همراه pattern matching
در C# 7، عبارت switch نیز تکامل یافتهاست. در اینجا الگوهای const ،var و type را نیز میتوان پس از ذکر case بکار گرفت:
public static void SwitchPattern(object o) { switch (o) { case null: Console.WriteLine("it's a constant pattern"); break; case int i: Console.WriteLine("it's an int"); break; case User p when p.Name.StartsWith("U"): Console.WriteLine($"a U person {p.Name}"); break; case User p: Console.WriteLine($"any other person {p.Name}"); break; case var x: Console.WriteLine($"it's a var pattern with the type {x?.GetType().Name} "); break; default: break; } }
تنها نکتهی جدید در اینجا، استفاده از واژهی کلیدی when است برای ترکیب شرطها (case User p when p.Name.StartsWith). بنابراین در C# 7 امکان نوشتن case null میسر است؛ به همراه نوشتن شرطها توسط when، در حین تعاریف caseها. به علاوه اینبار عبارت switch محدود به نوعهای پایه مانند اعداد، رشتهها و enums نیست و در اینجا میتوان یک شیء را نیز مشخص کرد.
شبیه سازی switch موجود در ویژوال بیسیک در C# 7
ویژوال بیسیک از نگارشهای ابتدایی آن دارای caseهای پیشرفتهتری است نسبت به #C. برای نمونه در اینجا امکان تعریف تعدادی عدد، استفاده از To و استفادهی از =< را هم مشاهده میکنید:
Select Case age Case 50 ageBlock = "the big five-oh" Case 80, 81, 82, 83, 84, 85, 86, 87, 88, 89 ageBlock = "octogenarian" Case 90 To 99 ageBlock = "nonagenarian" Case Is >= 100 ageBlock = "centenarian" Case Else ageBlock = "just old" End Select
اکنون در C# 7 میتوان یک چنین توانمندی را با pattern matching هم پیاده سازی کرد:
string ageBlock; var age = 40; switch (age) { case 50: ageBlock = "the big five-oh"; break; case var testAge when (new List<int> { 80, 81, 82, 83, 84, 85, 86, 87, 88, 89 }).Contains(testAge): ageBlock = "octogenarian"; break; case var testAge when ((testAge >= 90) && (testAge <= 99)): ageBlock = "nonagenarian"; break; case var testAge when (testAge >= 100): ageBlock = "centenarian"; break; default: ageBlock = "just old"; break; }
همانطور که مشاهده میکنید، در قسمت when نیز میتوان توسط && و || نیز شرطها را ترکیب کرد و یا متدی را با خروجی bool (مانند Contains) بر روی مقدار دریافتی اعمال کرد.
مطالب دورهها
حذف یک ردیف از اطلاعات به همراه پویانمایی محو شدن اطلاعات آن توسط jQuery در ASP.NET MVC
فرض کنید تعدادی ردیف در گزارشی نمایش داده شدهاند. قصد داریم برای هر
ردیف یک دکمه حذف را قرار دهیم. این حذف باید Ajax ایی باشد؛ به علاوه در
حین حذف ردیف، پویانمایی محو آن ردیف را نیز سبب شود.
مدل و منبع داده برنامه
در اینجا مدل برنامه که ساختار نمایش یک سری مطلب را تهیه
میکند، ملاحظه میکنید؛ به علاوه یک منبع داده فرضی تشکیل شده در حافظه
جهت سهولت دموی برنامه.
کنترلر برنامه
کنترلر برنامه بسیار ساده بوده و نکته خاصی ندارد. در حین
اولین بار نمایش صفحه، لیست مطالب را به View مرتبط ارسال میکند. همچنین
یک اکشن متد حذف ردیفهای نمایش داده شده را نیز در اینجا تدارک دیدهایم.
این اکشن متد از طریق ارسال اطلاعات به صورت Ajax، شماره مطلب را در اختیار
برنامه قرار میدهد که توسط آن در ادامه برای مثال میتوان این رکورد را
از بانک اطلاعاتی حذف کرد. امضای متد DeleteRow بر اساس پارامترهای ارسالی توسط jQuery Ajax مشخص و تنظیم شدهاند:
View برنامه
کدهای View برنامه را در ادامه ملاحظه میکنید. اطلاعات مطالب
دریافتی به صورت یک جدول در صفحه نمایش داده شدهاند. در هر ردیف توسط یک
span که با css تزئین گردیده است، یک دکمه حذف را تدارک دیدهایم. برای
اینکه در حین کار با jQuery بتوانیم id هر ردیف را بدست بیاوریم، این id را
در قسمتی از id این span اضافه شده قرار دادهایم.
در کدهای اسکریپتی صفحه، ابتدا کلیک بر روی کلیه spanهایی که id آنها با row شروع میشود را مونیتور خواهیم کرد:
سپس هر زمان که بر روی یکی از این spanها کلیک شد، میتوان بر اساس span جاری، id و همچنین tableRow مرتبط را استخراج کرد:
اکنون که به این
اطلاعات دسترسی پیدا کردهایم، تنها کافی است آنها را توسط متد ajax به
کنترلر برنامه برای پردازش نهایی ارسال نمائیم. همچنین در پایان کار
عملیات، توسط متدهای fadeTo و remove ایی که ملاحظه میکنید، سبب حذف
نمایشی یک ردیف به همراه پویانمایی محو آن خواهیم شد.
دریافت کدها و پروژه کامل این قسمت
jQueryMvcSample06.zip
مدل و منبع داده برنامه
namespace jQueryMvcSample06.Models { public class BlogPost { public int Id { set; get; } public string Title { set; get; } public string Body { set; get; } } }
using System.Collections.Generic; using jQueryMvcSample06.Models; namespace jQueryMvcSample06.DataSource { /// <summary> /// منبع داده فرضی جهت سهولت دموی برنامه /// </summary> public static class BlogPostDataSource { private static IList<BlogPost> _cachedItems; static BlogPostDataSource() { _cachedItems = createBlogPostsInMemoryDataSource(); } /// <summary> /// هدف صرفا تهیه یک منبع داده آزمایشی ساده تشکیل شده در حافظه است /// </summary> private static IList<BlogPost> createBlogPostsInMemoryDataSource() { var results = new List<BlogPost>(); for (int i = 1; i < 30; i++) { results.Add(new BlogPost { Id = i, Title = "عنوان " + i, Body = "متن ... متن ... متن " + i}); } return results; } public static IList<BlogPost> LatestBlogPosts { get { return _cachedItems; } } } }
کنترلر برنامه
using System.Web.Mvc; using System.Web.UI; using jQueryMvcSample06.DataSource; using jQueryMvcSample06.Security; namespace jQueryMvcSample06.Controllers { public class HomeController : Controller { [HttpGet] public ActionResult Index() { var postsList = BlogPostDataSource.LatestBlogPosts; return View(postsList); } [AjaxOnly] [HttpPost] [OutputCache(Location = OutputCacheLocation.None, NoStore = true)] public ActionResult DeleteRow(int? postId) { if (postId == null) return Content(null); //todo: delete post from db return Content("ok"); } } }
data: JSON.stringify({ postId: postId }),
View برنامه
@model IEnumerable<jQueryMvcSample06.Models.BlogPost> @{ ViewBag.Title = "Index"; var postUrl = Url.Action(actionName: "DeleteRow", controllerName: "Home"); } <h2> حذف یک ردیف از اطلاعات به همراه پویانمایی محو شدن اطلاعات آن</h2> <table> <tr> <th> عملیات </th> <th> عنوان </th> </tr> @foreach (var item in Model) { <tr> <td> <span id="row-@item.Id">حذف</span> </td> <td> @item.Title </td> </tr> } </table> @section JavaScript { <script type="text/javascript"> $(function () { $('span[id^="row"]').click(function () { var span = $(this); var postId = span.attr('id').replace('row-', ''); var tableRow = span.parent().parent(); $.ajax({ type: "POST", url: '@postUrl', data: JSON.stringify({ postId: postId }), contentType: "application/json; charset=utf-8", dataType: "json", complete: function (xhr, status) { var data = xhr.responseText; if (xhr.status == 403) { window.location = "/login"; } else if (status === 'error' || !data || data == "nok") { alert('خطایی رخ داده است'); } else { $(tableRow).fadeTo(600, 0, function () { $(tableRow).remove(); }); } } }); }); }); </script> }
در کدهای اسکریپتی صفحه، ابتدا کلیک بر روی کلیه spanهایی که id آنها با row شروع میشود را مونیتور خواهیم کرد:
$('span[id^="row"]').click(function () {
var span = $(this); var postId = span.attr('id').replace('row-', ''); var tableRow = span.parent().parent();
دریافت کدها و پروژه کامل این قسمت
jQueryMvcSample06.zip
مسیرراهها
کتابخانه Angular Material 6x
بعد از مطالعه پستهای ^ و ^ نکته ای به ذهنم رسید که بیان آن از بنده و مطالعه آن توسط شما خالی از لطف نیست. اگر مثالهای پیاده سازی شده در پستهای ^ و ^ را با AngularJs نسخه 1.2 اجرا نمایید به طور حتم با خطا روبرو میشوید و نتیجه مورد نظر حاصل نمیشود. در این پست نیز توسط یکی از دوستان اشاره ای به این مطلب شد.
دلیل خطا این است که از نسخه 1.2 به بعد در Angular سیستم مسیر یابی به این شکل امکان پذیر نیست و بخش مسیریابی به یک فایل دیگر به نام angular-route.js منتقل شده است. در نتیجه اگر به سبک نسخههای قبلی Angular از سیستم مسیریابی استفاده نمایید با خطا مواجه خواهید شد و خطای مورد نظر هم مربوط به عدم توانایی در تزریق وابستگی routeProvider$ به ماژول مورد نظر است. حال راه حل چیست؟
کافیست در هنگام تعریف ماژول، ngRoute را به عنوان وابستگی ماژول تعیین نمایید. و از طرفی فایل اسکریپتی angular-route.js را بعد از angular.js فراخوانی کنید.
بررسی مثال:
کدهای زیر مربوط به مثالهای پست قبلی میباشد که شرح کامل آن در این پست است:
دلیل خطا این است که از نسخه 1.2 به بعد در Angular سیستم مسیر یابی به این شکل امکان پذیر نیست و بخش مسیریابی به یک فایل دیگر به نام angular-route.js منتقل شده است. در نتیجه اگر به سبک نسخههای قبلی Angular از سیستم مسیریابی استفاده نمایید با خطا مواجه خواهید شد و خطای مورد نظر هم مربوط به عدم توانایی در تزریق وابستگی routeProvider$ به ماژول مورد نظر است. حال راه حل چیست؟
کافیست در هنگام تعریف ماژول، ngRoute را به عنوان وابستگی ماژول تعیین نمایید. و از طرفی فایل اسکریپتی angular-route.js را بعد از angular.js فراخوانی کنید.
بررسی مثال:
کدهای زیر مربوط به مثالهای پست قبلی میباشد که شرح کامل آن در این پست است:
var myFirstRoute = angular.module('myFirstRoute', []); myFirstRoute.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/pageOne', { templateUrl: 'templates/page_one.html', controller: 'ShowPage1Controller' }). when('/pageTwo', { templateUrl: 'templates/page_two.html', controller: 'ShowPage2Controller' }). otherwise({ redirectTo: '/pageOne' }); }]); myFirstRoute.controller('ShowPage1Controller', function($scope) { $scope.message = 'Content of page-one.html'; }); myFirstRoute.controller('ShowPage2Controller', function($scope) { $scope.message = 'Content of page-two.html'; });
var myFirstRoute = angular.module('myFirstRoute',['ngRoute']); myFirstRoute.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/pageOne', { templateUrl: 'templates/page_one.html', controller: 'ShowPage1Controller' }). when('/pageTwo', { templateUrl: 'templates/page_two.html', controller: 'ShowPage2Controller' }). otherwise({ redirectTo: '/pageOne' }); }]);
<body ng-app="app"> <div> <div> <div> <ul> <li><a href="#pageOne"> Show page one </a></li> <li><a href="#pageTwo"> Show page two </a></li> </ul> </div> <div> <div ng-view></div> </div> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="angular-route.js"></script> <script src="app.js"></script> </body>
اولین قدم کار کردن با کتابخانه قدرتمند HtmlAgilityPack، داشتن XPath معتبر و متناظر با یک گره خاص میباشد. هرچند به ظاهر تعدادی از مرورگرها با کمک افزونههای خود امکان استخراج این XPathها را فراهم کردهاند اما ... عموما این مقادیر ارائه شده، نادرست هستند و بر روی محتوای HTML اصلی یک سایت قابل اجرا نیستند؛ علت هم به نرمال سازیهای انجام شده بر روی محتوای یک سایت، توسط موتور مرورگر بر میگردد.
خود کتابخانه HtmlAgilityPack به ازای هر HtmlNode ایی که ارائه میدهد، خاصیت XPath معتبری را نیز به همراه دارد. در ادامه قصد داریم از این امکان توکار استفاده کرده و کلیه XPathهای یک محتوای HTML ایی را استخراج کنیم.
پردازش تگهای تو در توی یک HTML به کمک کتابخانه HtmlAgilityPack
در اینجا کدهایی را ملاحظه میکنید که علاوه بر ارائه تنظیمات اولیه HtmlAgilityPack (خصوصا با درنظر گرفتن مباحث ورودی یونیکد)، به صورت بازگشتی (با توجه به اینکه الزاما مسیر یا Node خاصی مدنظر نیست)، کلیه گرههای یک HTML را بررسی و ارائه میدهند.
این کد برای نوشتن مبدلهای HTML به XYZ بسیار مناسب است. برای مثال اگر بخواهید یک مبدل HTML به PDF را تهیه کنید، کدهای ابتدایی آن همین موارد است:
نمونهای از نحوه استفاده از کدهای کلاس HtmlReader را ملاحظه میکنید.
در اینجا html، محتوای HTMLایی در حال بررسی است. ParserHtmlNode یک callback است. هر زمانیکه به یک گره HTML برخورد، آنرا در اختیار شما قرار میدهد. در ادامه فرصت خواهید داشت تا برای نمونه یک swicth را تهیه کرده و مثلا به ازای تگ hr یک خط رسم کنید، به ازای تگ br یک سطر جدید را درنظر بگیرید و الی آخر. اگر خروجی این Func را true درنظر بگیرید، فرض بر این خواهد بود که گره جاری تو در تو است (حالت دنیای واقعی)؛ در غیراینصورت، یک سطح این گره، بیشتر بررسی نخواهد شد.
در این کلاس، ParseError نیز یک callback است و اگر کتابخانه HtmlAgilityPack، در حین آنالیز کدهای HTML دریافتی به خطایی برخورد، آنرا گزارش خواهد داد.
در کلاس فوق، دو حالت برای متد StartParsingHtml در نظر گرفته شده است. در حالت اول، یک Uri یا آدرس اینترنتی دریافت و سپس آنالیز میگردد. در حالت دوم، فرض بر این است که محتوای کدهای HTML مدنظر به هر نحوی پیشتر تهیه شده و به صورت string موجود است.
استخراج کلیه XPathها از یک فایل HTML به کمک کتابخانه HtmlAgilityPack
اکنون که یک HTML Parser عمومی را تهیه کردهایم، استخراج XPathها توسط آن کار سادهای خواهد بود. یک مثال کامل را در این زمینه در ادامه ملاحظه میکنید:
در این مثال html مقداری است که از یک سایت عمومی دریافت شده است.
سپس نمونهای دیگر از نحوه استفاده از کلاس HtmlReader قسمت قبل را در ادامه، در متد extractXPath ملاحظه میکنید. در اینجا کلاس HtmlReader در یک عملیات بازگشتی، کلیه گرههای تو در توی HTML مورد نظر را آنالیز کرده و توسط callback ایی به نام ParserHtmlNode در اختیار ما قرار میدهد. اکنون که این htmlNode را داریم، خاصیت XPath آن دقیقا مقداری است که به دنبالش هستیم.
در اینجا چند نکته حائز اهمیت هستند:
- با بررسی HtmlTextNode، به نودهایی خواهیم رسید که دارای مقدار متنی هستند. در غیراینصورت این گره، خود ابتدای یک سری گره تو در توی دیگر است.
- XPath بازگشتی توسط کتابخانه HtmlAgilityPack نیاز به کمی تمیز سازی دارد. اینکار در متد GetValidXPath انجام شده است.
- در متد test انتهایی، نمونهای از نحوه استفاده از XPathهای استخراجی را ملاحظه میکنید.
برای نمونه سه سطر فوق، یکی از مداخل فایل نهایی تولیدی مثال جاری است. اکنون که XPath را داریم، استفاده از آن جهت استخراج مقدار InnerText مدنظر، ساده خواهد بود.
خود کتابخانه HtmlAgilityPack به ازای هر HtmlNode ایی که ارائه میدهد، خاصیت XPath معتبری را نیز به همراه دارد. در ادامه قصد داریم از این امکان توکار استفاده کرده و کلیه XPathهای یک محتوای HTML ایی را استخراج کنیم.
پردازش تگهای تو در توی یک HTML به کمک کتابخانه HtmlAgilityPack
using System; using System.Linq; using System.Net; using System.Text; using HtmlAgilityPack; namespace HapTests { public class HtmlReader { public Action<string> ParseError { set; get; } public Func<HtmlNode, bool> ParserHtmlNode { set; get; } public void StartParsingHtml(Uri url) { using (var client = new WebClient { Encoding = Encoding.UTF8 }) { client.Headers.Add("user-agent", "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)"); StartParsingHtml(client.DownloadString(url)); } } public void StartParsingHtml(string htmlContent) { if (string.IsNullOrWhiteSpace(htmlContent)) throw new ArgumentNullException("content"); var doc = new HtmlDocument { OptionCheckSyntax = true, OptionFixNestedTags = true, OptionAutoCloseOnEnd = true, OptionDefaultStreamEncoding = Encoding.UTF8 }; doc.LoadHtml(htmlContent); if (doc.ParseErrors != null && doc.ParseErrors.Any()) { foreach (var error in doc.ParseErrors) { if (ParseError != null) ParseError(error.Code + " - " + error.Reason); } } if (!doc.DocumentNode.HasChildNodes) return; handleChildren(doc.DocumentNode.ChildNodes); } private void handleChildren(HtmlNodeCollection nodes) { foreach (var itm in nodes) { if (itm.Name.ToLower().Equals("html")) { if (itm.Element("body") != null) handleChildren(itm.Element("body").ChildNodes); } else handleHtmlNode(itm); } } private void parserChildNodes(HtmlNode content) { foreach (var item in content.ChildNodes) { handleHtmlNode(item); } } private void handleHtmlNode(HtmlNode htmNode) { switch (htmNode.Name.ToLower()) { case "html": case "body": handleChildren(htmNode.ChildNodes); break; default: if (ParserHtmlNode == null) throw new ArgumentNullException("ParserHtmlNode"); if (ParserHtmlNode(htmNode)) parserChildNodes(htmNode); break; } } } }
این کد برای نوشتن مبدلهای HTML به XYZ بسیار مناسب است. برای مثال اگر بخواهید یک مبدل HTML به PDF را تهیه کنید، کدهای ابتدایی آن همین موارد است:
new HtmlReader { ParseError = error => Console.WriteLine(error), ParserHtmlNode = htmlNode => { //switch(htmlNode.Name) { } return true; //it's a nested node. } }.StartParsingHtml(html);
در اینجا html، محتوای HTMLایی در حال بررسی است. ParserHtmlNode یک callback است. هر زمانیکه به یک گره HTML برخورد، آنرا در اختیار شما قرار میدهد. در ادامه فرصت خواهید داشت تا برای نمونه یک swicth را تهیه کرده و مثلا به ازای تگ hr یک خط رسم کنید، به ازای تگ br یک سطر جدید را درنظر بگیرید و الی آخر. اگر خروجی این Func را true درنظر بگیرید، فرض بر این خواهد بود که گره جاری تو در تو است (حالت دنیای واقعی)؛ در غیراینصورت، یک سطح این گره، بیشتر بررسی نخواهد شد.
در این کلاس، ParseError نیز یک callback است و اگر کتابخانه HtmlAgilityPack، در حین آنالیز کدهای HTML دریافتی به خطایی برخورد، آنرا گزارش خواهد داد.
در کلاس فوق، دو حالت برای متد StartParsingHtml در نظر گرفته شده است. در حالت اول، یک Uri یا آدرس اینترنتی دریافت و سپس آنالیز میگردد. در حالت دوم، فرض بر این است که محتوای کدهای HTML مدنظر به هر نحوی پیشتر تهیه شده و به صورت string موجود است.
استخراج کلیه XPathها از یک فایل HTML به کمک کتابخانه HtmlAgilityPack
اکنون که یک HTML Parser عمومی را تهیه کردهایم، استخراج XPathها توسط آن کار سادهای خواهد بود. یک مثال کامل را در این زمینه در ادامه ملاحظه میکنید:
using System; using System.Diagnostics; using System.IO; using System.Text; using HtmlAgilityPack; namespace HapTests { class Program { static void Main(string[] args) { var html = @"<table width='750' border='0' style='font-size: 10pt; width: 736px' class='boxcar2 gerd'> <tbody><tr> <td height='70' colspan='4' class='boxcart1 gerd'> <iframe width='718' scrolling='no'> </iframe></td> </tr> <tr> <td height='70' colspan='4' class='boxcart1 gerd'> </td> </tr> <tr> <td width='193' height='36' class='boxcart2 gerd'> <a target='_self' href='Curr.cbi.2.php'>نرخ ارز مبادله ای بانک مرکزی</a></td> <td width='181' height='36' class='boxcart2 gerd'> <a target='_self' href='Curr.cbi.php'>نرخ ارز مرجع بانک مرکزی</a></td> <td width='149' height='36' class='boxcart2 gerd'> <a target='_self' href='curv.htm'>نمودار قیمت طلا</a></td> <td width='199' height='36' class='boxcart2 gerd'> <a target='_self' href='index.php'>قیمت طلا و سکه در بازار ایران</a></td> </tr> <tr> <td height='48' colspan='4' class='boxcart1 gerd'> <p dir='rtl'><span style='font-size: 13pt;'>تابلو آنلاین قیمت جهانی طلا و نقره ( دلار )</span></p></td> </tr> <tr> <td height='57' colspan='2' class='boxcart1 gerd'>قیمت لحظه ای هر انس نقره در بازارهای جهانی<br> <span style='font-size: 9pt;'> </span></td> <td height='57' colspan='2' class='boxcart1 gerd'>قیمت لحظه ای هر انس طلا در بازارهای جهانی<br> <span style='font-size: 9pt;'> </span></td> </tr> <tr> <td height='48' colspan='4' class='boxcart1 gerd'> <p dir='rtl'><span style='font-size: 13pt'>تابلو آنلاین قیمت طلا ، سکه و نقره در بازار ایران ( ریال )</span></p> </td> </tr> <tr> <td style='direction: rtl; font-size: 8pt' colspan='4'><div align='center'> <table id='gold_tbl'><tbody><tr><th>قیمت طلا</th><th>قیمت زنده</th><th>تغییر</th> <th>کمترین</th><th>بیشترین</th><th>زمان</th></tr><tr><td>انس طلا <sup>دلار</sup></td> <td class='s0_1'>1,375.90</td><td class='c0_1 neg'>(-0.34%) -4.70</td> <td class='l0_1'>1,374.90</td><td class='h0_1'>1,380.80</td><td class='z0_1 fa'>17:53</td> </tr><tr><td>مثقال طلا</td><td class='s3_2'>5,290,000</td> <td class='c3_2 pos'>(1.63%) 85,000</td><td class='l3_2'>5,200,000</td><td class='h3_2'>5,320,000</td><td class='z3_2 fa'>17:50</td></tr><tr><td>گرم طلای 18</td> <td class='s3_3'>1,221,200</td><td class='c3_3 pos'>(1.63%) 19,600</td><td class='l3_3'>1,200,400</td><td class='h3_3'>1,228,100</td><td class='z3_3 fa'>17:50</td> </tr><tr><td>انس نقره <sup>دلار</sup></td><td class='s0_5'>21.83</td><td class='c0_5'>(0.00%) 0.00</td><td class='l0_5'>21.67</td><td class='h0_5'>21.96</td> <td class='z0_5 fa'>17:53</td></tr></tbody></table><br><table id='coin_tbl'><tbody><tr><th>سکه</th><th>قیمت زنده</th><th>تغییر</th><th>کمترین</th> <th>بیشترین</th><th>ارزش طلا</th><th>زمان</th></tr><tr><td>بهار آزادی</td><td class='s3_10'>12,650,000</td><td class='c3_10 pos'>(2.68%) 330,000</td> <td class='l3_10'>12,320,000</td><td class='h3_10'>12,650,000</td><td class='z4_10'>11,918,400</td><td class='z3_10 fa'>16:07</td></tr><tr><td>امامی</td> <td class='s3_11'>12,960,000</td><td class='c3_11 pos'>(2.61%) 330,000</td><td class='l3_11'>12,630,000</td><td class='h3_11'>13,050,000</td><td class='z4_11'>11,918,400</td> <td class='z3_11 fa'>17:43</td></tr><tr><td>نیم</td><td class='s3_12'>6,880,000</td><td class='c3_12 pos'>(2.69%) 180,000</td><td class='l3_12'>6,700,000</td> <td class='h3_12'>6,900,000</td><td class='z4_12'>5,959,200</td><td class='z3_12 fa'>16:08</td></tr><tr><td>ربع</td><td class='s3_13'>4,250,000</td><td class='c3_13 pos'>(2.41%) 100,000</td> <td class='l3_13'>4,150,000</td><td class='h3_13'>4,300,000</td><td class='z4_13'>2,978,100</td><td class='z3_13 fa'>17:42</td></tr><tr><td>گرمی</td><td class='s3_14'>2,940,000</td> <td class='c3_14 pos'>(3.16%) 90,000</td><td class='l3_14'>2,850,000</td><td class='h3_14'>2,940,000</td><td class='z4_14'>1,465,400</td><td class='z3_14 fa'>17:40</td></tr></tbody></table></div></td> </tr> </tbody></table> "; extractXPath(html); test(html); } /// <summary> /// Converts /#comment[1] to /comment()[1] /// or /#text[1] to /text()[1] /// </summary> private static string GetValidXPath(string xpath) { var index = xpath.LastIndexOf("/"); var lastPath = xpath.Substring(index); if (lastPath.Contains("#")) { xpath = xpath.Substring(0, index); lastPath = lastPath.Replace("#", ""); lastPath = lastPath.Replace("[", "()["); xpath = xpath + lastPath; } return xpath; } private static void extractXPath(string html) { var sb = new StringBuilder(); new HtmlReader { ParseError = error => Console.WriteLine(error), ParserHtmlNode = htmlNode => { if (htmlNode is HtmlTextNode) { sb.AppendLine("Text NodeName: " + htmlNode.Name.Trim()); sb.AppendLine("InnerText: " + htmlNode.InnerText.Trim()); } else { sb.AppendLine("NodeName: " + htmlNode.Name.Trim()); var nodeText = new StringBuilder(); for (int i = 0; (i < htmlNode.OuterHtml.Length && htmlNode.OuterHtml[i] != '>'); i++) nodeText.Append(htmlNode.OuterHtml[i]); nodeText.Append(">"); sb.AppendLine("Node Start: " + nodeText.ToString()); } sb.AppendLine("XPath: " + GetValidXPath(htmlNode.XPath.Trim())); sb.AppendLine(Environment.NewLine); return true; //it's a nested node. } }.StartParsingHtml(html); File.WriteAllText("xpath.txt", sb.ToString()); Process.Start("xpath.txt"); } private static void test(string html) { var doc = new HtmlDocument { OptionCheckSyntax = true, OptionFixNestedTags = true, OptionAutoCloseOnEnd = true, OptionDefaultStreamEncoding = Encoding.UTF8 }; doc.LoadHtml(html); var node = doc.DocumentNode.SelectSingleNode("/table[1]/tbody[1]/tr[7]/td[1]/div[1]/table[2]/tbody[1]/tr[6]/td[7]/text()[1]"); Console.WriteLine(node.InnerText); } } }
سپس نمونهای دیگر از نحوه استفاده از کلاس HtmlReader قسمت قبل را در ادامه، در متد extractXPath ملاحظه میکنید. در اینجا کلاس HtmlReader در یک عملیات بازگشتی، کلیه گرههای تو در توی HTML مورد نظر را آنالیز کرده و توسط callback ایی به نام ParserHtmlNode در اختیار ما قرار میدهد. اکنون که این htmlNode را داریم، خاصیت XPath آن دقیقا مقداری است که به دنبالش هستیم.
در اینجا چند نکته حائز اهمیت هستند:
- با بررسی HtmlTextNode، به نودهایی خواهیم رسید که دارای مقدار متنی هستند. در غیراینصورت این گره، خود ابتدای یک سری گره تو در توی دیگر است.
- XPath بازگشتی توسط کتابخانه HtmlAgilityPack نیاز به کمی تمیز سازی دارد. اینکار در متد GetValidXPath انجام شده است.
- در متد test انتهایی، نمونهای از نحوه استفاده از XPathهای استخراجی را ملاحظه میکنید.
Text NodeName: #text InnerText: 17:40 XPath: /table[1]/tbody[1]/tr[7]/td[1]/div[1]/table[2]/tbody[1]/tr[6]/td[7]/text()[1]
اشتراکها