مهمان مهمان
نظرات مطالب
Syntax highlighting در بلاگر!
نه نه.اشتباه نکن.
برنامه شما بسیار عالی کار می کنه.
اما من از ترفند این
http://www.techknowl.com/show-html-and-java-script-inside.html
سایت استفاده کردم و ترفندی که توی سایت شماست اصلا برای من کار نمی کنه.
اما همین ترفند خودم هم به صورتی که توی تصویر نشون دادم مشکل داره و جالب اینجاست که فقط برای یه پوسته خاص این مشکل وجود داره.

http://025.img98.net/out.php/i217666_Untitled1.jpg
‫۱۳ سال و ۷ ماه قبل، یکشنبه ۱۴ فروردین ۱۳۹۰، ساعت ۱۷:۳۴
وحید نصیری وحید نصیری
مطالب
بررسی Microsoft Anti-Cross Site Scripting Library

هنگام نمایش اطلاعات در وب باید اطلاعات خام دریافتی از کاربر را encode کرده و سپس نمایش داد تا از حملات XSS یا cross site scripting attacks در امان ماند. مثلا وبلاگی را طراحی کرده‌اید و یک نفر اطلاعات زیر را بجای توضیحات ارسال کرده است:
<SCRIPT>alert('XSS')</SCRIPT>

اگر اطلاعات به همین شکل دریافت و بدون تغییر هم نمایش داده شود، یک ضعف امنیتی برای سایت شما به‌حساب خواهد آمد. (بحث دزدیدن اطلاعات کوکی و امثال آن از این طریق با معرفی HttpOnly cookies در IE‌های جدید و فایرفاکس 3 به بعد تقریبا منتفی شده است اما می‌توانند با ارسال انبوهی اسکریپت، مشاهده صفحه را با crash‌ کردن مرورگر کاربران همراه کنند)
مایکروسافت برای این منظور Microsoft Anti-Cross Site Scripting Library را ارائه داده است. نمونه بهبود یافته HttpUtility.HtmlEncode که در فضای نام System.Web موجود است.

در اینجا قصد داریم این کتابخانه را با لیست زیر آزمایش کنیم:
http://ha.ckers.org/xss.html
در همان صفحه اگر دقت کنید، لیست حملات را به صورت یک فایل xml هم ارائه داده است:
http://ha.ckers.org/xssAttacks.xml
برای خواندن این فایل xml در دات نت روش‌های زیادی وجود دارد منجمله XML serialization .

ساختار این فایل به شکل زیر است:
<?xml version="1.0" encoding="UTF-8"?>
<xss>
<attack>
 <name>x1</name>
 <code>x2</code>
 <desc>x3</desc>
 <label>x4</label>
 <browser>x5</browser>
</attack>
.
.
.

بنابراین شیء‌ نمایانگر آن می‌تواند به صورت لیستی از کلاس زیر باشد:
    public class attack{
      public string name { get; set; }
      public string code { get; set; }
      public string desc { get; set; }
      public string label { get; set; }
      public string browser { get; set; }
  }

برای دریافت این لیست و بارگذاری فایل xml مربوطه با استفاده از روش XML serialization خواهیم داشت:
      
using System.Collections.Generic;
using System.IO;
using System.Xml.Serialization;

      public static List<attack> DeserializeFromXML(string path)
      {
          XmlRootAttribute root = new XmlRootAttribute("xss");
          XmlSerializer deserializer =
              new XmlSerializer(typeof (List<attack>),root);
          using (TextReader textReader = new StreamReader(path))
          {
              return (List<attack>)deserializer.Deserialize(textReader);
          }
      }

در ادامه فرض بر این است که ارجاعی از اسمبلی AntiXssLibrary.dll به پروژه اضافه شده است، همچنین فایل xssAttacks.xml فوق نیز در کنار فایل اجرایی برنامه ، مثلا یک برنامه کنسول قرار گرفته است: 
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using Microsoft.Security.Application;

      private static void testMethod()
      {
          StringBuilder sb = new StringBuilder();
          sb.AppendFormat("<html>{0}", Environment.NewLine);
          sb.AppendFormat("<body>{0}", Environment.NewLine);

          List<attack> data = XMLParser.DeserializeFromXML("xssAttacks.xml");
          foreach (attack atk in data)
          {
              string cleanSafeHtmlInput = AntiXss.HtmlEncode(atk.code);
              sb.AppendFormat("{0}<br>{1}", cleanSafeHtmlInput, Environment.NewLine);
          }

          sb.AppendFormat("</body>{0}", Environment.NewLine);
          sb.AppendFormat("</html>");

          File.WriteAllText("out.htm", sb.ToString());
      }

پس از اجرای تابع فوق، خروجی ما یک فایل html خواهد بود به نام out.htm . آنرا در مرورگر خود باز کنید. بدون هیچ مشکلی باز خواهد شد و خروجی امنی را مشاهده خواهید کرد. برای مشاهده اثر واقعی این کتابخانه، قسمت AntiXss.HtmlEncode را از کد فوق حذف کنید و یکبار دیگر برنامه را اجرا کنید. اکنون فایل نهایی را در مرورگر باز کنید. با انبوهی از alert های جاوا اسکریپتی مواجه خواهید شد که اهمیت کتابخانه فوق را جهت ارائه خروجی امن در صفحات وب مشخص می‌سازد.

‫۱۵ سال و ۱۳ ماه قبل، دوشنبه ۲۰ آبان ۱۳۸۷، ساعت ۱۹:۲۳
وحید نصیری وحید نصیری
مطالب
آرگومان‌های نامگذاری شده (named arguments/parameters) در C#4
سؤال: آیا شما بدون مراجعه به مستندات شیء FormsAuthenticationTicket می‌توانید پاسخ دهید هر کدام از آرگومان‌های ذکر شده در سازنده‌ی این کلاس چه کاربرد و معنایی دارند؟
            var ticket = new FormsAuthenticationTicket
               (
                 1,
                 principal.Identity.Name,
                 DateTime.Now,
                 DateTime.Now.AddMinutes(30),
                 true,
                 string.Empty,
                 FormsAuthentication.FormsCookiePath
               );

الان چطور؟!
            //using named parameters of C# 4.0
           var ticket = new FormsAuthenticationTicket
               (
                 version: 1,
                 name: principal.Identity.Name,
                 issueDate: DateTime.Now,
                 expiration: DateTime.Now.AddMinutes(30),
                 isPersistent: true,
                 userData: string.Empty,
                 cookiePath: FormsAuthentication.FormsCookiePath
               );

گاهی از اوقات ویژگی‌هایی که به یک زبان برنامه نویسی اضافه می‌شوند راه و روش برنامه نویسی را ممکن است کاملا تحت تاثیر قرار دهند؛ برای مثال استفاده از Generics . اما گاهی از اوقات این ویژگی‌های جدید syntax sugar یا nice to have هستند(!) مانند Named arguments .
Named arguments یا آرگومان‌های نامگذاری شده خوانایی کدهای شما را با بیان اینکه هر آرگومان چه معنایی دارد، افزایش می‌دهند. برای مثال به نظر شما کدام روش فراخوانی متد Copy در ذیل خواناتر است؟
File.Copy("source.txt", "destination.txt", true);
و یا؟
File.Copy("source.txt", "destination.txt", overwrite: true);
هر دو یک کار را انجام می‌دهند اما درک عملکرد روش اول حتما نیاز به بررسی مستندات متد Copy را خواهد داشت.

نکات تکمیلی:
متد ساده زیر را در نظر بگیرید:
static void Foo(int x, int y) {}
الف) در حالت معمولی و بدون استفاده از named argument ، پارامترهای یک متد، positional parameters هم نامیده می‌شوند. به این معنا که محل ذکر یک پارامتر مهم است و برای مثال در روش متداول فراخوانی ذیل، پارامتر دوم همیشه همان y است و پارامتر اول همواره همان x درنظر گرفته می‌شود:
Foo(1,2);
اما زمانیکه از named parameters استفاده می‌کنید، این ترتیب دیگر اهمیتی نداشته و هر دو فراخوانی ذیل مجاز می‌باشند و به یک معنا هستند:
Foo(x:4, y:2);


Foo(y:2, x:4);
ب) همواره positional parameters باید پیش از named parameters ذکر شوند. برای مثال فراخوانی ذیل مجاز است:
Foo(4, y:2);
اما فراخوانی زیر مجاز نبوده و برنامه کامپایل نخواهد شد:
Foo(x:4, 2);     // Compile time error
‫۱۴ سال و ۵ ماه قبل، یکشنبه ۱۶ خرداد ۱۳۸۹، ساعت ۲۳:۲۸
داریوش حمیدی داریوش حمیدی
بازخوردهای دوره
اجزای جاوا اسکریپتی بوت استرپ 3
سلام آقای نصیری 
باز هم همین مشکل در افکت اسلایدر وجود دارد آیا می‌توان فقط در همان div  اسلایدر از bootstrapLTR بجای RTL  استفاده کرد ؟ فقط در همین div ?
با تشکر از شما آقای نصیری  / ممنون
‫۹ سال و ۱۲ ماه قبل، شنبه ۳ آبان ۱۳۹۳، ساعت ۰۱:۲۲
وحید نصیری وحید نصیری
اشتراک‌ها
گوشه‌ای از Angular 4
 <div *ngIf="condition; else elseTpl">
      Condition is true
    </div>
    <template #elseTpl>Condition is false</template>
گوشه‌ای از Angular 4
‫۷ سال و ۹ ماه قبل، پنجشنبه ۳۰ دی ۱۳۹۵، ساعت ۲۲:۴۸
علیرضا سیف علیرضا سیف
نظرات مطالب
React 16x - قسمت 4 - کامپوننت‌ها - بخش 1 - کار با عبارات JSX
سلام؛ می‌خوام که از بوت استرپ راست به چپ استفاده کنم؛ با این لینک bootstrap-v4-rtl. در فایل index برنامه هم این قسمت را اضافه کردم:
import 'bootstrap-v4-rtl/dist/css/bootstrap-rtl.css'
و برای تست در فایل App، این قسمت را اضافه کردم:
<div class="row">
        <div className="col-md-3">۱</div>
        <div className="col-md-6">2</div>
        <div className="col-md-3">3</div>
    </div>
ولی نتایج نشون داده شده، از چپ به راست هست. نسخه صحیح bootstrap-rtl را از کجا می‌تونم بدست بیارم. مرسی
‫۴ سال و ۶ ماه قبل، چهارشنبه ۶ فروردین ۱۳۹۹، ساعت ۲۰:۴۲
سیروان عفیفی سیروان عفیفی
مطالب
خواندن اطلاعات از سرور و نمایش آن توسط Angular در ASP.NET MVC
می خواهیم یک مثال ساده از دریافت اطلاعات از سرور و نمایش آن در یک View را توسط AngularJS، با هم بررسی کنیم.
همانطور که می‌دانید برای نمایش تعدادی از اشیاء در انگولار می‌توان به این صورت نیز عمل کرد:
<div ng-init="products=[
     {id:1,name:'product1',price:25000,description:'description of product'},
     {id:2,name:'product2',price:5000,description:'description of product'},
     {id:3,name:'product3',price:5000,description:'description of product'},
     {id:4,name:'product4',price:2000,description:'description of product'},
     {id:5,name:'product5',price:255000,description:'description of product'}
     ]">
    <div>
        <div>
            <table>
                <tr>
                    <th>Id</th>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Description</th>
                </tr>
                <tr ng-repeat="product in products">
                    <td>{{product.id}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.price}}</td>
                    <td>{{product.description}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>
در کد فوق توسط ویژگی ng-init می‌توانیم داده هایمان را Initialize کنیم و در نهایت توسط ویژگی ng-repeat می‌توانیم داده هایمان را در صفحه نمایش دهیم. این ویژگی دقیقاً مانند یک حلقه foreach عمل میکند؛ مثلا معادل آن در Razor سمت سرور، به این صورت است: 
@foreach (var product in Model.products)
{
    <td>product.id</td>
    <td>product.name</td>
    <td>product.price</td>
    <td>product.description</td>
}
خوب؛ حالا میخواهیم این اطلاعات را از سمت سرور بخوانیم و به صورت فوق نمایش دهیم. ابتدا مدل مان را به این صورت تعریف می‌کنیم :
namespace AngularAndMvc.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public float Price { get; set; }
        public string Description { get; set; }
    }
}
سپس در داخل کنترلر زیر اطلاعات را به صورت in memory data تعریف می‌کنیم (جهت سهولت دموی کار) و به view مورد نظر پاس می‌دهیم. البته شما می‌توانید این اطلاعات را از دیتابیس بخوانید؛ روال کار فرقی نمی‌کند:
namespace AngularAndMvc.Controllers
{
    public class ProductController : Controller
    {        
        public ActionResult Index()
        {
            return View("Index", "", GetSerializedProduct());
        }

        public string GetSerializedProduct()
        {
            var products = new[] 
            { 
                new Product{Id=1,Name="product1",Price=4500,Description="description of this product"},
                new Product{Id=2,Name="product2",Price=500,Description="description of this product"},
                new Product{Id=3,Name="product3",Price=400,Description="description of this product"},
                new Product{Id=4,Name="product4",Price=5500,Description="description of this product"},
                new Product{Id=5,Name="product5",Price=66500,Description="description of this product"}
            };
            var settings = new JsonSerializerSettings { ContractResolver=new CamelCasePropertyNamesContractResolver()};
            return JsonConvert.SerializeObject(products,Formatting.None,settings);
        }
   }
}
همانطور که در کد بالا مشخص است، اطلاعات را به صورت JSON به View مان پاس داده ایم و برای اینکه ابتدای نام مقادیر بازگشتی به صورت حروف بزرگ نباشند (به صورت خودکار تبدیل به camel case شوند) پارامتر settings را برای متد SerializeObject تعیین کرده‌ایم: 
var settings = new JsonSerializerSettings { ContractResolver=new CamelCasePropertyNamesContractResolver()};
return JsonConvert.SerializeObject(products,Formatting.None,settings);
view را نیز به این صورت تغییر می‌دهیم :
@model string
<div ng-init="products = @Model">
    <div>
        <div>
            <table>
                <tr>
                    <th>Id</th>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Description</th>
                </tr>
                <tr ng-repeat="product in products">
                    <td>{{product.id}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.price}}</td>
                    <td>{{product.description}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>
تنها تغییری که در کد فوق اعمال شده است، به جای اینکه ویژگی ng-init را به صورت inline مقداردهی کنیم آن را از کنترلر دریافت کرده ایم.
در خروجی هم اطلاعات به این صورت نمایش داده می‌شوند :

سورس مثال فوق را هم از اینجا  می توانید دریافت کنید.

‫۱۰ سال و ۹ ماه قبل، جمعه ۱۸ بهمن ۱۳۹۲، ساعت ۲۰:۱۵
وحید نصیری وحید نصیری
مطالب
طراحی یک گرید با Angular و ASP.NET Core - قسمت سوم - قالب پذیر ساختن گرید
در قسمت دوم، قالب نمایش ردیف‌های جدول، ثابت است و درون جدول به صورت مستقیمی درج و تعریف شده‌است. در ادامه می‌خواهیم این گرید را به نحوی تغییر دهیم که به ازای حالت‌های مختلفی مانند نمایش اطلاعات و یا ویرایش اطلاعات هر ردیف، از قالب‌های خاص آن‌ها استفاده شود.
قابلیتی که در ادامه از آن برای «قالب پذیر ساختن گرید» استفاده خواهیم کرد، همان نکته‌ی «امکان تعویض پویای قالب‌های یک دربرگیرنده» است که در مطلب «امکان تعریف قالب‌ها در Angular با دایرکتیو ng-template» به آن پرداختیم.


تعریف قالب‌های نمایش و ویرایش اطلاعات یک ردیف در گرید طراحی شده

پس از آشنایی با دایرکتیوهای تعریف و کار با قالب‌ها در Angular، اکنون تبدیل بدنه‌ی ثابت جدول، به دو قالب نمایش و ویرایش، ساده‌است.
در قسمت دوم این سری، کار رندر بدنه‌ی اصلی گرید توسط همین چند سطر، در قالب آن مدیریت می‌شود:
    <tbody>
      <tr *ngFor="let item of queryResult.items; let i = index">
        <td class="text-center">{{ itemsPerPage * (currentPage - 1) + i + 1 }}</td>
        <td class="text-center">{{ item.productId }}</td>
        <td class="text-center">{{ item.productName }}</td>
        <td class="text-center">{{ item.price | number:'.0' }}</td>
        <td class="text-center">
          <input id="item-{{ item.productId }}" type="checkbox" [checked]="item.isAvailable"
            disabled="disabled" />
        </td>
      </tr>
    </tbody>
  </table>

در ادامه قسمت داخلی ngFor را تبدیل به یک ng-container می‌کنیم تا قالب پذیر شود:
    <tbody>
      <tr *ngFor="let item of queryResult.items; let i = index">
        <ng-container [ngTemplateOutlet]="loadTemplate(item)"
                 [ngOutletContext]="{ $implicit: item, idx: i }"></ng-container>
      </tr>
    </tbody>
کار دایرکتیو ngOutletContext، تنظیم شیء context هر قالب است. به این ترتیب شیء متناظر با هر ردیف و همچنین ایندکس آن‌را به هر قالب ارجاع می‌دهیم. خاصیت implicit$ به این معنا است که اگر منبع داده‌ی متغیر ورودی مشخص نشد، از مقدار item استفاده شود.
در اینجا ngTemplateOutlet این امکان را می‌دهد تا بتوان توسط کدهای برنامه، قالب هر ردیف را مشخص کرد. متد loadTemplate در کدهای کامپوننت متناظر فراخوانی شده و بر اساس وضعیت هر ردیف، یکی از دو قالب ذیل را بازگشت می‌دهد:

الف) قالب نمایش معمولی و فقط خواندنی رکوردها 


<!--The Html Template for Read-Only Rows-->
<ng-template #readOnlyTemplate let-item let-i="idx">
  <td class="text-center">{{ itemsPerPage * (currentPage - 1) + i + 1 }}</td>
  <td class="text-center">{{ item.productId }}</td>
  <td class="text-center">{{ item.productName }}</td>
  <td class="text-center">{{ item.price | number:'.0' }}</td>
  <td class="text-center">
    <input id="item-{{ item.productId }}" type="checkbox" [checked]="item.isAvailable"
      disabled="disabled" />
  </td>
  <td>
    <input type="button" value="Edit" class="btn btn-default btn-xs" (click)="editItem(item)"
    />
  </td>
  <td>
    <input type="button" value="Delete" (click)="deleteItem(item)" class="btn btn-danger btn-xs"
    />
  </td>
</ng-template>
همانطور که ملاحظه می‌کنید، در اینجا بدنه‌ی ngFor را به یک ng-template مشخص شده‌ی با readOnlyTemplate# انتقال داده‌ایم. همچنین دو متغیر ورودی item و i را توسط -let تعریف کرده‌ایم. چون عبارت منبع داده item مشخص نشده‌است، از همان خاصیت implicit$ شیء context استفاده می‌کند.
این قالب در کدهای کامپوننت آن به صورت ذیل قابل دسترسی و انتخاب شده‌است:
 @ViewChild("readOnlyTemplate") readOnlyTemplate: TemplateRef<any>;

ب) قالب ویرایش اطلاعات هر ردیف که از آن برای افزودن یک ردیف جدید هم می‌توان استفاده کرد



شبیه به همان کاری را که برای نمایش ردیف‌های فقط خواندنی انجام دادیم، در مورد قالب ویرایش هر ردیف نیز تکرار می‌کنیم. در اینجا فقط امکان ویرایش نام محصول، قیمت آن و موجود بودن آن‌را توسط یک‌سری input box مهیا کرده‌ایم:
<!--The Html Template for Editable Rows-->
<ng-template #editTemplate let-item let-i="idx">
  <td class="text-center">{{ itemsPerPage * (currentPage - 1) + i + 1 }}</td>
  <td class="text-center">{{ item.productId }}</td>
  <td class="text-center">
    <input type="text" [(ngModel)]="selectedItem.productName" class="form-control" />
  </td>
  <td class="text-center">
    <input type="text" [(ngModel)]="selectedItem.price" class="form-control" />
  </td>
  <td class="text-center">
    <input id="item-{{ item.productId }}" type="checkbox" [checked]="item.isAvailable"
      [(ngModel)]="selectedItem.isAvailable" />
  </td>
  <td>
    <input type="button" value="Save" (click)="saveItem()" class="btn btn-success btn-xs"
    />
  </td>
  <td>
    <input type="button" value="Cancel" (click)="cancel()" class="btn btn-warning btn-xs"
    />
  </td>
</ng-template>
به این قالب نیز با توجه به template reference variable آن که editTemplate# نام دارد، به صورت ذیل در کامپوننت متناظر دسترسی خواهیم یافت.
 @ViewChild("editTemplate") editTemplate: TemplateRef<any>;

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


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

@ViewChild("readOnlyTemplate") readOnlyTemplate: TemplateRef<any>;
@ViewChild("editTemplate") editTemplate: TemplateRef<any>;
selectedItem: AppProduct;
isNewRecord: boolean;
برای اینکه بتوانیم قالب‌ها را به صورت پویا تعویض کنیم، نیاز است در کدهای کامپوننت، به آن‌ها دسترسی داشت. اینکار را توسط تعریف ViewChildهایی با همان نام template reference variable قالب‌ها انجام داده‌ایم.
به علاوه اگر به قالب editTemplate دقت کنید، مقدار ویرایش شده به [(ngModel)]="selectedItem.productName" انتساب داده می‌شود. به همین جهت شیء selectedItem نیز تعریف شده‌است.
همچنین نیاز است بدانیم اکنون در حال ویرایش یک ردیف هستیم یا این ردیف، کاملا ردیف جدیدی است. به همین جهت پرچم isNewRecord نیز تعریف شده‌است.


فعالسازی قالب ویرایش هر ردیف

در انتهای هر ردیف، دکمه‌ی ویرایش نیز قرار دارد که به (click) آن، رخداد editItem متصل است:
editItem(item: AppProduct) {
  this.selectedItem = item;
}
در اینجا Item انتخابی را به selectedItem انتساب می‌دهیم. همین مساله سبب محاسبه‌ی مجدد ردیف می‌شود. یعنی متد loadTemplate داخل حلقه‌ی ngFor مجددا فراخوانی می‌شود:
  loadTemplate(item: AppProduct) {
    if (this.selectedItem && this.selectedItem.productId === item.productId) {
      return this.editTemplate;
    } else {
      return this.readOnlyTemplate;
    }
  }
در اینجا بررسی می‌کنیم که آیا در حال ویرایش اطلاعات هستیم؟ آیا selectedItem  مقدار دهی شده‌است و نال نیست؟ اگر بله، قالب editTemplate را بازگشت می‌دهیم. اگر خیر، قالب نمایش ردیف‌های فقط خواندنی بازگشت داده می‌شود. به این ترتیب می‌توان در کدهای برنامه به صورت پویا، در مورد نمایش قالبی خاص تصمیم‌گیری کرد.


مدیریت افزودن یک ردیف جدید

دکمه‌ی افزودن یک ردیف جدید به صورت ذیل به قالب اضافه شده‌است:
<div class="panel">
  <input type="button" value="Add new product" class="btn btn-primary" (click)="addItem()"
  />
</div>
بنابراین نیاز است رخ‌داد addItem آن‌را به صورت ذیل تعریف کرد:
  addItem() {
    this.selectedItem = new AppProduct(0, "", 0, false);
    this.isNewRecord = true;

    this.queryResult.items.push(this.selectedItem);
    this.queryResult.totalItems++;
  }
در اینجا برخلاف حالت ویرایش که selectedItem را به item انتخابی ردیف جاری تنظیم کردیم، آن‌را به یک شیء جدید و تازه تنظیم می‌کنیم. همچنین پرچم isNewRecord  را نیز true خواهیم کرد. سپس این آیتم را به لیست رکوردهای موجود گرید نیز اضافه می‌کنیم. همینقدر تغییر، سبب محاسبه‌ی مجدد loadTemplate و بارگذاری قالب ویرایشی آن می‌شود.


مدیریت لغو ویرایش هر ردیف

برای اینکه ویرایش هر ردیف را لغو کنیم و قالب آن‌‌را به حالت فقط خواندنی بازگشت دهیم، فقط کافی است selectedItem را به نال تنظیم کنیم:
cancel() {
  this.selectedItem = null;
}
با این تنظیم و محاسبه‌ی خودکار و مجدد متد loadTemplate، قسمت return this.readOnlyTemplate فعال می‌شود که سبب نمایش عادی یک ردیف خواهد شد.


مدیریت حذف هر ردیف

در اینجا با پیاده سازی متد رخ‌دادگردان deleteItem و ارسال id هر ردیف به سرور، کار حذف هر ردیف را انجام خواهیم داد:
  deleteItem(item: AppProduct) {
    this.productsService
      .deleteAppProduct(item.productId)
      .subscribe((resp: Response) => {
        this.getPagedProductsList();
      });
  }


مدیریت ثبت و یا به روز رسانی هر ردیف

آخرین عملیاتی که باید مدیریت شود، بررسی پرچم isNewRecord است. اگر true بود، کار افزودن یک ردیف جدید صورت گرفته و سپس این پرچم false می‌شود. اگر false بود، به معنای درخواست به روز رسانی ردیفی مشخص است. در پایان هر دو عملیات selectedItem را نیز true می‌کنیم و این پایان عملیات باید داخل قسمت دریافت پاسخ از سرور مدیریت شود و نه پس از فراخوانی این متدها؛ چون متدهای subscribe غیرهمزمان بوده و ردیف‌های پس از آن‌ها بلافاصله اجرا می‌شوند.
  saveItem() {
    if (this.isNewRecord) {
      this.productsService
        .addAppProduct(this.selectedItem)
        .subscribe((resp: AppProduct) => {
          this.selectedItem.productId = resp.productId;
          this.isNewRecord = false;
          this.selectedItem = null;
        });
    } else {
      this.productsService
        .updateAppProduct(this.selectedItem.productId, this.selectedItem)
        .subscribe((resp: AppProduct) => {
          this.selectedItem = null;
        });
    }
  }


کدهای کامل این قسمت را از اینجا می‌توانید دریافت کنید.
‫۷ سال و ۲ ماه قبل، جمعه ۱۳ مرداد ۱۳۹۶، ساعت ۱۶:۱۵