.NET Tips | جستجوها: نتایج مشابه «استاندارد وب WIA-ARIA»، صفحه: ۹۹

مطالب

عدم امکان تغییر اطلاعات مدل در HTML Helpers پس از Postback در ASP.NET MVC

یک مثال ساده برای شرح مساله
در اینجا مدل User، کنترلری به نام Home و View متناظر با آن را ملاحظه می‌کنید:

namespace ModelStateTest.Models
{
    public class User
    {
        public string Email { set; get; }
    }
}

using System.Web.Mvc;
using ModelStateTest.Models;

namespace ModelStateTest.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(User model)
        {           
            model.Email = "?";
            return View(model);
        }
    }
}

@model ModelStateTest.Models.User

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>User</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

نکته‌ای که در اینجا مدنظر است، سطر زیر می‌باشد:

 model.Email = "?";

پیش از اینکه برنامه را اجرا کنید، به نظر شما پس از postback به سرور، چه اطلاعاتی در Html.EditorFor تعریف شده در View برنامه نمایش داده خواهد شد؟
احتمالا عنوان می‌کنید که خوب ... همان مقدار علامت سؤال انتساب داده شده. اما ... اینچنین نیست! دقیقا همان مقداری که در حین Postback به سرور ارسال شده، نمایش داده می‌شود.
این مورد نکته‌ای است که عدم آشنایی با آن ممکن است چندین ساعت را به دیباگ یک برنامه اختصاص دهد، بدون اینکه نتیجه مفیدی حاصل شود.

مطابق نظر طراحان اصلی ASP.NET MVC، اینکار و این رفتار، دقیقا به همین نحو صحیح است و باگ نیست.
«فرض کنید در فیلدی عددی، کاربر عبارت «تست» را وارد کرده است. نیاز است در خطای اعتبار سنجی پس از Postback به او عنوان کنیم، لطفا بجای «تست»، عدد وارد کنید. چون خاصیت متناظر قید شده در مدل، عددی است، مقدار «تست» وارد شده را از دست خواهیم داد. به همین جهت همان مقدار اولیه وارد شده را در HTML Helpers پس از Postback حفظ می‌کنیم.»

راه حل‌های ممکن، برای به روز رسانی وضعیت مدل پس از Postback

الف) استفاده از متد ModelState.Clear
این متد کلیه داده‌های موجود در ModelState را منجمله خطاهای حاصل از اعتبارسنجی، حذف می‌کند. در این حالت مطابق مثال فوق پس از Postback، مقدار علامت سؤال نسبت داده شده به خاصیت ایمیل، نمایش داده خواهد شد.

ب) استفاده از متد ModelState.Remove

 this.ModelState.Remove("Email");

این حالت نیز مانند حالت الف است، با این تفاوت که اطلاعات اعتبار سنجی و سایر موارد مرتبط را حذف نمی‌کند.

ج) عدم استفاده از HTML Helpers
این مورد را فقط با متدهای کمکی For دار، مانند Html.EditorFor مشاهده خواهید کرد. اگر نحوه تعریف را به شکل زیر تغییر دهیم، نیازی به استفاده از متد ModelState.Remove نخواهد بود. البته، مزیت‌های استفاده از HTML Helpers دارای متدهای For دار را که Strongly typed هستند، از دست می‌دهیم.

 <input type="text" name="Email" id="Email" value="@Model.Email" />

‫۱۱ سال و ۶ ماه قبل، سه‌شنبه ۱۰ اردیبهشت ۱۳۹۲، ساعت ۱۷:۰۰

وحید نصیری

مطالب

استفاده از دکمه‌های CSS توئیتر در ASP.NET MVC - قسمت دوم

در قسمت اول مشاهده کردیم که به چه صورت می‌توان از دکمه‌های CSS ایی بجای دکمه‌های معمولی در ASP.NET MVC استفاده کنیم. در این قسمت قصد داریم قابلیت مهم زیر را نیز به این تغییر اضافه نمائیم:

کاربر امکان دوبار کلیک کردن همزمان را بر روی دکمه ارسال، نداشته باشد

انجام اینکار با jQuery بسیار ساده است:

$(el).prop("onclick", null).attr("onclick", null);

به این ترتیب کاربر امکان کلیک مجدد را بر روی دکمه ارسال، از دست خواهد داد.
و اینکار ... یک مشکل را اضافه می‌کند:
اگر نتیجه اعتبار سنجی سمت کاربر فرم، تکمیل نشده باشد، کاربر پس از رفع مشکل دیگر نمی‌تواند فرم را ارسال کند. به همین جهت باید به نحوی اطمینان حاصل کرد که آیا اعتبارسنجی موفقیت آمیز بوده یا خیر؛ سپس دکمه را غیرفعال کنیم.
برای پیاده سازی این امر باید jQuery Validator همراه با ASP.NET MVC را به صورت دستی فراخوانی کرده و نتیجه آنرا ارزیابی کنیم:

function validateThisForm(formId) {
    var val = $(formId).validate();
    val.form();
    return val.valid();
}

function customSubmit(el, formId) {
    if (!validateThisForm(formId)) return;
    $(el).prop("onclick", null).attr("onclick", null);
    $(formId).submit();
}

در متد جاوا اسکریپتی validateThisForm، سیستم jQuery Validator به صورت دستی فراخوانی شده و سپس نتیجه عملیات بازگشت داده می‌شود.
در متد customSubmit، ابتدا وضعیت اعتبار سنجی فرم بررسی شده و سپس بر این اساس تصمیم گرفته خواهد شد که آیا باید دکمه غیرفعال شود و سپس فرم ارسال گردد یا خیر.
یک مثال از استفاده آن:

@model MvcApplication27.Models.User
@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>
@using (Html.BeginForm(Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "MyForm" })))
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>User</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <span style="margin-top:7px;" onclick="customSubmit(this, '#MyForm')" class="btn btn-info">ارسال</span>
    </fieldset>
}

دریافت کدهای کامل این مثال:
MvcApplication27.7z

‫۱۲ سال و ۱ ماه قبل، شنبه ۲۹ مهر ۱۳۹۱، ساعت ۰۰:۵۳

عثمان رحیمی

مطالب

سفارشی کردن صفحه بندی WebGrid در ASP.NET MVC

بعد از استفاده از گرید‌های Grid.mvc , JQGrid, Kendo و مشکلاتی که با هر کدام از آنها داشتم، در نهایت به WebGrid که به صورت توکار وجود دارد، برای استفاده جهت نمایش اطلاعات رسیدم؛ از این جهت که به کتابخانه‌ی جانبی نیازی ندارد و از نظر سرعت و لود شدن بهینه می‌باشد، البته با اضافه کردن یکسری کدهای css.
برای آشنایی بیشتر با این helper توصیه میکنم ابتدا این مقاله را مطالعه نمایید.
به صورت پیش فرش WbebGrid صفحه بندی را به صورت خیلی ساده فقط با نمایش اعداد و جهت نماهای جلو و عقب، نشان می‌دهد که برای پروژه‌های رسمی تا حدودی جالب نیست.

در این مطلب قصد داریم از کتابخانه‌ی bootstrap جهت صفحه بندی استفاده کنیم و در نهایت به صفحه بندی زیر برسیم:

برای اینکار، ابتدا قبل از هر چیزی به یک متد الحاقی برای انجام صفحه بندی سفارشی سازی شده، نیاز داریم که کدهای این متد به صورت زیر خواهد بود:

public static class WebGridExtensions
{
    public static HelperResult PagerList(
        this WebGrid webGrid,
        WebGridPagerModes mode = WebGridPagerModes.NextPrevious | WebGridPagerModes.Numeric,
        string firstText = null,
        string previousText = null,
        string nextText = null,
        string lastText = null,
        int numericLinksCount = 5)
    {
        return PagerList(webGrid, mode, firstText, previousText, nextText, lastText, numericLinksCount, explicitlyCalled: true);
    }

    private static HelperResult PagerList(
        WebGrid webGrid,
        WebGridPagerModes mode,
        string firstText,
        string previousText,
        string nextText,
        string lastText,
        int numericLinksCount,
        bool explicitlyCalled)
    {
        
        int currentPage = webGrid.PageIndex;
        int totalPages = webGrid.PageCount;
        int lastPage = totalPages - 1;

        var ul = new TagBuilder("ul");
        var li = new List<TagBuilder>();

        
        if (ModeEnabled(mode, WebGridPagerModes.FirstLast)) {
            if (String.IsNullOrEmpty(firstText)) {
                firstText = "اولین";
            }

            var part = new TagBuilder("li") {
                InnerHtml = GridLink(webGrid, webGrid.GetPageUrl(0), firstText)
            };

            if (currentPage == 0) {
                part.MergeAttribute("class", "disabled");
            }

            li.Add(part);

        }
        
        if (ModeEnabled(mode, WebGridPagerModes.NextPrevious)) {
            if (String.IsNullOrEmpty(previousText)) {
                previousText = "قبلی";
            }

            int page = currentPage == 0 ? 0: currentPage - 1;

            var part = new TagBuilder("li") {
                InnerHtml = GridLink(webGrid, webGrid.GetPageUrl(page), previousText)
            };
            
            if (currentPage == 0) {
                part.MergeAttribute("class", "disabled");
            }

            li.Add(part);

        }


       if (ModeEnabled(mode, WebGridPagerModes.Numeric) && (totalPages > 1)) {
            int last = currentPage + (numericLinksCount / 2);
            int first = last - numericLinksCount + 1;
            if (last > lastPage) {
                first -= last - lastPage;
                last = lastPage;
            }
            if (first < 0) {
                last = Math.Min(last + (0 - first), lastPage);
                first = 0;
            }
            for (int i = first; i <= last; i++) {

                var pageText = (i + 1).ToString(CultureInfo.InvariantCulture);
                var part = new TagBuilder("li") {
                    InnerHtml = GridLink(webGrid, webGrid.GetPageUrl(i), pageText)
                };

                if (i == currentPage) {
                    part.MergeAttribute("class", "active");
                }
                
                li.Add(part);

            }
        }
        
        if (ModeEnabled(mode, WebGridPagerModes.NextPrevious)) {
            if (String.IsNullOrEmpty(nextText)) {
                nextText = "بعدی";
            }
            
            int page = currentPage == lastPage ? lastPage: currentPage + 1;

            var part = new TagBuilder("li") {
                InnerHtml = GridLink(webGrid, webGrid.GetPageUrl(page), nextText)
            };
            
            if (currentPage == lastPage) {
                part.MergeAttribute("class", "disabled");
            }

            li.Add(part);

        }
        
        if (ModeEnabled(mode, WebGridPagerModes.FirstLast)) {
            if (String.IsNullOrEmpty(lastText)) {
                lastText = "آخرین";
            }

            var part = new TagBuilder("li") {
                InnerHtml = GridLink(webGrid, webGrid.GetPageUrl(lastPage), lastText)
            };
            
            if (currentPage == lastPage) {
                part.MergeAttribute("class", "disabled");
            }

            li.Add(part);

        }

        ul.InnerHtml = string.Join("", li);

        var html = "";
        if (explicitlyCalled && webGrid.IsAjaxEnabled) {
            var span = new TagBuilder("span");
            span.MergeAttribute("data-swhgajax", "true");
            span.MergeAttribute("data-swhgcontainer", webGrid.AjaxUpdateContainerId);
            span.MergeAttribute("data-swhgcallback", webGrid.AjaxUpdateCallback);

            span.InnerHtml = ul.ToString();
            html = span.ToString();

        } else {
            html = ul.ToString();
        }

        return new HelperResult(writer => {
            writer.Write(html);         
        });
    }

    private static String GridLink(WebGrid webGrid, string url, string text) 
    {
        TagBuilder builder = new TagBuilder("a");
        builder.SetInnerText(text);
        builder.MergeAttribute("href", url);
        if (webGrid.IsAjaxEnabled) {
            builder.MergeAttribute("data-swhglnk", "true");
        }
        return builder.ToString(TagRenderMode.Normal);
    }


    private static bool ModeEnabled(WebGridPagerModes mode, WebGridPagerModes modeCheck)
    {
        return (mode & modeCheck) == modeCheck;
    }

}

کلاس فوق باید در پوشه‌ی App_Code قرار گیرد.
پس از آن در View یی که اطلاعات را نمایش می‌دهید، فقط لازم است کد زیر را اضافه نمایید:

<div>
@grid.PagerList(mode: WebGridPagerModes.All)
</div>

تا اینجا متد مورد نظر برای انجام صفحه بندی گرید پیاده سازی شد. ادامه‌ی کار هم مشخص است؛ داشتن یک PartialView جهت نمایش لیست اطلاعات، پاس دادن دیتا به Partial و تمام.

در ادامه برای تکمیل بحث مثالی را از نحوه‌ی نمایش اطلاعات و صفحه بندی سفارشی نشان خواهیم داد:

PartialView لازم برای نمایش اطلاعات
تنظیمات لازم گرید :

@{  
    WebGrid grid = new WebGrid(Model,
                               rowsPerPage: 10,
                               ajaxUpdateContainerId: "grid");
    
    var rowIndex = ((grid.PageIndex + 1) * grid.RowsPerPage) - (grid.RowsPerPage - 1);
}

تعیین فیلد‌های گرید :

    @grid.Table(
                            tableStyle: "table table-striped table-hover",
                    headerStyle: "webgrid-header",
          
            alternatingRowStyle: "webgrid-alternating-row",
            selectedRowStyle: "webgrid-selected-row",
            rowStyle: "webgrid-row-style",
            columns: grid.Columns(
                
                  grid.Column(columnName: "Name", header: "نام استان", style: "myfont"),
                  grid.Column(columnName: "NameEn", header: "نام استان ( انگلیسی )", style: "myfont"),
                  grid.Column(header: "", format: item => @Html.ActionLink("مدیریت شهرها", actionName: MVC.Admin.City.ActionNames.Index, controllerName: MVC.Admin.City.Name, routeValues: new {Code=item.Code },htmlAttributes:null)),
                 grid.Column(header: "",
                 style: "text-align-center-col smallcell",
                             format: item => @Html.ActionLink(linkText: "ویرایش", actionName: "Edit",
                             controllerName: "Province", routeValues: new { area = "Admin", code = item.Code },
                             htmlAttributes: new { @class = "btn-sm btn-info vertical-center" }))
                 ) )

<div>
    @grid.PagerList(mode: WebGridPagerModes.All)
</div>

خروجی حاصل به صورت زیر خواهد بود :

اگر طبق توضیحات بالا عمل کرده باشید، در نهایت صفحه بندی شما به صورت عمودی نمایش داده می‌شود؛ یعنی هر کدام از شماره صفحات در یک سطر. دلیل آن هم این است که تگ ul، کلاس .pagination را ندارد. در کدهای بوت استراپ تعریف شده است که تمام li هایی که به صورت مستقیم داخل کلاس .pagination هستند خصوصیات مورد نظر را بگیرند.

برای این کار دو راه حل وجود دارد :

راه حل اول: تغییر کدهای css

کدهای نوشته شده برای صفحه بندی در بوت استراپ را از حالت زیر:

.pagination > li

به حالت زیر تغییر دهید:

.pagination li

یادآوری : علامت < در CSS یعنی به صورت مستقیم و در شاخه‌ی اول.

راه حل دوم - افزودن کلاس .pagination به تگ ul:
ابتدا کلاس .pagination را از تگ div حذف نمایید:

<div >
    @grid.PagerList(mode: WebGridPagerModes.All)
</div>

و در کدهایی کلاس WebGridExtensions، در قسمتی که تگ ul اصافه می‌شود، کلاس مورد نظر را به آن اضافه می‌کنیم:

  var ul = new TagBuilder("ul");
        ul.AddCssClass("pagination");

دانلود کدهای این مثال

نکته‌ای در مورد Webgrid
اگر نیاز داشتید به یکباره تمام اطلاعات را در گرید لود نکنید و به صورت n تاn تا رکورد‌ها را نمایش دهید، در این حالت پس از پاس دادن لیستی از اطلاعات به View مورد نظر لازم است تعداد کل رکورد‌ها را در یک متغییر به سمت View بفرستید. این کار به این دلیل می‌باشد که بتوان صفحه بندی را تولید کرد. برای این کار در بخش تنظیمات Webgrid مقدار source را برابر null قرار دهید و از قطعه کد زیر جهت بایند کردن گرید، بعد از کدهای تنظیمات WebGrid استفاده نمایید:

grid.Bind(Model, rowCount: (int)ViewBag.PageCount);

‫۸ سال و ۱۲ ماه قبل، جمعه ۱ آبان ۱۳۹۴، ساعت ۱۲:۴۰

سعید مقدس

مطالب

بدست آوردن نام کشور و مشخصات کامل آن از روی آدرس IP

سایت‌های بسیاری هستند که سرویس‌هایی را برای بدست آوردن مشخصات کشور، از روی IP ارائه می‌دهند؛ ولی اکثر آنها برای این سرویسی که ارائه میدهند هزینه دریافت می‌کنند. سایتی که من در این مقاله معرفی خواهم کرد این سرویس را به رایگان ارائه می‌هد، به شرط اینکه درخواست‌های شما در هر ساعت بیشتر از 10000 نباشد. اگر این اتفاق روی دهد، یعنی درخواست‌های شما به بیش از 10000 در ساعت برسد، درخواست‌های شما با خطای HTTP 403, forbidden مواجه خواهد شد و تا زمانیکه محدودیت شما به پایان برسد، باید منتظر بمانید.

سرویسی که این سایت ارائه می‌دهد، سورس باز و رایگان میباشد. اگر شما با این محدودیت 10000 درخواست در ساعت مشکلی داشتید، می‌توانید این سرویس را از اینجا دریافت و آن‌را در سرور خودتان اجرا کنید. سورس سرویس هم بر روی github موجود هست.

API ارائه شده توسط این سایت، درخواست‌ها را بصورت زیر دریافت میکند:

freegeoip.net/{format}/{IP_or_hostname}

منظور از فرمت، قالبی است که پس از درخواست برای شما ارسال خواهد شد که به صورت‌های زیر خواهد بود:

freegeoip.net/xml/4.2.2.2 : XML
freegeoip.net/csv/8.8.8.8 :CSV
freegeoip.net/json/github.com :JSON

برای مثال اگر چنین درخواستی را ارسال کنیم:

http://freegeoip.net/xml/162.158.88.214

پاسخی که دریافت میکنیم بدین صورت خواهد بود:

<Response>
<IP>162.158.88.214</IP>
<CountryCode>DE</CountryCode>
<CountryName>Germany</CountryName>
<RegionCode>HE</RegionCode>
<RegionName>Hesse</RegionName>
<City>Frankfurt am Main</City>
<ZipCode>60438</ZipCode>
<TimeZone>Europe/Berlin</TimeZone>
<Latitude>50.1167</Latitude>
<Longitude>8.6833</Longitude>
<MetroCode>0</MetroCode>
</Response>

که در آن تمامی مشخصات مربوط به آن کشور، برای ما ارسال خواهد شد.

اگر آدرس IP را مشخص نکنید مشخصات مربوط به IP آدرس خودتان را دریافت خواهید کرد.

در ادامه از یک برنامه console application برای دریافت این پاسخ ارسال شده از سرویس و استخراج داده‌ها از آن استفاده خواهیم کرد.

البته این روش برای برنامه‌های تحت وب هم به همین صورت خواهد بود و تفاوتی نمی‌کند.

از این روش می‌توانید برای بلاک کردن کشورهایی که نمیخواهید به برنامه‌ی شما دسترسی پیدا کنند استفاده کنید و یا اینکه بدانید ip هایی که از سایت شما بازدید میکنند از کدام کشورهای جهان هستند و یا کار خلاقانه‌ای که می‌توانید انجام دهید، نمایش مکان‌های بازدید کننده‌ها بر روی نقشه گوگل، با استفاده از طول و عرض جغرافیایی که این سرویس در اختیارتان می‌گذارد‌، می‌باشد

 public static void ReadXmlElements(string ipAddress)
        {           
            XDocument xdoc=XDocument.Load("http://www.freegeoip.net/xml/" + ipAddress);
            var country = xdoc.Descendants("Response").Select(c => new
            {
                IpAddress = c.Element("IP")?.Value,
                CountryCode = c.Element("CountryCode")?.Value,
                CountryName = c.Element("CountryName")?.Value,
                RegionCode = c.Element("RegionCode")?.Value,
                RegionName = c.Element("RegionName")?.Value,
                City = c.Element("City")?.Value,
                ZipCode = c.Element("ZipCode")?.Value,
                TimeZone = c.Element("TimeZone")?.Value,
                Latitude = c.Element("Latitude")?.Value,
                Longitude = c.Element("Longitude")?.Value,
                MetroCode = c.Element("MetroCode")?.Value,
            });

             var countryData = country.First();
            Console.WriteLine("CountryName :" + countryData.CountryName 
                +Environment.NewLine + "CountryCode :"+countryData.CountryCode
                + Environment.NewLine + "RegionCode :"+countryData.RegionCode
                + Environment.NewLine + "RegionName :" + countryData.RegionName
                + Environment.NewLine + "City :" + countryData.City
                + Environment.NewLine + "ZipCode :" + countryData.ZipCode
                + Environment.NewLine + "TimeZone :" + countryData.TimeZone
                + Environment.NewLine + "Latitude :" + countryData.Latitude
                + Environment.NewLine + "Longitude :" + countryData.Longitude
                + Environment.NewLine + "MetroCode :" + countryData.MetroCode
                ); 
            
            Console.ReadKey();
        }

در متد main برنامه، متد ReadXmlElements را فراخوانی کرده و آدرس آی پی مورد نظر را پاس میدهیم:

static void Main(string[] args)
        {
            ReadXmlElements("162.158.88.214");
        }

که نتیجه‌ی نمونه‌ای از آن‌را در تصویر ذیل می‌توانید مشاهده کنید

یک نکته : برای مقایسه کد کشور بدست آمده، باید لیست کاملی از کشورهای جهان را در اختیار داشته باشید، تا بتوانید تصمیم بگیرید که آیا کشور درخواست کننده، مد نظر شما هست یا خیر. برای این‌کار، کلاسی را آماده کرده‌ام که شامل کل کشورهای جهان میباشد و نام و کد کشور‌ها، در آن وجود دارد؛ به صورت زیر:

public class WorldCountries
    {
        public string CountryCode { get; set; }
        public string CountryName { get; set; }

    }

 public static class GenerateCountries
    {
        public static IList<WorldCountries> CreateCountries()
        {
            return new[]
                {
new WorldCountries { CountryCode = "AF", CountryName = "Afghanistan"},
new WorldCountries { CountryCode = "AX", CountryName = "Åland Islands"},
new WorldCountries { CountryCode = "AL", CountryName = "Albania"},
new WorldCountries { CountryCode = "DZ", CountryName = "Algeria"},
new WorldCountries { CountryCode = "AS", CountryName = "American Samoa"},
new WorldCountries { CountryCode = "AD", CountryName = "Andorra"},
new WorldCountries { CountryCode = "AO", CountryName = "Angola"},
new WorldCountries { CountryCode = "AI", CountryName = "Anguilla"},
new WorldCountries { CountryCode = "AQ", CountryName = "Antarctica"},
new WorldCountries { CountryCode = "AG", CountryName = "Antigua and Barbuda"},
new WorldCountries { CountryCode = "AR", CountryName = "Argentina"},
new WorldCountries { CountryCode = "AM", CountryName = "Armenia"},
new WorldCountries { CountryCode = "AW", CountryName = "Aruba"},
new WorldCountries { CountryCode = "AU", CountryName = "Australia"},
new WorldCountries { CountryCode = "AT", CountryName = "Austria"},
new WorldCountries { CountryCode = "AZ", CountryName = "Azerbaijan"},
new WorldCountries { CountryCode = "BS", CountryName = "Bahamas"},
new WorldCountries { CountryCode = "BH", CountryName = "Bahrain"},
new WorldCountries { CountryCode = "BD", CountryName = "Bangladesh"},
new WorldCountries { CountryCode = "BB", CountryName = "Barbados"},
new WorldCountries { CountryCode = "BY", CountryName = "Belarus"},
new WorldCountries { CountryCode = "BE", CountryName = "Belgium"},
new WorldCountries { CountryCode = "BZ", CountryName = "Belize"},
new WorldCountries { CountryCode = "BJ", CountryName = "Benin"},
new WorldCountries { CountryCode = "BM", CountryName = "Bermuda"},
new WorldCountries { CountryCode = "BT", CountryName = "Bhutan"},
new WorldCountries { CountryCode = "BA", CountryName = "Bosnia and Herzegovina"},
new WorldCountries { CountryCode = "BW", CountryName = "Botswana"},
new WorldCountries { CountryCode = "BV", CountryName = "Bouvet Island"},
new WorldCountries { CountryCode = "BR", CountryName = "Brazil"},
new WorldCountries { CountryCode = "IO", CountryName = "British Indian Ocean Territory"},
new WorldCountries { CountryCode = "BN", CountryName = "Brunei Darussalam"},
new WorldCountries { CountryCode = "BG", CountryName = "Bulgaria"},
new WorldCountries { CountryCode = "BF", CountryName = "Burkina Faso"},
new WorldCountries { CountryCode = "BI", CountryName = "Burundi"},
new WorldCountries { CountryCode = "KH", CountryName = "Cambodia"},
new WorldCountries { CountryCode = "CM", CountryName = "Cameroon"},
new WorldCountries { CountryCode = "CA", CountryName = "Canada"},
new WorldCountries { CountryCode = "CV", CountryName = "Cape Verde"},
new WorldCountries { CountryCode = "KY", CountryName = "Cayman Islands"},
new WorldCountries { CountryCode = "CF", CountryName = "Central African Republic"},
new WorldCountries { CountryCode = "TD", CountryName = "Chad"},
new WorldCountries { CountryCode = "CL", CountryName = "Chile"},
new WorldCountries { CountryCode = "CN", CountryName = "China"},
new WorldCountries { CountryCode = "CX", CountryName = "Christmas Island"},
new WorldCountries { CountryCode = "CC", CountryName = "Cocos (Keeling) Islands"},
new WorldCountries { CountryCode = "CO", CountryName = "Colombia"},
new WorldCountries { CountryCode = "KM", CountryName = "Comoros"},
new WorldCountries { CountryCode = "CG", CountryName = "Congo"},
new WorldCountries { CountryCode = "CK", CountryName = "Cook Islands"},
new WorldCountries { CountryCode = "CR", CountryName = "Costa Rica"},
new WorldCountries { CountryCode = "HR", CountryName = "Croatia"},
new WorldCountries { CountryCode = "CU", CountryName = "Cuba"},
new WorldCountries { CountryCode = "CW", CountryName = "Curaçao"},
new WorldCountries { CountryCode = "CY", CountryName = "Cyprus"},
new WorldCountries { CountryCode = "CZ", CountryName = "Czech Republic"},
new WorldCountries { CountryCode = "DK", CountryName = "Denmark"},
new WorldCountries { CountryCode = "DJ", CountryName = "Djibouti"},
new WorldCountries { CountryCode = "DM", CountryName = "Dominica"},
new WorldCountries { CountryCode = "DO", CountryName = "Dominican Republic"},
new WorldCountries { CountryCode = "EC", CountryName = "Ecuador"},
new WorldCountries { CountryCode = "EG", CountryName = "Egypt"},
new WorldCountries { CountryCode = "SV", CountryName = "El Salvador"},
new WorldCountries { CountryCode = "GQ", CountryName = "Equatorial Guinea"},
new WorldCountries { CountryCode = "ER", CountryName = "Eritrea"},
new WorldCountries { CountryCode = "EE", CountryName = "Estonia"},
new WorldCountries { CountryCode = "ET", CountryName = "Ethiopia"},
new WorldCountries { CountryCode = "FK", CountryName = "Falkland Islands (Malvinas)"},
new WorldCountries { CountryCode = "FO", CountryName = "Faroe Islands"},
new WorldCountries { CountryCode = "FJ", CountryName = "Fiji"},
new WorldCountries { CountryCode = "FI", CountryName = "Finland"},
new WorldCountries { CountryCode = "FR", CountryName = "France"},
new WorldCountries { CountryCode = "GF", CountryName = "French Guiana"},
new WorldCountries { CountryCode = "PF", CountryName = "French Polynesia"},
new WorldCountries { CountryCode = "TF", CountryName = "French Southern Territories"},
new WorldCountries { CountryCode = "GA", CountryName = "Gabon"},
new WorldCountries { CountryCode = "GM", CountryName = "Gambia"},
new WorldCountries { CountryCode = "GE", CountryName = "Georgia"},
new WorldCountries { CountryCode = "DE", CountryName = "Germany"},
new WorldCountries { CountryCode = "GH", CountryName = "Ghana"},
new WorldCountries { CountryCode = "GI", CountryName = "Gibraltar"},
new WorldCountries { CountryCode = "GR", CountryName = "Greece"},
new WorldCountries { CountryCode = "GL", CountryName = "Greenland"},
new WorldCountries { CountryCode = "GD", CountryName = "Grenada"},
new WorldCountries { CountryCode = "GP", CountryName = "Guadeloupe"},
new WorldCountries { CountryCode = "GU", CountryName = "Guam"},
new WorldCountries { CountryCode = "GT", CountryName = "Guatemala"},
new WorldCountries { CountryCode = "GG", CountryName = "Guernsey"},
new WorldCountries { CountryCode = "GN", CountryName = "Guinea"},
new WorldCountries { CountryCode = "GW", CountryName = "Guinea-Bissau"},
new WorldCountries { CountryCode = "GY", CountryName = "Guyana"},
new WorldCountries { CountryCode = "HT", CountryName = "Haiti"},
new WorldCountries { CountryCode = "HM", CountryName = "Heard Island and McDonald Islands"},
new WorldCountries { CountryCode = "VA", CountryName = "Holy See (Vatican City State)"},
new WorldCountries { CountryCode = "HN", CountryName = "Honduras"},
new WorldCountries { CountryCode = "HK", CountryName = "Hong Kong"},
new WorldCountries { CountryCode = "HU", CountryName = "Hungary"},
new WorldCountries { CountryCode = "IS", CountryName = "Iceland"},
new WorldCountries { CountryCode = "IN", CountryName = "India"},
new WorldCountries { CountryCode = "ID", CountryName = "Indonesia"},
new WorldCountries { CountryCode = "IR", CountryName = "Iran"},
new WorldCountries { CountryCode = "IQ", CountryName = "Iraq"},
new WorldCountries { CountryCode = "IE", CountryName = "Ireland"},
new WorldCountries { CountryCode = "IM", CountryName = "Isle of Man"},
new WorldCountries { CountryCode = "IL", CountryName = "Israel"},
new WorldCountries { CountryCode = "IT", CountryName = "Italy"},
new WorldCountries { CountryCode = "JM", CountryName = "Jamaica"},
new WorldCountries { CountryCode = "JP", CountryName = "Japan"},
new WorldCountries { CountryCode = "JE", CountryName = "Jersey"},
new WorldCountries { CountryCode = "JO", CountryName = "Jordan"},
new WorldCountries { CountryCode = "KZ", CountryName = "Kazakhstan"},
new WorldCountries { CountryCode = "KE", CountryName = "Kenya"},
new WorldCountries { CountryCode = "KI", CountryName = "Kiribati"},
new WorldCountries { CountryCode = "KP", CountryName = "Korea"},
new WorldCountries { CountryCode = "KW", CountryName = "Kuwait"},
new WorldCountries { CountryCode = "KG", CountryName = "Kyrgyzstan"},
new WorldCountries { CountryCode = "LV", CountryName = "Latvia"},
new WorldCountries { CountryCode = "LB", CountryName = "Lebanon"},
new WorldCountries { CountryCode = "LS", CountryName = "Lesotho"},
new WorldCountries { CountryCode = "LR", CountryName = "Liberia"},
new WorldCountries { CountryCode = "LY", CountryName = "Libya"},
new WorldCountries { CountryCode = "LI", CountryName = "Liechtenstein"},
new WorldCountries { CountryCode = "LT", CountryName = "Lithuania"},
new WorldCountries { CountryCode = "LU", CountryName = "Luxembourg"},
new WorldCountries { CountryCode = "MO", CountryName = "Macao"},
new WorldCountries { CountryCode = "MK", CountryName = "Macedonia"},
new WorldCountries { CountryCode = "MG", CountryName = "Madagascar"},
new WorldCountries { CountryCode = "MW", CountryName = "Malawi"},
new WorldCountries { CountryCode = "MY", CountryName = "Malaysia"},
new WorldCountries { CountryCode = "MV", CountryName = "Maldives"},
new WorldCountries { CountryCode = "ML", CountryName = "Mali"},
new WorldCountries { CountryCode = "MT", CountryName = "Malta"},
new WorldCountries { CountryCode = "MH", CountryName = "Marshall Islands"},
new WorldCountries { CountryCode = "MQ", CountryName = "Martinique"},
new WorldCountries { CountryCode = "MR", CountryName = "Mauritania"},
new WorldCountries { CountryCode = "MU", CountryName = "Mauritius"},
new WorldCountries { CountryCode = "YT", CountryName = "Mayotte"},
new WorldCountries { CountryCode = "MX", CountryName = "Mexico"},
new WorldCountries { CountryCode = "FM", CountryName = "Micronesia"},
new WorldCountries { CountryCode = "MD", CountryName = "Moldova"},
new WorldCountries { CountryCode = "MC", CountryName = "Monaco"},
new WorldCountries { CountryCode = "MN", CountryName = "Mongolia"},
new WorldCountries { CountryCode = "ME", CountryName = "Montenegro"},
new WorldCountries { CountryCode = "MS", CountryName = "Montserrat"},
new WorldCountries { CountryCode = "MA", CountryName = "Morocco"},
new WorldCountries { CountryCode = "MZ", CountryName = "Mozambique"},
new WorldCountries { CountryCode = "MM", CountryName = "Myanmar"},
new WorldCountries { CountryCode = "NA", CountryName = "Namibia"},
new WorldCountries { CountryCode = "NR", CountryName = "Nauru"},
new WorldCountries { CountryCode = "NP", CountryName = "Nepal"},
new WorldCountries { CountryCode = "NL", CountryName = "Netherlands"},
new WorldCountries { CountryCode = "NC", CountryName = "New Caledonia"},
new WorldCountries { CountryCode = "NZ", CountryName = "New Zealand"},
new WorldCountries { CountryCode = "NI", CountryName = "Nicaragua"},
new WorldCountries { CountryCode = "NE", CountryName = "Niger"},
new WorldCountries { CountryCode = "NG", CountryName = "Nigeria"},
new WorldCountries { CountryCode = "NU", CountryName = "Niue"},
new WorldCountries { CountryCode = "NF", CountryName = "Norfolk Island"},
new WorldCountries { CountryCode = "MP", CountryName = "Northern Mariana Islands"},
new WorldCountries { CountryCode = "NO", CountryName = "Norway"},
new WorldCountries { CountryCode = "OM", CountryName = "Oman"},
new WorldCountries { CountryCode = "PK", CountryName = "Pakistan"},
new WorldCountries { CountryCode = "PW", CountryName = "Palau"},
new WorldCountries { CountryCode = "PS", CountryName = "Palestine"},
new WorldCountries { CountryCode = "PA", CountryName = "Panama"},
new WorldCountries { CountryCode = "PG", CountryName = "Papua New Guinea"},
new WorldCountries { CountryCode = "PY", CountryName = "Paraguay"},
new WorldCountries { CountryCode = "PE", CountryName = "Peru"},
new WorldCountries { CountryCode = "PH", CountryName = "Philippines"},
new WorldCountries { CountryCode = "PN", CountryName = "Pitcairn"},
new WorldCountries { CountryCode = "PL", CountryName = "Poland"},
new WorldCountries { CountryCode = "PT", CountryName = "Portugal"},
new WorldCountries { CountryCode = "PR", CountryName = "Puerto Rico"},
new WorldCountries { CountryCode = "QA", CountryName = "Qatar"},
new WorldCountries { CountryCode = "RE", CountryName = "Réunion"},
new WorldCountries { CountryCode = "RO", CountryName = "Romania"},
new WorldCountries { CountryCode = "RU", CountryName = "Russian Federation"},
new WorldCountries { CountryCode = "RW", CountryName = "Rwanda"},
new WorldCountries { CountryCode = "BL", CountryName = "Saint Barthélemy"},
new WorldCountries { CountryCode = "KN", CountryName = "Saint Kitts and Nevis"},
new WorldCountries { CountryCode = "LC", CountryName = "Saint Lucia"},
new WorldCountries { CountryCode = "MF", CountryName = "Saint Martin (French part)"},
new WorldCountries { CountryCode = "PM", CountryName = "Saint Pierre and Miquelon"},
new WorldCountries { CountryCode = "VC", CountryName = "Saint Vincent and the Grenadines"},
new WorldCountries { CountryCode = "WS", CountryName = "Samoa"},
new WorldCountries { CountryCode = "SM", CountryName = "San Marino"},
new WorldCountries { CountryCode = "ST", CountryName = "Sao Tome and Principe"},
new WorldCountries { CountryCode = "SA", CountryName = "Saudi Arabia"},
new WorldCountries { CountryCode = "SN", CountryName = "Senegal"},
new WorldCountries { CountryCode = "RS", CountryName = "Serbia"},
new WorldCountries { CountryCode = "SC", CountryName = "Seychelles"},
new WorldCountries { CountryCode = "SL", CountryName = "Sierra Leone"},
new WorldCountries { CountryCode = "SG", CountryName = "Singapore"},
new WorldCountries { CountryCode = "SX", CountryName = "Sint Maarten (Dutch part)"},
new WorldCountries { CountryCode = "SK", CountryName = "Slovakia"},
new WorldCountries { CountryCode = "SI", CountryName = "Slovenia"},
new WorldCountries { CountryCode = "SB", CountryName = "Solomon Islands"},
new WorldCountries { CountryCode = "SO", CountryName = "Somalia"},
new WorldCountries { CountryCode = "ZA", CountryName = "South Africa"},
new WorldCountries { CountryCode = "GS", CountryName = "South Georgia and the South Sandwich Islands"},
new WorldCountries { CountryCode = "SS", CountryName = "South Sudan"},
new WorldCountries { CountryCode = "ES", CountryName = "Spain"},
new WorldCountries { CountryCode = "LK", CountryName = "Sri Lanka"},
new WorldCountries { CountryCode = "SD", CountryName = "Sudan"},
new WorldCountries { CountryCode = "SR", CountryName = "Suriname"},
new WorldCountries { CountryCode = "SJ", CountryName = "Svalbard and Jan Mayen"},
new WorldCountries { CountryCode = "SZ", CountryName = "Swaziland"},
new WorldCountries { CountryCode = "SE", CountryName = "Sweden"},
new WorldCountries { CountryCode = "CH", CountryName = "Switzerland"},
new WorldCountries { CountryCode = "SY", CountryName = "Syrian Arab Republic"},
new WorldCountries { CountryCode = "TW", CountryName = "Taiwan"},
new WorldCountries { CountryCode = "TJ", CountryName = "Tajikistan"},
new WorldCountries { CountryCode = "TZ", CountryName = "Tanzania"},
new WorldCountries { CountryCode = "TH", CountryName = "Thailand"},
new WorldCountries { CountryCode = "TL", CountryName = "Timor-Leste"},
new WorldCountries { CountryCode = "TG", CountryName = "Togo"},
new WorldCountries { CountryCode = "TK", CountryName = "Tokelau"},
new WorldCountries { CountryCode = "TO", CountryName = "Tonga"},
new WorldCountries { CountryCode = "TT", CountryName = "Trinidad and Tobago"},
new WorldCountries { CountryCode = "TN", CountryName = "Tunisia"},
new WorldCountries { CountryCode = "TR", CountryName = "Turkey"},
new WorldCountries { CountryCode = "TM", CountryName = "Turkmenistan"},
new WorldCountries { CountryCode = "TC", CountryName = "Turks and Caicos Islands"},
new WorldCountries { CountryCode = "TV", CountryName = "Tuvalu"},
new WorldCountries { CountryCode = "UG", CountryName = "Uganda"},
new WorldCountries { CountryCode = "UA", CountryName = "Ukraine"},
new WorldCountries { CountryCode = "AE", CountryName = "United Arab Emirates"},
new WorldCountries { CountryCode = "GB", CountryName = "United Kingdom"},
new WorldCountries { CountryCode = "US", CountryName = "United States"},
new WorldCountries { CountryCode = "UM", CountryName = "United States Minor Outlying Islands"},
new WorldCountries { CountryCode = "UY", CountryName = "Uruguay"},
new WorldCountries { CountryCode = "UZ", CountryName = "Uzbekistan"},
new WorldCountries { CountryCode = "VU", CountryName = "Vanuatu"},
new WorldCountries { CountryCode = "VE", CountryName = "Venezuela"},
new WorldCountries { CountryCode = "VN", CountryName = "Viet Nam"},
new WorldCountries { CountryCode = "VG", CountryName = "British Virgin Islands"},
new WorldCountries { CountryCode = "VI", CountryName = "US Virgin Islands"},
new WorldCountries { CountryCode = "WF", CountryName = "Wallis and Futuna"},
new WorldCountries { CountryCode = "EH", CountryName = "Western Sahara"},
new WorldCountries { CountryCode = "YE", CountryName = "Yemen"},
new WorldCountries { CountryCode = "ZM", CountryName = "Zambia"},
new WorldCountries { CountryCode = "ZW", CountryName = "Zimbabwe"},
                };
        }
    }

دریافت کد کامل این پروژه

‫۷ سال و ۱۱ ماه قبل، شنبه ۱۵ آبان ۱۳۹۵، ساعت ۲۲:۴۰

جواد غدیری

اشتراک‌ها

پروژه Bootstro.js (طراحی تور مجازی معرفی بخشهای مختلف در صفحه وب)

پلاگینی برای طراحی تور مجازی معرفی یا راهنمایی بخشهای مختلف صفحه وب (guided tour) مخصوصا برای زمانی که کاربران برای اولین بار به صفحه وب شما وارد می‌شوند و بخش‌های جدید اضافه شده به این صفحه وب را می‌خواهید در یک نمای کلی و به صورت اجمالی معرفی کنید.

برای دیدن نسخه نمایشی دمو بر روی دکمه Click me! I'm Demo در صفحه ای که باز شد کلیک نمایید و برای ادامه دکمه‌های Next را کلیک کنید.

لینک دانلود پلاگین بر روی Github

پروژه Bootstro.js (طراحی تور مجازی معرفی بخشهای مختلف در صفحه وب)

‫۱۰ سال و ۴ ماه قبل، یکشنبه ۱ تیر ۱۳۹۳، ساعت ۲۱:۳۶

سیروان عفیفی

نظرات مطالب

Blazor 5x - قسمت یازدهم - مبانی Blazor - بخش 8 - کار با جاوا اسکریپت

امکان تهیه Custom Elements در NET 6 Blazor.

در آخرین نسخه Blazor این امکان فراهم شده است که بتوانیم از کامپوننت‌های Blazor درون پروژه‌های React/Vue, Angular, ... استفاده کنیم (+). البته این فیچر هنوز به صورت آزمایشی می‌باشد و ممکن است API آن تغییر کند.

در ادامه یک مثال از این قابلیت را مشاهده خواهید کرد.

ایجاد پروژه Blazor

یک دایرکتوری ایجاد کرده و درون آن یک پروژه blazorwasm با نام blazor_wasm ایجاد کنید:

dotnet new blazorwasm blazor_wasm

برای استفاده از این فیچر میبایست پکیج Microsoft.AspNetCore.Components.CustomElements را نصب کنیم:

dotnet add package Microsoft.AspNetCore.Components.CustomElements --version 0.1.0-alpha.21466.1

در ادامه یک کامپوننت Todo ایجاد خواهیم کرد:

@page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {

    public class TodoItem
    {
        public string? Title { get; set; }
        public bool IsDone { get; set; }
    }

    private List<TodoItem> todos = new();
    private string? newTodo;

    private async void AddTodo(MouseEventArgs e)
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

برای تبدیل کامپوننت فوق به یک Custom Element درون فایل Program.cs خط زیر را اضافه میکنیم:

builder.RootComponents.RegisterAsCustomElement<Todo>("todo-element");

استفاده از کامپوننت فوق درون یک پروژه React

npx create-react-app blazor_react && cd blazor_react

برای استفاده از Custom Element موردنظر دو خط زیر را به فایل public/index.html اضافه میکنیم:

<script src="_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

همچنین لازم است یک پراکسی نیز درون پروژه ایجاد کنیم (درون فایل package.json)؛ با اینکار اسکریپت‌های موردنیاز فوق از سمت سرور دریافت خواهند شد:

"proxy": "BLAZOR_APP_ADDRESS", // for example: http://localhost:5269

در نهایت درون فایل App.js می‌توانیم از کامپوننت Todo استفاده کنیم:

function App() {
  return (
    <div className="App">
      <todo-element />
    </div>
  );
}

export default App;

‫۲ سال و ۴ ماه قبل، پنجشنبه ۱۵ اردیبهشت ۱۴۰۱، ساعت ۰۸:۲۴

وحید محمدطاهری

مطالب

افزایش کارآیی گزارش‌ها در Stimulsoft

به صورت پیش فرض، تمام گزارشات Stimulsoft، قبل از رندر باید به صورت اسمبلی کامپایل شوند. در برنامه‌های NET. در صورتیکه اسمبلی در حافظه بارگذاری شده باشد، تا زمانیکه برنامه اصلی از حافظه خارج نشود، فایل اسمبلی قفل خواهد بود و امکان حذف و یا تغییر آن وجود ندارد.

در هر بار کامپایل گزارش، فایل اسمبلی کامپایل شده، در پوشه %Temp% ذخیره و در حافظه بارگذاری می‌شود. به هرحال، بارگذاری اسمبلی گزارش، سبب قفل شدن و اختصاص حافظه‌ای برای آن می‌شود.

همانطور که مشاهده می‌کنید در هر بار کامپایل گزارش، این فایل‌ها ساخته می‌شوند.

چندین راه حل برای رفع این مشکل وجود دارد:

استفاده گزارشات به صورت کلاس‌های #C در برنامه شما (با استفاده از Designer و Save as آن به صورت کلاس #C). در این صورت گزارش همزمان با کامپایل برنامه شما، کامپایل شده و در زمان فراخوانی، دیگر نیاز به کامپایل مجدد آن نیست.
اشکال: در صورتیکه قالب گزارش شما نیاز به تغییر داشته باشد، برنامه‌ی شما باید با کلاس‌های جدید گزارش مجددا کامپایل شود.
می‌توان گزارش را از طریق برنامه Designer به صورت اسمبلی ( dll ) ذخیره کرد.
اشکال: این روش برای مدیریت گزارش‌ها در طول ارتقاء آن‌ها مفید نمی‌باشد.
از گزارش کامپایل شده استفاده نکنید و به جای آن از تفسیر عبارات در گزارش استفاده کنید. برای فعالسازی این حالت، خصوصیت Calculation Mode گزارش را در پنجره خصوصیت‌ها در برنامه Designer بر روی Interpretation قرار دهید.
اشکال: این روش به این معنی است که تمامی اصطلاحات زبان C# / VB.NET تفسیر نمی‌شوند. همچنین استفاده از رخدادهای مربوط به اجزاء گزارش غیرممکن می‌باشد.
کامپایل و رندر گزارش، در دامنه‌ی برنامه‌ی دیگری انجام شود. در این مورد می‌توان پس از رندر گزارش، اسمبلی را در دامنه‌ی برنامه جاری بارگذاری کرد و فایل قفل شده‌ی آن، بعدا حذف خواهد شد. با استفاده از متد ()CreateReportInNewAppDomain از کلاس StiReport می‌توان گزارش را ایجاد کرد و با استفاده از متد ()UnloadReportAppDomain آن را بارگذاری کرد.
اشکال در این روش متدهای RegData و RegBusinessObject با سرعت خیلی کمی اجرا می‌شوند؛ چرا که هدایت داده‌ها به دامنه‌ی دیگری استفاده شده است. ایجاد و بارگذاری در دامنه‌ی برنامه نیازمند زمان می‌باشد.
کارآمدترین روش: کامپایل گزارش تنها در زمان اولین فراخوانی انجام شود و هر زمان که درخواست فراخوانی گزارش انجام می‌شود، گزارش را از اسمبلی کامپایل شده، در حافظه بارگذاری می‌کنیم. در این مورد تنها یک کپی از گزارش در حافظه ذخیره می‌شود و تنها یک اسمبلی در درایو وجود دارد. پوشه مربوط به گزارش‌های کامپایل شده می‌تواند قبل از استفاده از گزارشات حذف شود، چرا که در اولین درخواست گزارش، دوباره ایجاد خواهد شد.
مثال:

var report = new StiReport();
report.Load( "Report.mrt" );

var folder = Environment.GetFolderPath( Environment.SpecialFolder.LocalApplicationData );
folder = Path.Combine( folder, "Stimulsoft\\CompiledReports" );
folder = Path.Combine( folder, System.Runtime.InteropServices.RuntimeEnvironment.GetSystemVersion() );
var compiledReportFile = Path.Combine( folder, report.GetReportAssemblyCacheName() );

if ( File.Exists( compiledReportFile ) )
    report = StiReport.GetReportFromAssembly( compiledReportFile, true );
else
{
    if ( !Directory.Exists( folder ) ) Directory.CreateDirectory( folder );
    report.Compile( compiledReportFile );
}

report.RegBusinessObject( "TestData", new { Title = "Vahid " + DateTime.Now.Millisecond } );

report.Render( false );

همانطور که در مثال بالا مشاهده کنید، یک گزارش ساخته می‌شود و در صورت عدم وجود فایل کامپایل شده و یا تغییر در فایل گزارش، مجددا فایل گزارش با نام جدیدی کامپایل شده و نمایش داده می‌شود.

نکته: حتما بارگذاری دیتا مربوط به گزارش را بعد از عملیات کامپایل قراردهید.

‫۶ سال و ۱۱ ماه قبل، پنجشنبه ۱۸ آبان ۱۳۹۶، ساعت ۱۸:۲۰

وحید نصیری

مطالب

React 16x - قسمت 30 - React Hooks - بخش 1 - معرفی useState و useEffect

با استفاده از React Hooks که در نگارش 16.7.0 آن معرفی شدند، می‌توان در کامپوننت‌های تابعی «تا پیش از این» بدون حالت، به state و تمام قابلیت‌های دیگر React، دسترسی یافت. جهت یادآوری، در قسمت 8 این سری، کامپوننت‌های تابعی بدون حالت را معرفی کردیم. تا پیش از معرفی React Hooks، برای ردیابی تغییرات مقادیری خاص، می‌بایستی آن‌ها را در خاصیت state کامپوننت‌هایی که به صورت کلاس تعریف شده بودند، قرار می‌دادیم. بنابراین class components، تنها نوع کامپوننت‌هایی در React بودند که دسترسی به state را داشتند. شبیه به همین مورد، برای life-cycle hooks معرفی شده‌ی در قسمت 9 برقرار بود. برای مثال متد componentDidMount، تنها در class components، جهت دسترسی به یک API خارجی و انجام اعمال Ajax ای، قابل تعریف بود و کار کامپوننت‌های تابعی بدون حالت، بیشتر نمایش عناصر HTML و دریافت مقادیر خود از class components، توسط props بود. به این ترتیب امکان تجزیه‌ی یک UI پیچیده، به یک component tree با خوانایی بیشتری، میسر می‌شد. اما با معرفی React v16.7.0، از لحاظ فنی دیگر الزاما نیازی به class components وجود ندارد و می‌توان با استفاده از React Hooks، تمام قابلیت‌هایی را که پیشتر فقط توسط class components در اختیار داشتیم، اکنون با کامپوننت‌های تابعی نیز پیاده سازی کنیم.

برپایی پیش‌نیازها

در اینجا برای بررسی React Hooks، یک پروژه‌ی جدید React را ایجاد می‌کنیم:

> npm i -g create-react-app
> create-react-app sample-30
> cd sample-30
> npm start

در ادامه توئیتر بوت استرپ 4 را نیز نصب می‌کنیم. برای این منظور پس از باز کردن پوشه‌ی اصلی برنامه توسط VSCode، دکمه‌های ctrl+` را فشرده (ctrl+back-tick) و دستور زیر را در ترمینال ظاهر شده وارد کنید:

> npm install --save bootstrap

سپس برای افزودن فایل bootstrap.css به پروژه‌ی React خود، ابتدای فایل index.js را به نحو زیر ویرایش خواهیم کرد:

import "bootstrap/dist/css/bootstrap.css";

این import به صورت خودکار توسط webpack ای که در پشت صحنه کار bundling & minification برنامه را انجام می‌دهد، مورد استفاده قرار می‌گیرد.

همچنین اگر به فایل package.json موجود در ریشه‌ی پروژه دقت کنیم، برای کار با React-hooks، نیاز است نگارش بسته‌های React و React-dom، حداقل مساوی 16.7 باشند که در زمان نگارش این مطلب، نگارش 16.12.0 آن به صورت خودکار نصب می‌شود. بنابراین بدون مشکلی می‌توانیم شروع به کار با React hooks کنیم.

معرفی useState Hook

در اینجا قصد داریم یک شمارشگر را به همراه یک دکمه، در صفحه نمایش دهیم؛ بطوریکه این شمارشگر، تعداد بار کلیک بر روی دکمه را ردیابی می‌کند. از پیش می‌دانیم که برای ردیابی مقدار تعداد بار کلیک شدن، باید متغیر آن‌را درون state یک class component قرار داد:

import "./App.css";

import React, { Component } from "react";

class App extends Component {
  state = { count: 0 };

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <button onClick={this.incrementCount} className="btn btn-primary m-3">
        I was clicked {this.state.count} times!
      </button>
    );
  }
}

export default App;

در اینجا یک class component متداول را داریم که در آن دکمه‌ای تعریف شده‌است. سپس برای شمارش تعداد بار کلیک بر روی آن، خاصیت count را به شیء منتسب به state، با مقدار اولیه‌ی صفر، اضافه کرده‌ایم. اکنون هربار که بر روی آن کلیک می‌شود، رویدادگردان incrementCount فراخوانی شده و توسط متد this.setState، مقدار پیشین خاصیت count، بر اساس مقدار فعلی آن، یک واحد افزایش می‌یابد. نتیجه‌ی آن نیز در برچسب دکمه، نمایش داده می‌شود:

اکنون می‌خواهیم همین کامپوننت را توسط React hooks بازنویسی کنیم. در ابتدا، فایل app.js را به App‍Class.js، تغییر نام می‌دهیم تا نگارش قبلی class component را برای مقایسه، در اختیار داشته باشیم. در ادامه فایل جدید AppFunction.js را برای بازنویسی آن توسط یک کامپوننت تابعی، توسط میانبرهای imrc و سپس sfc در VSCode، ایجاد می‌کنیم. البته این تغییر نام فایل‌ها، نیاز به تغییر نام ماژول‌های import شده‌ی در فایل index.js را نیز به صورت زیر دارد:

//import App from "./App‍Class";
import App from "./AppFunction";

اولین سؤالی که اینجا مطرح می‌شود، این است: در این کامپوننت تابعی جدید، state را از کجا بدست بیاوریم؟
با React Hooks، بجای تعریف یک state به صورت خاصیت، آن‌را صرفا use می‌کنیم و این دقیقا نام اولین React Hooks ای است که بررسی می‌کنیم؛ یا همان useState. بنابراین ابتدا این شیء را import خواهیم کرد:

import React, { useState } from 'react';

useState یک تابع است و باید در ابتدای کامپوننت، مورد استفاده قرار گیرد. این متد برای شروع به کار، نیاز به یک state آغازین را دارد؛ دقیقا مانند همان‌کاری که در class component فوق انجام دادیم:

const App = () => {
    const [count, setCount] = useState(0);

در اینجا عدد صفر، همان مقدار آغازین متغیر count است (شبیه به کاری که در state = { count: 0 } انجام دادیم). سپس اولین خروجی متد useState که داخل یک آرایه مشخص شده‌است (JavaScript array destructuring ؛ با مزیت امکان انتخاب نام‌هایی دلخواه، بدون نیاز به تعریف alias، برخلاف حالت object destructuring)، همان متغیر count است که توسط state ردیابی خواهد شد. اینبار بجای متد this.setState قبلی که یک متد عمومی بود، متدی اختصاصی را صرفا جهت تغییر مقدار همین متغیر count، به نام setCount به عنوان دومین خروجی متد useState، تعریف می‌کنیم. در حقیقت تا اینجا امضای متد جنریک useState استفاده شده، به صورت زیر تغییر کرده‌است:

useState<number>(initialState: number | (() => number)): [number, React.Dispatch<React.SetStateAction<number>>]

متد useState، یک initialState را دریافت می‌کند و سپس یک عدد را (در اینجا چون مقدار آغازین، عددی است)، به همراه یک متد، جهت تغییر state آن، بازگشت می‌دهد:

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <button onClick={incrementCount} className="btn btn-primary m-3">
      I was clicked {count} times!
    </button>
  );
};

export default App;

- پس از تعریف useState، متد رویدادگردان onClick را همانند قبل تعریف می‌کنیم؛ با یک تغییر مهم: چون این متد داخل یک کامپوننت تابعی تعریف شده‌است، باید با const شروع شود و همانند یک متغیر که به آن متدی انتساب داده شده، معرفی گردد. پیشتر incrementCount تعریف شده‌ی داخل یک class component، یک خاصیت بود که متدی به آن انتساب داده شده بود.
- همچنین در اینجا (داخل این متد) دیگر خبری از this‌ها نیست؛ onClick، مستقیما به متغیر incrementCount اشاره می‌کند و {count} نیز مستقیما از خروجی useState، که به مقدار جاری count اشاره می‌کند، تامین می‌شود.
- اکنون با هربار کلیک بر روی این دکمه، متد منتسب به متغیر incrementCount فراخوانی شده و در داخل آن، همان متد setCount را جهت به روز رسانی state، فراخوانی می‌کنیم (بجای فراخوانی this.setState عمومی قبلی). در اینجا ابتدا مقدار جاری متغیر count در state، دریافت شده و سپس یک واحد به آن اضافه می‌شود. امضای متد جنریک setCount به صورت زیر است:

 const setCount: (value: React.SetStateAction<number>) => void

استفاده از مقدار قبلی state توسط useState

زمانیکه متد this.setState فراخوانی می‌شود، اینکار سبب در صف قرار گرفتن رندر مجدد کامپوننت جاری خواهد شد. همچنین اعمال این متد نیز ممکن است در صف قرار گیرد. یعنی اگر پس از فراخوانی this.setState، سعی در خواندن state به روز شده را داشته باشیم، ممکن است مقدار اشتباهی را دریافت کنیم:

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

برای نمونه در فراخوانی فوق، منظور از this.state.count، مقدار جاری یا همان مقدار قبلی count است که قرار است یک واحد به آن اضافه شود. اما چون متد this.setState کار به روز رسانی‌های state را نیز در صف قرار می‌دهد، دفعه‌ی بعدی که بر روی آن کلیک شد، الزامی ندارد که this.state.count، حتما در همان لحظه به روز رسانی شده باشد. برای رفع این مشکل می‌توان نوشت:

  incrementCount = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };

prevState در اینجا یعنی state قبلی و توسط متد setState، به صورت یک arrow function قابل دریافت است که در نهایت یک شیء را باز می‌گرداند. اکنون بر اساس state قبلی می‌توان به روز رسانی دقیقی را انجام داد.

این نکته در مورد کامپوننت‌های تابعی نیز وجود دارد:

  const incrementCount = () => {
    setCount(count + 1);
  };

در اینجا متغیر count، همانند خاصیت this.state.count کامپوننت‌های کلاسی عمل می‌کند. بنابراین الزامی ندارد که با هر بار فراخوانی setCount، مقدار جاری متغیر count، دقیقا به مقدار قبلی تنظیم شده‌ی آن اشاره کند. برای انجام مشابه اینکار با کامپوننت‌های تابعی که از useState استفاده می‌کنند، می‌توان به صورت زیر عمل کرد:

const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  };

در اینجا نیز امکان دسترسی به مقدار قبلی count، توسط یک arrow function وجود دارد که برخلاف حالت prevState، فقط یک مقدار عددی مرتبط با count را باز می‌گرداند.

به روز رسانی بیش از یک خاصیت در state

فرض کنید قصد داریم به مثال جاری، یک مربع را در صفحه اضافه کنیم که با کلیک بر روی آن، رنگش تغییر می‌کند (خاموش و روشن می‌شود):

در حالت AppClass یا کامپوننت کلاسی، کدهای برنامه به صورت زیر تغییر می‌کنند:

import "./App.css";

import React, { Component } from "react";

class App extends Component {
  state = {
    count: 0,
    isOn: false
  };

  incrementCount = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };

  toggleLight = () => {
    this.setState(prevState => ({
      isOn: !prevState.isOn
    }));
  };

  render() {
    return (
      <>
        <h1>App Class</h1>
        <h2>Counter</h2>
        <button onClick={this.incrementCount} className="btn btn-primary m-3">
          I was clicked {this.state.count} times!
        </button>

        <h2>Toggle Light</h2>
        <div
          style={{
            height: "50px",
            width: "50px",
            cursor: "pointer"
          }}
          className={
            this.state.isOn ? "alert alert-info m-3" : "alert alert-warning m-3"
          }
          onClick={this.toggleLight}
        />
      </>
    );
  }
}

export default App;

توضیحات:
- در متد رندر، نیاز است تا تنها یک child، بازگشت داده شود. به همین جهت می‌توان از React.Fragment، برای محصور سازی المان‌های تعریف شده، استفاده کرد. البته در React 16.7.0، دیگر نیازی به ذکر صریح React.Fragment نبوده و فقط می‌توان نوشت </><> تا بیانگر یک فرگمنت باشد.
- سپس یک div تعریف شده که با استفاده از ویژگی style، یک سری شیوه‌نامه‌ی ابتدایی، مانند طول و عرض و نوع اشاره‌گر ماوس آن، تعیین شده‌اند.
- اکنون برای اینکه بتوان با کلیک بر روی این div، رنگ آن‌را تغییر داد، نیاز است بتوان توسط متغیری، مقدار خاموش و روشن بودن را ردیابی کرد. به همین جهت خاصیت جدید isOn را به state اضافه می‌کنیم.
- در آخر، رویداد onClick این div را به متد رویدادگران toggleLight متصل می‌کنیم تا توسط آن و فراخوانی this.setState، بتوان مقدار قبلی isOn را در state، دریافت و سپس آن‌را معکوس کرد و بجای مقدار جاری isOn در state درج کنیم. این فراخوانی، سبب رندر مجدد کامپوننت جاری شده و در نتیجه‌ی آن، مقدار className را بر اساس مقدار this.state.isOn، به صورت پویا تغییر می‌دهد.

برای مشاهده‌ی خروجی برنامه در این حالت، نیاز است به index.js مراجعه و تغییر زیر را اعمال کرد تا کامپوننت App، از ماژول App‍Class تامین شود:

import App from "./App‍Class";
//import App from "./AppFunction";

اکنون قصد داریم دقیقا معادل همین قطعه کد را در کامپوننت تابعی خود پیاده سازی کنیم. به همین جهت به فایل src\AppFunction.js بازگشته و تغییرات زیر را اعمال می‌کنیم:

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const [isOn, setIsOn] = useState(false);

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  };

  const toggleLight = () => {
    setIsOn(prevIsOn => !prevIsOn);
  };

  return (
    <>
      <h1>App Function</h1>
      <h2>Counter</h2>
      <button onClick={incrementCount} className="btn btn-primary m-3">
        I was clicked {count} times!
      </button>

      <h2>Toggle Light</h2>
      <div
        style={{
          height: "50px",
          width: "50px",
          cursor: "pointer"
        }}
        className={isOn ? "alert alert-info m-3" : "alert alert-warning m-3"}
        onClick={toggleLight}
      />
    </>
  );
};

export default App;

توضیحات:
- اگر دقت کنید، کلیات این کامپوننت تابعی، با کامپوننت کلاسی، آنچنان متفاوت نیست. متد رندر آن دقیقا همان markup را بازگشت می‌دهد؛ با یک تفاوت مهم: در اینجا دیگر نیازی به ذکر thisها نیست، چون تمام ارجاعات، به متغیرهای داخل تابع App انجام شده‌است و نه به متدها و یا خاصیت‌های یک کلاس.
- مرحله‌ی بعد تغییر، جایگزینی this.state.isOn قبلی، با یک متغیر درون تابع App است. به همین جهت در اینجا یک useState دیگر را تعریف می‌کنیم. هر useState، تنها به قسمتی از state اشاره می‌کند و مانند خاصیت کلی state مربوط به یک کلاس نیست. همچنین در خاصیت state یک کلاس، مقدار آن همواره به یک شیء اشاره می‌کند؛ اما با useState چنین اجباری وجود ندارد و می‌تواند هر نوع مجاز جاوا اسکریپتی باشد. برای مثال در اینجا مقدار اولیه‌ی آن به false تنظیم شده‌است. پس از آن، خروجی این متد، قسمتی از state را که کنترل می‌کند، به نام متغیر isOn و تنظیم کننده‌ی آن‌را به نام متد setIsOn، معرفی خواهد کرد. متد useState، یک متد جنریک است. یعنی نوع خروجی‌های آن بر اساس نوع مقدار اولیه‌ای که به آن انتساب داده می‌شود، تعیین می‌شود. برای مثال اگر نوع مقدار اولیه‌ی آن، Boolean باشد، به صورت خودکار نوع متغیر و پارامتر متد خروجی از آن نیز Boolean خواهند بود.
- در آخر خاصیت toggleLight کلاس کامپوننت، تبدیل به یک متغیر یا ثابت، در تابع جاری App می‌شود و بجای this.setState کلی قبلی، از متد اختصاصی‌تر setIsOn، برای تغییر مقدار state متناظر، کمک گرفته خواهد شد. در اینجا با استفاده از prevIsOn، به مقدار دقیق پیشین متغیر isOn در state، دسترسی یافته و سپس آن‌را معکوس می‌کنیم.

برای مشاهده‌ی خروجی برنامه در این حالت، نیاز است به index.js مراجعه و تغییر زیر را اعمال کرد تا کامپوننت App، از ماژول App‍Function تامین شود:

// import App from "./App‍Class";
import App from "./AppFunction";

معرفی useEffect Hook

فرض کنید قصد داریم برچسب دکمه‌ی «I was clicked {this.state.count} times» را در المان Title صفحه، نمایش دهیم. برای انجام چنین کاری نیاز است با DOM API تعامل داشته باشیم؛ اما پیشتر یک چنین کاری را تنها با class components می‌شد انجام داد. برای رفع این محدودیت در کامپوننت‌های تابعی، hook جدیدی به نام useEffect، ارائه شده‌است که باید import شود:

import React, { useEffect, useState } from "react";

اکنون این سؤال مطرح می‌شود که در متد useEffect، واژه‌ی Effect به چه چیزی اشاره می‌کند؟
در اینجا effect به معنای side effect و یا اثرات جانبی است؛ مانند: تعامل با یک API خارجی، کار با API مرورگر و کلا هر جائیکه در برنامه با دنیای خارج تعاملی وجود دارد، به عنوان یک side effect شناخته می‌شود. بنابراین با استفاده متد useEffect، می‌توان در کامپوننت‌های تابعی نیز با دنیای خارج، تعامل برقرار کرد.

import React, { useEffect, useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You have clicked ${count} times`;
  });

متد useEffect، یک تابع را به عنوان ورودی دریافت کرده (effect function) و آن‌را پس از هر بار رندر کامپوننت جاری، اجرا می‌کند. برای مثال با تغییر state، کار رندر کامپوننت جاری، در صف قرار می‌گیرد و پس از اتمام رندر، تابع effect ذکر شده، اجرا می‌شود. برای مثال در اینجا پس از هر بار رندر کامپوننت، document.title با عبارتی که به همراه تعداد بار کلیک کردن بر روی دکمه‌است، به روز رسانی می‌شود:

در اولین بار اجرای برنامه، عبارت «You have clicked 0 times»، در عنوان صفحه‌ی جاری، ظاهر می‌شود که از مقدار پیش‌فرض count، استفاده کرده‌است. اکنون اگر بر روی دکمه، کلیک کنیم، پس از تغییر برچسب دکمه (یا همان رندر کامپوننت، پس از تغییری در state)، آنگاه عنوان نمایش داده شده‌ی در مرورگر نیز تغییر می‌کند.

یک نکته: چون useEffect دارای همان scope متغیر count است، نیاز به API خاصی برای خواندن مقدار آن در اینجا نیست.

سؤال: برای پیاده سازی چنین قابلیتی در یک کامپوننت کلاسی چه باید کرد؟ در این مثال، در ابتدای کار باید مقدار پیش‌فرض موجود در state را در عنوان صفحه مشاهده کرد و پس از هربار به روز رسانی state نیز باید این عنوان، تغییر کند.
برای پیاده سازی معادل متد useEffect ای که در یک کامپوننت تابعی استفاده شد، در اینجا باید از دو life-cycle hook متفاوت، به نام‌های componentDidMount و componentDidUpdate، استفاده کنیم:

class App extends Component {

  componentDidMount() {
    document.title = `You have been clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You have been clicked ${this.state.count} times`;
  }

- برای به روز رسانی عنوان صفحه، در اولین بار نمایش آن، باید از متد componentDidMount استفاده کرد.
- همچنین چون می‌خواهیم به ازای هر تغییری در state نیز این عنوان تغییر کند (با هر بار کلیک بر روی دکمه)، باید از متد componentDidUpdate هم استفاده کنیم.

پاکسازی اثرات جانبی در useEffect Hook

فرض کنید قصد داریم موقعیت فعلی کرسر ماوس را در مرورگر نمایش دهیم. برای انجام اینکار در کامپوننت کلاسی، می‌توان از متد componentDidMount جهت دسترسی به DOM API و استفاده از متد addEventListener آن، برای گوش فرا دادن به حرکات کرسر ماوس، استفاده کرد:

class App extends Component {

  componentDidMount() {
    // ...
    window.addEventListener("mousemove", this.handleMouseMove);
  }

دومین پارامتر این متد، یک callback function است که این حرکات را ردیابی می‌کند:

  handleMouseMove = event => {
    this.setState({
      x: event.pageX,
      y: event.pageY
    });
  };

در اینجا می‌توان با استفاده از شیء رخداد دریافتی، موقعیت x و y کرسر ماوس را در صفحه دریافت کرد و سپس با فراخوانی متد this.setState، این خواص را در state کامپوننت، اضافه و یا به روز رسانی نمود. بنابراین در این حالت الزامی به تعریف این خواص در شیء منتسب به state نیست؛ اما حداقل با تعریف آن‌ها می‌توان مقدار اولیه‌ای را برایشان درنظر گرفت:

class App extends Component {
  state = {
    //...
    x: 0,
    y: 0
  };

در آخر برای نمایش این اطلاعات موجود در state، می‌توان چنین المان‌هایی را به متد رندر کامپوننت، اضافه کرد:

<h2>Mouse Position</h2>
<p>X position: {this.state.x}</p>
<p>Y position: {this.state.y}</p>

بنابراین ردیابی تغییرات محل کرسر ماوس نیز یک side effect است که برای دسترسی به آن، نیاز است با window API کار کرد و این side effect‌ها دو نوع هستند:
- تعدادی از آن‌ها نیازی به پاکسازی و خارج شدن از حافظه را ندارند؛ مانند به روز رسانی عنوان صفحه در مرورگر. می‌توان یک چنین side effect هایی را اجرا و سپس آن‌ها را فراموش کرد.
- اما تعدادی از side effect‌ها را حتما باید پاکسازی کرد؛ مانند mousemove listener تعریف شده‌ی در مثال فوق. در اینجا زمانیکه کامپوننت جاری mount می‌شود، این listener را تعریف می‌کنیم؛ اما با Unmount شدن آن، باید این listener را حذف کرد تا برنامه دچار نشتی حافظه نشود (اگر اینکار انجام نشود، در این مثال مرورگر هنگ خواهد کرد!). روش انجام اینکار در متد componentWillUnmount، به صورت زیر است:

  componentWillUnmount() {
    window.removeEventListener("mousemove", this.handleMouseMove);
  }

سؤال: یک چنین قابلیتی را چگونه می‌توان در یک کامپوننت تابعی تعریف کرد؟
در این حالت نیز می‌توان از متد useEffect استفاده کرد. البته ابتدا باید state شیء ای را برای نگهداری اطلاعات به روز موقعیت مکانی کرسر ماوس، ایجاد کرد:

const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

همانطور که عنوان شد، متد useState، برخلاف خاصیت کلی state یک کامپوننت کلاسی که فقط اشیاء را می‌پذیرد، هر نوع جاوا اسکریپتی را می‌تواند بپذیرد که در اینجا برای نمونه به یک شیء، تنظیم شده‌است.
سپس side effect خود را در قسمت effect function متد useEffect قرار می‌دهیم که آن نیز به متغیر handleMouseMove اشاره می‌کند:

  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    // ...
    window.addEventListener("mousemove", handleMouseMove);
  });

  const handleMouseMove = event => {
    setMousePosition({
      x: event.pageX,
      y: event.pageY
    });
  };

به متغیر handleMouseMove، متدی انتساب داده شده‌است که با فراخوانی آن توسط mousemove listener، یک شیء evenet دریافت و سپس بر اساس خواص آن، خواص x و y شیء موجود در state، توسط متد setMousePosition، به روز رسانی می‌شود.
سپس برای نمایش x و y به روز رسانی شده‌ی در state، می‌توان از markup زیر در متد رندر استفاده کرد.

<h2>Mouse Position</h2>
{JSON.stringify(mousePosition, null, 2)}
<br />

اکنون سؤال اینجا است که معادل متد componentWillUnmount در اینجا چیست؟
اگر effect function تعریف شده، دارای یک خروجی (از نوع تابع) باشد، به این معنا است که این side effect، نیاز به پاکسازی دارد و این متد را در زمان Unmount آن فراخوانی می‌کند:

  useEffect(() => {
    // …
    // componentDidMount & componentDidUpdate
    window.addEventListener("mousemove", handleMouseMove);

    // componentWillUnmount
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  });

پیشتر آموختیم که effect function، تنها یکبار اجرا نمی‌شود؛ بلکه به ازای هر بار رندر، یکبار پس از آن اجرا می‌شود. یعنی خروجی آن نه فقط در زمان Unmount اجرا می‌شود، بلکه یکبار هم پیش از هر بار اجرای خود effect اجرا می‌گردد. به این ترتیب در اینجا فرصت پاکسازی اجرای قبلی را نیز خواهیم داد. بنابراین روش پاکسازی آن نسبت به متد componentWillUnmount کامپوننت‌های تابعی، پیشرفته‌تر است. یعنی توسط آن می‌توان یک side effect خاص را پیش و پس از هر بار رندر، در صورت نیاز فراخوانی کرد.

سؤال: اگر بخواهیم از اجرای یک side effect، به ازای هر بار رندر جلوگیری کنیم، چه باید کرد؟

برای اینکار می‌توان آرگومان دومی را به متد useEffect اضافه کرد که آرایه‌ای از مقادیر است. توسط اعضای آن می‌توان مقدار و یا مقادیری را مشخص کرد که side effect تعریف شده، به آن وابسته‌است. اکنون اگر این مقدار تغییر کند، آنگاه side effect متناظر با آن نیز اجرا می‌شود:

  useEffect(() => {
    document.title = `You have clicked ${count} times`;
    window.addEventListener("mousemove", handleMouseMove);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  },[]);

در این مثال، چون پارامتر دوم را به صورت یک آرایه‌ی خالی مقدار دهی کرده‌ایم، effect function تعریف شده تنها در زمان mount و unmount اجرا می‌شود. البته اگر این تغییر را ذخیره کرده و برنامه را اجرا کنیم، تمام قسمت‌های تعریف شده‌ی آن به خوبی کار می‌کنند (با کلیک بر روی دکمه، برچسب آن به روز رسانی می‌شود و یا با حرکت کرسر ماوس در صفحه، موقعیت آن گزارش داده می‌شود)، منهای قسمت به روز رسانی عنوان صفحه با هر بار کلیک. علت اینجا است که با تغییر معرفی شده، دیگر حالت componentDidUpdate توسط متد useEffect پوشش داده نمی‌شود و به این ترتیب با هر بار به روز رسانی state و رندر کامپوننت، دیگر کار به اجرای مجدد side effect آن نمی‌رسد.
برای رفع این مشکل، باید به useEffect اعلام کنیم که side effect تعریف شده‌ی در آن، وابسته‌است به مقدار count و با تغییرات آن در state، نیاز است مجددا اجرا شود:

  useEffect(() => {
   // ...
  },[count]);

به همین جهت در آرایه‌ی تعریف شده، مقداری را که به آن وابستگی وجود دارد، مشخص می‌کنیم. با این تغییر اگر بر روی دکمه کلیک کنیم، چون اکنون useEffect می‌داند که باید تغییرات count را ردیابی کند، با اجرای مجدد effect function خود، عنوان صفحه نیز به روز رسانی خواهد شد.

کار با چندین listener مختلف در متد useEffect

سؤال: آیا تنظیم یک وابستگی خاص در متد useEffect، امکان تنظیم event listenerهای دیگر را غیرممکن می‌کند؟
برای پاسخ به این سؤال، چند event listener دیگر را ثبت می‌کنیم. برای مثال یکی دیگر از APIهای مرورگر، navigator نام دارد که توسط آن می‌توان وضعیت آنلاین و آفلاین بودن را به کمک خروجی خاصیت navigator.onLine آن، مشخص کرد. به کمک این API می‌خواهیم این وضعیت را نمایش دهیم. برای این منظور ابتدا state آن‌را در کامپوننت تابعی، ایجاد می‌کنیم:

const [status, setStatus] = useState(navigator.onLine);

مقدار اولیه‌ی این state را نیز توسط مقدار جاری خاصیت navigator.onLine، مشخص کرده‌ایم.
اکنون برای گوش فرا دادن به تغییرات این خاصیت (online و یا offline شدن کاربر)، نیاز است دو event listener را به کمک متد addEventListener ثبت کنیم و همچنین این متدها نیاز به پاکسازی هم دارند:

  useEffect(() => {
    // ...

    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

    return () => {
      // ...
  
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, [count]);

پس از ثبت event listener ها، اکنون می‌توان با هربار فراخوانی آن‌ها توسط مرورگر، وضعیت state آن‌را به true و یا false، تغییر داد:

  const handleOnline = () => {
    setStatus(true);
  };

  const handleOffline = () => {
    setStatus(false);
  };

و در آخر مقدار متغیر status را به نحو زیر در متد رندر، نمایش داد:

<h2>Network Status</h2>
<p>
  You are <strong>{status ? "online" : "offline"}</strong>
</p>

برای آزمایش حالت offline آن، فقط کافی است به ابزار توسعه دهندگان مرورگر مراجعه کرده و در برگه‌ی network آن، حالت online را offline کنید:

در این حالت هم نمایش وضعیت آنلاین بودن کاربر به درستی کار می‌کند و هم سایر قسمت‌هایی که تاکنون اضافه کرده‌ایم. به این معنا که هر چند توسط ذکر پارامتر [count]، وابستگی خاصی برای side effect ویژه‌ای، مشخص شده‌است، اما ما را از تنظیم event listener‌های دیگری در قسمت‌های mount و unmount محروم نمی‌کند.

پاکسازی اثرات جانبی در useEffect Hook، زمانیکه روشی برای آن وجود ندارد

در مثالی دیگر می‌خواهیم از API موقعیت جغرافیایی کاربر در مرورگر یا navigator.geolocation استفاده کنیم. توسط این API هم می‌توان طول و عرض جغرافیایی را به دست آورد و هم تغییرات آن‌را تحت نظر قرار داد. برای مثال با بررسی این تغییرات می‌توان سرعت را نیز به دست آورد.
در این حالت نیز ابتدا با تعریف state مختص به آن شروع می‌کنیم و اینبار به عنوان مثال، مقدار اولیه‌ی آن‌را خارج از تابع جاری تنظیم می‌کنیم (جهت نمایش یک گزینه‌ی مهیای دیگر):

const initialLocationState = {
  latitude: null,
  longitude: null,
  speed: null
};

const App = () => {
  // ...
  const [location, setLocation] = useState(initialLocationState);

سپس جهت کار با این API، مقدار اولیه‌ی موقعیت کاربر و همچنین ردیابی تغییرات آن‌را در متد useEffect، تنظیم می‌کنیم:

  useEffect(() => {
    // ...

    navigator.geolocation.getCurrentPosition(handleGeolocation);
    const watchId = navigator.geolocation.watchPosition(handleGeolocation);

    return () => {
      // ...
      navigator.geolocation.clearWatch(watchId);
    };
  }, [count]);

در اینجا متد getCurrentPosition، با متد addEventListener متفاوت است و تنها یک callback function را دریافت می‌کند که در آن می‌توان setLocation را جهت به روز رسانی موقعیت جاری جغرافیایی کاربر، فراخوانی کرد. مشکلی که با این متد وجود دارد، نداشتن معادلی شبیه به متد removeEventListener است. یعنی API آن روشی را برای unmount آن فراهم نکرده‌است. البته متد watchPosition که تغییرات موقعیت کاربر را ردیابی می‌کند، دارای API مخصوص پاکسازی آن نیز هست که در این کدها ذکر شده‌است.

یک روش برای حل این مشکل و غیرفعال کردن دستی listener متد getCurrentPosition پس از unmount، تعریف یک متغیر mounted پیش از متد useEffect است:

  let mounted = true;

  useEffect(() => {
   // ...

    return () => {
      // ...
      mounted = false;
    };
  }, [count]);

و آن‌را در زمان پاکسازی useEffect، با false مقدار دهی می‌کنیم. اکنون زمانیکه می‌خواهیم رویدادگردان این Listener را تعریف کنیم، تنها بر اساس مقدار متغیر mounted عمل خواهیم کرد که از نشتی حافظه‌ی آن جلوگیری می‌کند:

  const handleGeolocation = event => {
    if (mounted) {
      setLocation({
        latitude: event.coords.latitude,
        longitude: event.coords.longitude,
        speed: event.coords.speed
      });
    }
  };

در آخر هم برای نمایش آن در متد رندر به صورت زیر عمل می‌کنیم:

<h2>Geolocation</h2>
<p>Latitude is {location.latitude}</p>
<p>Longitude is {location.longitude}</p>
<p>Your speed is {location.speed ? location.speed : "0"}</p>

سؤال: در اینجا شیء location چندین بار تکرار شده‌است. آیا می‌توان مقادیر خواص آن‌را توسط Object Destructuring نیز به دست آورد؟
پاسخ: بله. در اینجا هم Object Destructuring بر روی location state، کار می‌کند:

const [{ latitude, longitude, speed }, setLocation] = useState(
    initialLocationState
  );

که پس از آن، دیگر نیازی به تکرار شیء location نخواهد بود:

<h2>Geolocation</h2>
<p>Latitude is {latitude}</p>
<p>Longitude is {longitude}</p>
<p>Your speed is {speed ? speed : "0"}</p>

کدهای کامل این قسمت را از اینجا می‌توانید دریافت کنید: sample-30-part-01.zip

‫۴ سال و ۹ ماه قبل، شنبه ۳۰ آذر ۱۳۹۸، ساعت ۱۲:۱۰

محسن کریمی

اشتراک‌ها

روش های استفاده از ng-class در AngularJs

چند روش استفاده از ng-class در anuglarjs بررسی میکند

String syntax

<div ng-class="textType">Look! I'm Words!</div>

Array syntax

<div ng-class="[styleOne, styleTwo]">Look! I'm Words!</div>

Evaluted Expression

<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

Ternary Operator

ng-class="$even ? 'even-row' : 'odd-row'">

و .......

روش های استفاده از ng-class در AngularJs

‫۱۰ سال و ۲ ماه قبل، دوشنبه ۲۷ مرداد ۱۳۹۳، ساعت ۰۲:۰۹

سینا سلطانی

مطالب

پَرباد - آموزش پیاده‌سازی پرداخت آنلاین در دات نت - آموزش پیشرفته

در قسمت قبل، با تنظیمات پَرباد آشنا شدیم. در این مقاله قصد داریم سایر امکانات قابل استفاده را آموزش دهیم.

آنچه شما در این مقاله یاد خواهید گرفت:

ایجاد صورت حساب پرداخت با استفاده از InvoiceBuilder
درگاه مجازی
استفاده از پروکسی
توکن پرداخت
تزریق وابستگی
Logging

ایجاد صورت حساب با استفاده از InvoiceBuilder

InvoiceBuilder به شما کمک می‌کند تا یک صورت حساب را جهت پرداخت آماده کنید.

مثال زیر را در نظر بگیرید:

var result = _onlinePayment.Request(Gateways.Mellat, 123, 25000, "http://www.mywebsite.com/foo/bar/");

همانطور که مشخص است، در این مثال یک صورت حساب با شماره رهگیری ۱۲۳ به مبلغ ۲۵۰۰۰ با یک آدرس بازگشتی به درگاه بانک ملت درخواست داده می‌شود.

اما همین دستور را با کمک InvoiceBuilder نیز می‌توان ایجاد کرد.

نمونه مثال بالا با استفاده از InvoiceBuilder

var result = _onlinePayment.Request(invoice =>
{
    invoice
          .SetTrackingNumber(123)
          .SetAmount(25000)
          .SetCallbackUrl("http://www.mywebsite.com/foo/bar/")
          .UseGateway(Gateways.Mellat);
});

مسلما استفاده از روش اول ساده‌تر به نظر می‌رسد. اما InvoiceBuilder امکانات دیگری را نیز به شما جهت ایجاد یک صورت حساب می‌دهد. در واقع InvoiceBuilder ایجاد یک صورت حساب را به هر روشی که در نظر داشته باشید برای شما میسر می‌کند و همچنین قابل توسعه در اپلیکیشن شما توسط خودتان است.

در زیر نمونه‌هایی از کارایی آن را بررسی می‌کنیم.

تولید اتوماتیک کد رهگیری به صورت افزایشی
تولید اتوماتیک کد رهگیری به صورت تصادفی
ایجاد یک تولید کننده کد رهگیری توسط شما
صورت حساب سفارشی برای امکانات اختصاصی درگاه‌های بانکی

تولید اتوماتیک کد رهگیری به صورت افزایشی

در این روش، کد رهگیری (TrackingNumber) که مورد نیاز درگاه‌های بانکی است، به صورت اتوماتیک در هنگام ایجاد درخواست پرداخت، توسط پَرباد تولید می‌شود.

var result = _onlinePayment.Request(invoice =>
{
    invoice
          .UseAutoIncrementTrackingNumber()
          .SetAmount(25000)
          .SetCallbackUrl("http://www.mywebsite.com/foo/bar/")
          .UseGateway(Gateways.Mellat);
});

کد تولید شده، به صورت افزایشی است. در واقع در هر درخواست پرداخت جدید، یک کد رهگیری تولید می‌شود که یک واحد از کد تولید شده‌ی قبلی بیشتر است.

شما همچنین می‌توانید مقدار اولیه این عدد را جهت شروع تولید، در پارامتر متد تعیین کنید. این مقدار همچنین در قسمت تنظیمات پَرباد نیز توسط متد ConfigureAutoTrackingNumber قابل تنظیم است.

تولید اتوماتیک کد رهگیری به صورت تصادفی

var result = _onlinePayment.Request(invoice =>
{
    invoice
          .UseAutoRandomTrackingNumber()
          .SetAmount(25000)
          .SetCallbackUrl("http://www.mywebsite.com/foo/bar/")
          .UseGateway(Gateways.Mellat);
});

در این روش کد رهگیری، به صورت تصادفی در محدوده Int64 توسط پَرباد تولید خواهد شد. کد‌های تولید شده در این روش تقریبا ٪۹۹.۹ غیر تکراری هستند. اما اگر به تمیز بودن کدهای تولید شده اهمیت می‌دهید، بهتر است از روش AutoIncrement که بالاتر توضیح داده شد، استفاده کنید.

ایجاد یک تولید کننده کد رهگیری توسط شما

اگر بنا به دلایلی قصد دارید خودتان نیز یک منبع تولید کد رهگیری را ایجاد کنید، می‌توانید به روش زیر عمل کنید.

public class MyTrackingNumberProvider : ITrackingNumberProvider
{
    public Task<long> ProvideAsync(CancellationToken cancellationToken = new CancellationToken())
    {
        // تولید و برگشت کد در اینجا
    }
}

نکته ۱: شما همچنین می‌توانید در منبع خود، از تزریق وابستگی‌ها نیز استفاده کنید. بدیهی است سرویسی را که تزریق می‌کنید، باید از قبل توسط سیستم تزریق وابستگی‌های اپلیکیشن شما، ثبت شده باشد.

نکته ۲؛ شما همچنین می‌توانید بدون ایجاد هیچ منبعی، به راحتی از متد SetTrackingNumber در InvoiceBuilder (که بالاتر توضیح داده شده) استفاده کنید.

سپس در هنگام ایجاد درخواست پرداخت به روش زیر از منبع خود استفاده کنید:

var result = _onlinePayment.Request(invoice =>
{
    invoice
          .UseTrackingNumberProvider<MyTrackingNumberProvider>()
          //  یا 
          .UseTrackingNumberProvider(new MyTrackingNumberProvider())
          //  یا 
          .UseTrackingNumberProvider(services => new MyTrackingNumberProvider())
});

همانطور که می‌بینید، متد‌های مختلفی جهت استفاده از منبع مورد نظر شما موجود است.

صورت حساب سفارشی برای امکانات اختصاصی درگاه‌های بانکی

درگاه‌های بانکی علاوه بر سرویس‌های پرداخت عادی، امکانات مختلفی دیگری را نیز ارائه می‌کنند. برای مثال بانک ملت دارای سرویسی به نام "باشگاه مشتریان بانک ملت" است که امکان واریز مبلغ را از حساب مشتری، به چندین حساب مختلف می‌دهد.

نکته مهم: همانطور که می‌دانید قبل از استفاده از این گونه سرویس‌ها، کلیه شماره حساب‌هایی که قصد واریز مبلغ به آنها را دارید، باید از قبل (در هنگام عقد قرارداد با بانک) به بانک مورد نظر داده شده باشد. در غیر اینصورت امکان استفاده از این گونه سرویس‌ها را ندارید.

نکته: در هنگام نوشتار این مقاله، این سرویس هنوز در پَرباد آماده نیست و در حال توسعه است.

درگاه مجازی

درگاه مجازی پَرباد، یک درگاه بانکی شبیه سازی شده و بسیار ساده است که از آن جهت تست اپلیکیشن خود و عملیات پرداخت می‌توانید استفاده کنید. به عبارت دیگر، برای تست اپلیکیشن خود، نیازی به داشتن یک حساب واقعی در یک درگاه بانکی ندارید و می‌توانید از این درگاه مجازی استفاده کنید.

ابتدا در قسمت تنظیمات پَرباد، آدرس مورد نظر برای درگاه مجازی را مانند کد زیر مشخص می‌کنیم:

services.AddParbad()
        .ConfigureGateways(gateways =>
        {
            gateways
               .AddParbadVirtual()
               .WithOptions(options => options.GatewayPath = "/MyVirtualGateway");
        });

در مثال بالا، درگاه مجازی توسط آدرس داده شده در دسترس خواهد بود. توجه داشته باشید که این آدرس حتما باید با یک ( / ) آغاز شده باشد.

سپس درگاه مجازی را در اپلیکیشن خود ثبت می‌کنید:

ASP.NET CORE (Startup.cs)

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseMvc(routes =>
    {
        routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
    });

    // ثبت درگاه مجازی
    app.UseParbadVirtualGateway();
}

ASP.NET WebForms, ASP.NET MVC (Startup.cs)

public void Configuration(IAppBuilder app)
{
    var parbad = ParbadBuilder.CreateDefaultBuilder()
        .ConfigureGateways(gateways =>
        {
            gateways
               .AddParbadVirtual()
               .WithOptions(options => options.GatewayPath = "/MyVirtualGateway");
        })
        .Build();

    app.UseParbadVirtualGateway(parbad.Services);
}

تنظیمات درگاه مجازی تا اینجا به پایان رسیده و فقط در هنگام ایجاد درخواست پرداخت، از میان درگاه‌ها، درگاه مجازی پَرباد را انتخاب کنید.

var result = _onlinePayment.Request(Gateways.ParbadVirtualGateway, 123, 25000, "http://www.mywebsite.com/foo/bar/");

و در نهایت به درگاه مجازی هدایت خواهید شد:

نمونه پروژه‌های کامل را در انتهای مقاله می‌توانید مشاهده کنید.

استفاده از پروکسی

با توجه به تغییرات اخیر در بانکداری کشور، احتمال آن وجود دارد که در آینده، بعضی از درگاه‌های بانکی فقط به IP‌های داخل کشور سرویس دهی کنند. اگر وب سایت شما بنا به دلایلی در سروری خارج از کشور میزبانی می‌شود، شما جهت استفاده از درگاه‌های بانکی، نیاز به یک سرور در داخل کشور دارید که نقش پروکسی را برای شما بازی کند. پَرباد این امکان را برای شما محیا کرده و کافیست اطلاعات پروکسی سرور خود را به شکل زیر برای درگاه بانکی مورد نظر ثبت کنید.

services.AddParbad()
        .ConfigureGateways(gateways =>
        {
            gateways
               .AddMellat()
               .WithOptions(options => 
               {
                    options.TerminalId = 123;
                    options.UserName = "abc";
                    options.UserPassword = "xyz;
               )
               .WithProxy(new Uri("Proxy Server URL"), "UserName", "Password");
        });

در مثال بالا، درگاه بانک ملت (صرفا جهت مثال) با یک پروکسی تنظیم شده است. برای سایر درگاه‌های بانکی، فرمت تنظیمات، کاملا مشابه مثال بالا است.

توکن پرداخت

پَرباد جهت شناسایی و تبادل اطلاعات پرداخت با خارج از سیستم خود و بانک‌ها، از یک توکن به ازاء هر پرداخت استفاده می‌کند. به عبارت دیگر، به ازاء هر درخواست پرداخت یک توکن تولید می‌شود. به این صورت، درخواست‌های پرداخت، غیر قابل دستکاری و غیر قابل حدس زدن توسط کاربران می‌شود.

نکته: پَرباد از یک تولید کننده پیش فرض توکن استفاده می‌کند و شما نیازی به انجام هیچگونه تنظیماتی ندارید. تولید کننده پیش فرض، از یک GUID در Query String استفاده می‌کند.

اگر قصد دارید روش مورد نظر خود را برای تولید توکن جهت شناسایی یک پرداخت پیاده‌سازی کنید، می‌توانید به روش زیر عمل کنید:

ابتدا تولید کننده توکن را تعریف کنید.

public class MyTokenProvider : IPaymentTokenProvider
{
    public Task<string> ProvideTokenAsync(Invoice invoice, CancellationToken cancellationToken = new CancellationToken())
    {
        // تولید و برگرداندن توکن در اینجا
    }

    public Task<string> RetrieveTokenAsync(CancellationToken cancellationToken = new CancellationToken())
    {
        // خواندن و برگرداندن توکن در اینجا
    }
}

نکته: شما همچنین می‌توانید از تزریق وابستگی‌ها نیز استفاده کنید. بدیهی است که در اینصورت باید سرویسی که تزریق می‌کنید، از قبل در سیستم تزریق وابستگی‌های اپلیکیشن شما ثبت شده باشد.

سپس تولید کننده توکن خود را در تنظیمات به پَرباد معرفی کنید:

services.AddParbad()
        .ConfigurePaymentToken(builder => builder.AddPaymentTokenProvider<MyTokenProvider>(ServiceLifetime.Transient));

ServiceLifetime، تایین کننده طول عمر سرویس شما است.

به این صورت پَرباد، شناسایی و ردیابی یک صورت حساب را با استفاده از تولید کننده توکن شما انجام خواهد داد.

تزریق وابستگی

همانطور که قبلا در مقاله آموزش تنظیمات نیز گفته شد، پَرباد به صورت توکار، از تزریق وابستگی استاندارد مایکروسافت استفاده می‌کند. بنابراین اگر اپلیکیشن شما نیز از تزریق وابستگی مشابهی استفاده می‌کند، نیازی به خواندن و یاد گرفتن این بخش ندارید و به راحتی می‌توانید از اینترفیس IOnlinePayment در هر کجا که نیاز داشتید جهت عملیات پرداخت استفاده کنید.

اما در صورتیکه در اپلیکیشن خود از تزریق وابستگی دیگری ( مانند Autofac ) استفاده می‌کنید، باید این دو سیستم را با یکدیگر هماهنگ کنید. خوشبختانه تمام کتابخانه‌های معروف تزریق وابستگی ( مانند Autofac ) از قبل این کار را برای شما محیا کرده‌اند و شما فقط نیاز به افزودن چند خط کد به اپلیکیشن فعلی خود را دارید.

جهت فهم بهتر و آموزش عملی، یک اپلیکیشن کامل ASP.NET MVC برای شما تهیه شده که از Autofac جهت تزریق وابستگی استفاده می‌کند. در این پروژه خواهید دید چگونه به راحتی پَرباد و Autofac را با یکدیگر هماهنگ کرده و هچنین اینترفیس IOnlinePayment را درون کنترلر تزریق می‌کنیم.

لینک پروژه‌ها در انتهای همین مقاله قابل مشاهده هستند.

Logging

لاگ کردن در پَرباد توسط سیستم استاندارد مایکروسافت انجام می‌شود. این بدان معنی است که شما امکان استفاده از کتابخانه‌های Logging بسیار زیادی را دارید. نحوه استفاده و تنظیم کتابخانه‌های معروف Logging در وب سایت آنها آورده شده و به راحتی می‌توانید آنها را با لاگ مایکروسافت تطابق دهید.

نمونه پروژه‌ها

مقاله‌های مرتبط

‫۵ سال و ۶ ماه قبل، یکشنبه ۱۱ فروردین ۱۳۹۸، ساعت ۲۰:۰۵