حمید سامانی حمید سامانی
مطالب
NOSQL قسمت سوم

در مطلب قبلی با نوع اول پایگاه‌های‌داده NoSQL یعنی Key/Value Store آشنا شدیم و در این مطلب به معرفی دسته دوم یعنی Document Database خواهیم پرداخت.

در این نوع پایگاه داده ، داده‌ها مانند نوع اول در قالب کلید/مقدار ذخیره می‌شوند و بازگردانی مقادیر نیز دقیقا مشابه نوع اول یعنی Key/Value Store بر اساس کلید می‌باشد. اما تفاوت این سیستم با نوع اول در دسته‌بندی داده‌های مرتبط با یکدیگر در قالب یک Document می‌باشد. سعی کردم در این مطلب با ذکر مثال مطالب را شفاف‌تر بیان کنم:

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

 

جداول واضح بوده و نیازی به توضیح ندارد ، حال نحوه‌ی ذخیره‌سازی داده‌ها در سیستم Document Database برای چنین مثالی را بررسی می‌کنیم:

{
_id: ObjectID(‘4bf9e8e17cef4644108761bb’),
Title: ‘NoSQL Part3’,
url: ‘https://www.dntips.ir/yyy/xxxx’,
author: ‘hamid samani’,
tags: [‘databases’,’mongoDB’],
comments:[
{user: ‘unknown user’,
 text:’unknown test’
},
{user:unknown user2’,
 text:’unknown text2
}
]
}

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

۱-فرمت ذخیره سازی داده‌ها  مشابه فرمت JSON می‌باشد.

۲-به مجموعه داده‌های مرتبط به یکدیگر Document گفته می‌شود.

۳-در این سیستم JOIN ها وجود ندارند و داده‌های مرتبط کنار یکدیگر قرار می‌گیرند ، و یا به تعریف دقیق‌تر داده‌ها در یک داکیومنت اصلی Embed می‌شوند.

به عنوان مثال در اینجا مقدار commentها برابر با آرایه‌ای از Document‌ها می‌باشد.

۴-مقادیر می‌توانند بصورت آرایه نیز در نظر گرفته شوند.

۵-در سیستم‌های RDBMS در صورتی که بخواهیم از وجود JOIN‌ها صر‌فنظر کنیم. به عدم توانایی در نرمال‌سازی برخواهیم خورد که یکی از معایب عدم نرمال‌سازی وجود مقادیر Null در جداول می‌باشد؛ اما در این سیستم به دلیل Schema free بودن می‌توان ساختار‌های متفاوت برای Document‌ها در نظر گرفت.

به عنوان مثال برای یک پست می‌توان مقدار n   کامنت تعریف کرد و برای پست دیگر هیچ کامنتی تعریف نکرد.

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


با مقایسه دستورات CRUD در هر دو نوع پایگاه داده با نحوه‌ی کوئری گرفتن از Document Database آشنا می‌شویم:

در SQL برای ایجاد جدول خواهیم داشت:

CREATE TABLE posts (
    id INT NOT NULL
        AUTO_INCREMENT,
    author_id INT NOT NULL,
    url VARCHAR(50),
    PRIMARY KEY (id)
)

دستور فوق در Document Database معادل است با:

  
db.posts.insert({id: “256” , author_id:”546”,url:"http://example.com/xxx"}) // با قرار دادن مقدار نوع ساختار مشخص می‌شود


در SQL  جهت خواندن خواهیم داشت:

  
SELECT * from posts
WHERE author_id > 100
و معادل آن برابر است با:
db.posts.find({author_id:{$gt:”1000”}})

در SQL جهت بروزرسانی داریم:
UPDATE posts
SET author_id= "123"
که معادل است با:
db.posts.update({ $set: { author_id: "123" }})

در SQL جهت حذف خواهیم داشت:
DELETE FROM posts
WHERE author_id= "654"

که معادل است با:
db.posts.remove( { author_id: "654" } )

همانگونه که مشاهده می‌فرمایید نوشتن کوئری برای این پایگاه داده ساده بوده و زبان آن نیز بر پایه جاوا اسکریپت می‌باشد که برای اکثر برنامه‌نویسان قابل درک است. 

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

‫۱۱ سال و ۹ ماه قبل، یکشنبه ۲۹ بهمن ۱۳۹۱، ساعت ۲۲:۴۰
امیرمسعود ایرانی امیرمسعود ایرانی
اشتراک‌ها
اعتبارسنجی فیلدهای متنی برای حروف فارسی با استفاده از jQuery
با استفاده از این قطعه کد jQuery می‌توانید فیلدهای متنی خود را به صورت خودکار اعتبارسنجی کنید و از ورود نویسه‌هایی غیر از حروف فارسی جلوگیری کنید.
اعتبارسنجی فیلدهای متنی برای حروف فارسی با استفاده از jQuery
‫۹ سال و ۸ ماه قبل، یکشنبه ۱۷ اسفند ۱۳۹۳، ساعت ۲۲:۴۹
مهمان مهمان
نظرات مطالب
افزودن هدرهای Content Security Policy به برنامه‌های ASP.NET
با سلام . تشکر
من با مرورگر ie9 تست کردم . ولی کد اجرا شد. مگه نگفتین واسه ie8 به بعد؟
و اینکه بعد از استفاده از این روش چطور میتونم از فایل‌های js و jquery خودم توی برنامه استفاده کنم؟
‫۱۰ سال و ۱۰ ماه قبل، چهارشنبه ۴ دی ۱۳۹۲، ساعت ۱۷:۱۷
علی یگانه مقدم علی یگانه مقدم
مطالب
استفاده از ماژول Remote
همانطور که در مقاله «آغاز کار با الکترون» گفتیم، فرآیند اصلی، تنها فرآیندی است که توانایی استفاده از گرافیک بومی سیستم عامل را دارد. ولی بسیاری از اوقات نیاز است در سمت renderProcess توانایی انجام این کار‌ها را داشته باشیم. در این مقاله قصد داریم که همان دیالوگ‌های open و save را از طریق Render Process اجرا نماییم.
الکترون برای اینکار از یک ماژول به نام remote استفاده می‌کند که وظیفه آن برقراری ارتباط IPC از Render Process به Main Process است و مواردی را که لازم است، در اختیار شما قرار می‌دهد. در این شیوه لازم نیست شما مرتبا به ارسال پیام بپردازید، بلکه این ارتباطات را ماژول remote فراهم می‌کند. این مورد شبیه به سیستم RMI در جاواست.

برای استفاده از remote در فایل html، کدهای زیر را در تگ اسکریپت اضافه می‌کنیم:
  const remote=require("electron").remote;
    const dialog=remote.dialog;
اینبار هم مانند قسمت قبلی، کدها را به شیوه دیگری انتساب دادیم. قصد ما از تغییر این رویه این است که با انواع حالت‌های انتساب اشیاء، آشنا شویم. بعد از آن توابع زیر را اضافه می‌کنیم:
  function OpenDialog()
    {
      dialog.showOpenDialog({
        title:'باز کردن فایل متنی',
         properties: [ 'openFile']//[ 'openFile', 'openDirectory', 'multiSelections' ]
        ,filters:[
        {name:'فایل‌های نوشتاری' , extensions:['txt','text']},
        {name:'جهت تست' , extensions:['doc','docx']}
         ]
      },
        (filename)=>{
          if(filename===undefined)
             return;
             var content=  fs.readFileSync(String(filename),'utf8');
             document.getElementById("TextFile").value=content;
    });
    }

    function SaveDialog()
    {
      dialog.showSaveDialog({
        title:'باز کردن فایل متنی',
         properties: [ 'openFile']//[ 'openFile', 'openDirectory', 'multiSelections' ]
        ,filters:[
        {name:'فایل‌های نوشتاری' , extensions:['txt','text']}
         ]
      },
        (filename)=>{
          if(filename===undefined)
             return;
             var content=document.getElementById("TextFile").value;
             fs.writeFileSync(String(filename),content,'utf8');
       });
    }
برای استفاده از این توابع، کدهای زیر را نیز به فایل اضافه می‌کنیم تا دکمه‌های open و save به صفحه اضافه شوند:
<button onclick="OpenDialog();" > Open File</button>
<button onclick="SaveDialog();" > Save File</button>
حالا برنامه را اجرا و تست کنید.

عبارت remote شامل متدهای فراوانی است که تعدادی از آن‌ها را بر می‌شماریم:
remote.getCurrentWindow()
شیء BrowserWindow صفحه جاری را باز می‌گرداند.

remote.getCurrentWebContents()
شیء webContents صفحه جاری را باز می‌گرداند.

remote.getGlobal(name)
این متد، دسترسی به شیء global را داراست و یکی از اشیاء ارتباطی بین Main Process و RenderProcess است که می‌تواند هر نوع داده‌ای را جابجا نماید. برای مشاهده بهتر از نحوه کارکرد این متد کد زیر را مشاهده نمایید:
Main Process 
global.testData={year:1395};

Render Process 
alert(remote.getGlobal("testData").year);
از این پس هر موقع renderProcess به این کد برسد، پیام 1395 را روی صفحه نمایش خواهد داد.

remote.process
شیء، process را از main process دریافت می‌کند و با کد زیر برابر است. ولی مزیت این متد این است که از کش نیز استفاده می‌نماید.
remote.getGlobal('process')

در مورد شیء process باید گفت که شامل خصوصیات و متدهایی در مورد پروسه اصلی اپلیکیشن می‌باشد. این اطلاعات مثل دریافت شماره نسخه الکترون، شماره نسخه کرومیوم، دریافت اطلاعات حافظه در مورد پروسه اپلیکیشن و حتی دریافت اطلاعات حافظه در مورد کل سیستم و ... می‌شود.
‫۸ سال و ۵ ماه قبل، جمعه ۷ خرداد ۱۳۹۵، ساعت ۰۶:۰۵
رضا منصوری رضا منصوری
نظرات مطالب
ساخت DropDownList های مرتبط به کمک jQuery Ajax در MVC
یک تجربه : 
این سلکتور $(this).attr('value')
برای کار با value در Option نال برمیگردوند و من من اینجوری استفاده کردم
 $('#Cities').change(function () {                
                jQuery.getJSON('@Url.Action("SelectTown")', { id: $(this).val() }, function (data) {
                    $('#Towns').empty();
                    jQuery.each(data, function (i) {
                        var option = $('<option></option>').val(data[i].ID).text(data[i].Name);
                        $("#Towns").append(option);
                    });
                });
            });
منظورم استفاده از .val به جای  .attr('value') هستش.
نمیدونم شاید بخاطر نسخه جدیدتر Jquery هست.
‫۱۰ سال و ۴ ماه قبل، پنجشنبه ۱۹ تیر ۱۳۹۳، ساعت ۱۸:۴۴
وحید نصیری وحید نصیری
مطالب
مروری بر کاربردهای Action و Func - قسمت دوم
در قسمت قبل از  Func و Actionها برای ساده سازی طراحی‌های مبتنی بر اینترفیس‌هایی با یک متد استفاده کردیم. این مورد خصوصا در حالت‌هایی که قصد داریم به کاربر اجازه‌ی فرمول نویسی بر روی اطلاعات موجود را بدهیم، بسیار مفید است.

مثال دوم) به استفاده کننده از API کتابخانه خود، اجازه فرمول نویسی بدهید

برای نمونه مثال ساده زیر را درنظر بگیرید که در آن قرار است یک سری عدد که از منبع داده‌ای دریافت شده‌اند، بر روی صفحه نمایش داده شوند:
public static void PrintNumbers()
{
    var numbers = new[] { 1,2,3,5,7,90 }; // from a data source
    foreach(var item in numbers)
    {
        Console.WriteLine(item);
    }    
}
قصد داریم به برنامه نویس استفاده کننده از کتابخانه گزارش‌سازی خود، این اجازه را بدهیم که پیش از نمایش نهایی اطلاعات، بتواند توسط فرمولی که مشخص می‌کند، فرمت اعداد نمایش داده شده را تعیین کند.
روال کار اکثر ابزارهای گزارش‌سازی موجود، ارائه یک زبان اسکریپتی جدید برای حل این نوع مسایل است. اما با استفاده از Func و ... روش‌های Code first (بجای روش‌های Wizard first)، خیلی از این رنج و دردها را می‌توان ساده‌تر و بدون نیاز به اختراع و یا آموزش زبان جدیدی حل کرد:
public static void PrintNumbers(Func<int,string> formula)
{
    var numbers = new[] { 1,2,3,5,7,90 };  // from a data source
    foreach(var item in numbers)
    {
        var data = formula(item);
        Console.WriteLine(data);
    }    
}
اینبار با استفاده از Func، امکان فرمول نویسی را به کاربر استفاده کننده از API ساده گزارش ساز فرضی خود داده‌ایم. Func تعریف شده در اینجا یک عدد int را در اختیار استفاده کننده قرار می‌دهد. در این بین، برنامه نویس می‌تواند هر نوع تغییر یا هر نوع فرمولی را که مایل است بر روی این عدد به کمک دستور زبان جاری مورد استفاده، اعمال کند و در آخر تنها باید نتیجه این عملیات را به صورت یک string بازگشت دهد. برای مثال:
 PrintNumbers(number => string.Format("{0:n0}",number));
البته سطر فوق ساده شده فراخوانی زیر است:
 PrintNumbers((number) =>{ return string.Format("{0:n0}",number); });
به این ترتیب اعداد نهایی با جدا کننده سه رقمی نمایش داده خواهند شد.
از این نوع طراحی، در ابزارها و کتابخانه‌های جدید گزارش سازی مخصوص ASP.NET MVC زیاد مشاهده می‌شوند.


مثال سوم) حذف کدهای تکراری برنامه

فرض کنید قصد دارید در برنامه وب خود مباحث caching را پیاده سازی کنید:
using System;
using System.Web;
using System.Web.Caching;
using System.Collections.Generic;

namespace WebToolkit
{
    public static class CacheManager
    {
        public static void CacheInsert(this HttpContextBase httpContext, string key, object data, int durationMinutes)
        {
            if (data == null) return;
            httpContext.Cache.Add(
                key,
                data,
                null,
                DateTime.Now.AddMinutes(durationMinutes),
                TimeSpan.Zero,
                CacheItemPriority.AboveNormal,
                null);
        }
    }
}
در هر قسمتی از برنامه که قصد داشته باشیم اطلاعاتی را در کش ذخیره کنیم، الگوی تکراری زیر باید طی شود:
var item = httpContext.Cache[key];
if (item == null)
{
    item = ReadDataFromDataSource();
    if (item == null)
          return null;

    CacheInsert(httpContext, key, item, durationMinutes);
}
ابتدا باید وضعیت کش جاری بررسی شود؛ اگر اطلاعاتی در آن موجود نبود، ابتدا از منبع داده‌ای مورد نظر خوانده شده و سپس در کش درج شود.
می‌توان در این الگوی تکراری، خواندن اطلاعات را از منبع داده، به یک Func واگذار کرد و به این صورت کدهای ما به نحو زیر بازسازی خواهند شد:
using System;
using System.Web;
using System.Web.Caching;
using System.Collections.Generic;

namespace WebToolkit
{
    public static class CacheManager
    {
        public static void CacheInsert(this HttpContextBase httpContext, string key, object data, int durationMinutes)
        {
            if (data == null) return;
            httpContext.Cache.Add(
                key,
                data,
                null,
                DateTime.Now.AddMinutes(durationMinutes),
                TimeSpan.Zero,
                CacheItemPriority.AboveNormal,
                null);
        }

        public static T CacheRead<T>(this HttpContextBase httpContext, string key, int durationMinutes, Func<T> ifNullRetrievalMethod)
        {
            var item = httpContext.Cache[key];
            if (item == null)
            {
                item = ifNullRetrievalMethod();
                if (item == null)
                    return default(T);

                CacheInsert(httpContext, key, item, durationMinutes);
            }
            return (T)item;
        }
    }
}
و استفاده از آن نیز به نحو زیر خواهد بود:
var user = HttpContext.CacheRead(
                            "Key1",
                            15,
                            () => _usersService.FindUser(userId));
پارامتر سوم متد CacheRead به صورت خودکار تنها زمانیکه اطلاعات کش متناظری با کلید Key1 وجود نداشته باشند، اجرا شده و نتیجه در کش ثبت می‌گردد. در اینجا دیگر از if و else و کدهای تکراری بررسی وضعیت کش خبری نیست.
 
‫۱۲ سال و ۳ ماه قبل، شنبه ۲۸ مرداد ۱۳۹۱، ساعت ۲۲:۴۰
رضا منصوری رضا منصوری
نظرات مطالب
ASP.NET MVC #21
با تشکر از آموزش خوبتون،
امکان ویرایش Confirm در Ajax.BeginForm یا Ajax.ActionLink وجود داره؟
مثلا میخوایم از  jQuery Impromptu استفاده کنیم .
@using(Ajax.BeginForm(MVC.Post.ActionNames.New ,
 MVC.Post.Name,
 new AjaxOptions(){ 
   HttpMethod = "Post" , 
   Confirm ="$.prompt('درخواست تایید - موافقید ؟',{prefix: 'dnt',buttons: { 'تایید': true, 'انصراف': false }});" }))
ولی کار نمیکنه.
یا تنها راهش استفاده از id دکمه‌ی Submit و Confirm دادن با کمک Jquery هستش؟
و یه موضوع دیگه . انجام اینکار درسته؟
@using(Ajax.BeginForm(MVC.Post.ActionNames.New , 
MVC.Post.Name, 
new AjaxOptions(){ 
   HttpMethod = "Post" , 
   OnSuccess = "var noty = window.noty({ text: 'نظر شما ثبت شد بعد از تایید نمایش داده میشود', type: 'success', layout: 'center', timeout: 4000 });"  
}))
منظورم نمایش پیغام به کاربر که عملیات موفق آمیز بوده ، یعنی وقتی متد OnSuccess اجرا میشود اطمینان داشته باشیم که Action مربوطه کاملا اجرا شده و اگه مشکلی در حین اجرای Action پیش بیاد این متد فراخونی نمیشه؟
‫۱۰ سال و ۹ ماه قبل، شنبه ۱۹ بهمن ۱۳۹۲، ساعت ۲۳:۵۴
وحید نصیری وحید نصیری
مطالب
نمایش خودکار مقدار یکDropDownList با کمک jQuery

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

 <asp:DropDownList ID="ddlActive" runat="server">
     <asp:ListItem Value="Active">فعال</asp:ListItem>
     <asp:ListItem Value="Inactive">غیرفعال</asp:ListItem>
 </asp:DropDownList>
اگر آیتم فعال انتخاب شد، مقدار active نیز کنار آن نمایش داده شود و الی آخر.

راه حل اول:
در تمام صفحات به ازای تک تک دراپ داون‌ها یک label اضافه کنیم و همچنین کدهای تمام قسمت‌های برنامه را نیز اصلاح کنیم تا این مورد را لحاظ کند.

راه دوم:
یک کنترل دراپ داون سفارشی را با خاصیت مورد نظر (همراه بودن با یک لیبل) ایجاد کرده و سپس تمام فرم‌ها را باید اصلاح کرد تا از این کنترل جدید استفاده کنند.

راه سوم:
استفاده از jQuery برای اعمال این مهم به کل برنامه بدون نیاز به تغییرات اساسی در آن (و همچنین سازگاری با تمام مرورگرها):

   //فقط در این محدوده
   $("#mainFormReq select").change(function() {
       var currentId = $(this).attr("id"); //آی دی شیء جاری
       var val = $(this).val();        //مقدار
       var text = $('#' + currentId + ' option:selected').text(); //متن
       $("#lbl" + currentId).remove();        //اگر نمونه‌ی قبلی موجود است حذف شود
       if (val && (val.length > 0) && (text != val)) {
           //اگر متن و مقدار یکی نیست نمایش داده شود
           $(this).after('<label id="lbl' + currentId + '">' + val + '</label>');
       }
   });
توضیحات:
در یک محدوده مشخص شده با ID مساوی mainFormReq (مثلا استفاده از master page ها و نسبت دادن این ID به content آن)، به دنبال تمام select های موجود در آن ناحیه می‌گردیم (اگر mainFormReq حذف شود، این جستجو در کل صفحه صورت خواهد گرفت) و تغییرات آن‌ها را تحت نظر قرار خواهیم داد.
سپس آی دی این کنترل انتخابی را دریافت می‌کنیم (از این ID برای تولید ID برچسب مورد نظر استفاده خواهیم کرد).
در ادامه مقدارهای text و value گزینه انتخابی دریافت می‌شوند (+).
سپس بررسی خواهیم کرد که آیا برچسبی با ID مشخص شده ما وجود دارد (در صورت انتخاب آیتم‌های دیگر، نباید برچسبی غیر منحصربفرد و تکراری در صفحه ایجاد کرد)
در ادامه اگر این مقدار null نبود و همچنین مقدار text و value هم یکی نبودند (اگر یکی بودند لزوم وجود این برچسب بی معنا است)، با استفاده از متد after کتابخانه jQuery یک برچسب را تولید و مقدار مورد نظر را پس از محل نمایش دراپ داون خود، نمایش خواهیم داد.

بهبود کد:
صورت مساله: اکنون نیاز است بجز ناحیه mainFormReq، به سه ناحیه دیگر نیز این تغییرات اعمال گردد. آیا باید همین مقدار کد را سه بار دیگر copy/paste کرد؟
روش صحیح انجام اینکار در jQuery ، نوشتن یک افزونه بر اساس کدهای فوق است که روش انجام آن به صورت زیر می‌باشد (+):

//<![CDATA[
(function($) {
   $.fn.dropdownlabel = function() {
       return this.change(function() {
           var obj = $(this);
           var currentId = obj.attr("id"); //آی دی شیء جاری
           var val = obj.val();        //مقدار
           var text = $('#' + currentId + ' option:selected').text(); //متن           
           $("#lbl" + currentId).remove();        //اگر نمونه‌ی قبلی موجود است حذف شود
           if (val && (val.length > 0) && (text != val)) {
               //اگر متن و مقدار یکی نیست نمایش داده شود
               obj.after('<label id="lbl' + currentId + '">' + val + '</label>');
           }
       });       
   };
})(jQuery);
//]]>
و در نهایت نحوه استفاده از آن (فایلی به نام jquery.dropdownlabel.js ) به صورت زیر خواهد بود:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestDropdownlabel.aspx.cs"
   Inherits="testWebForms87.TestDropdownlabel" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>

   <script src="jquery.min.js" type="text/javascript"></script>
   <script src="jquery.dropdownlabel.js" type="text/javascript"></script>

   <script type="text/javascript">
       $(document).ready(function() {
           $("#mainFormReq select").dropdownlabel();
       });
   </script>

</head>
<body>
   <form id="form1" runat="server">
   <div id="mainFormReq">
       <asp:DropDownList ID="ddlActive" runat="server">
           <asp:ListItem Value=""></asp:ListItem>
           <asp:ListItem Value="Active">فعال</asp:ListItem>
           <asp:ListItem Value="Inactive">غیرفعال</asp:ListItem>
       </asp:DropDownList>
   </div>
   </form>
</body>
</html>

‫۱۴ سال و ۱۳ ماه قبل، یکشنبه ۳ آبان ۱۳۸۸، ساعت ۱۸:۲۹
وحید نصیری وحید نصیری
مطالب دوره‌ها
افزودن مشخص کننده فیلد اجباری در ASP.NET MVC به صورت خودکار توسط jQuery
در ASP.NET MVC زمانیکه خاصیتی با ویژگی Required مزین می‌شود، تا زمان اعتبار سنجی فرم، هیچ نشانی را از خود بروز نمی‌دهد. برای مثال علاقمندیم مانند شکل زیر، یک ستاره پس از فیلدهای اجباری ظاهر گردد:


انجام اینکار نیز با دو سطر کد نویسی توسط jQuery قابل انجام است.
در ادامه خروجی رندر شده فیلدی را که پرکردن آن الزامی است مشاهده می‌کنید:
        <div class="editor-label">
            <label for="Title">عنوان</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-required="*" id="Title" name="Title" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
        </div>
تنها کاری که باید صورت گیرد، یافتن مواردی است که حاوی data-val-required هستند و سپس افزودن یک ستاره پس از آن‌ها:
        $(function() {    
            $('[data-val-required]').after('<span class="required-indicator"> (*)</span>');
        });
برای اعمال رنگ به آن نیز می‌توان کمی css سایت را ویرایش کرد:
.required-indicator
{
color: red;
font-size: 1.2em;
font-weight: bold;
}
‫۱۱ سال و ۷ ماه قبل، سه‌شنبه ۶ فروردین ۱۳۹۲، ساعت ۱۸:۰۸
احمد احمدی احمد احمدی
مطالب
آموزش فایرباگ - #2 - تب Console
در قسمت قبلی با تب‌های فایرباگ آشنا شدیم . در این قسمت و قسمت‌های بعدی ، با هر تب به صورت کامل آشنا خواهیم شد .

در این قسمت با تب Console  آشنا خواهیم شد .
در قسمت قبل در مورد این تب گفتیم :

در این تب دو بخش وجود دارد :
در بخش Log هشدار‌ها ، پیغام‌ها ، درخواست‌های XHR و ... نمایش داده می‌شوند .
بخش دیگر هم که در سمت راست قرار دارد ، مخصوص اجرای کدهای جاوا اسکریپت می‌باشد .
 

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

اکنون 2 سوال مطرح می‌شود :
  1. برای اجرای یک کد در حالت معمول چگونه عمل می‌کنیم ؟
    پاسخ : کدهای مورد نظر را بین تگ باز و بسته‌ی script قرار می‌دهیم و صفحه مورد نظر را در مرورگر باز می‌کنیم و مرورگر کد را اجرا می‌کند .
  2. در صورتی که کدهای ما خطا داشته باشند ، چگونه خطایابی می‌کنیم ؟
    پاسخ : در بین کدهای نوشته شده چند alert قرار می‌دهیم و سعی می‌کنیم مشکل را پیدا کنیم .

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



چگونه کدهای نوشته شده را سریع اجرا کنم ؟ کلید میانبر ( HotKey ) اجرای کد‌ها چیست ؟
پاسخ : فشردن کلید CTRL + Enter

امتحان کنید :
کد زیر را در بخش کدنویسی تایپ کنید و بوسیله کلید میانبر گفته شده ، آن را اجرا کنید .
document.getElementsByTagName("div");
 
تصویر ذیل نتیجه اجرای کدی هست که اجرا کردیم .



چند نکته :
  • قسمت هایی که با رنگ قرمز و یک دات ( . ) بعد از نام تگ قرار گرفته اند ، کلاس‌های CSS ای هستند که المنت دارد .
  • قسمت هایی که با رنگ آبی تیره و یک شارپ ( # ) بعد از نام تگ قرار گرفته اند ، ID تگ‌ها هستند .
  • قسمت هایی که کمرنگ هستند ، المنت هایی هستند که در صفحه قابل نمایش نیستند .
  • اگر یک تگ چند کلاس داشته باشد ، فقط اولین کلاس نمایش داده می‌شود .


دکمه‌ها و حالت‌های نمایش بخش کد نویسی

4 دکمه در قسمت کدنویسی وجود دارد :
  1. Run : اجرای کد
  2. Clear : خالی کردن بخش کد نویسی
  3. Copy : کپی کردن کد موجود در بخش کد نویسی در حافظه
  4. History : کدهای نوشته شده در نشست ( Session ) فعلی مرورگر

بخش کد نویسی می‌تواند به 2 شکل نمایش داده شود :
  1. بصورت جعبه چند خطی ( Command Editor )
  2. بصورت تک خطی ( Command Line )
با دکمه‌ی قرمز رنگ موجود در پایین - چپ می‌توانید بین این دو حالت سوئیچ کنید .


9 دکمه هم در بالای بخش log وجود دارد ( به ترتیب از چپ به راست ) :


  • دکمه ای با عنوان “Break On All Errors” . زمانی فعال شود ، در اولین اجرای یک کد از داخل صفحه ، به تب Script منتقل می‌شود و در خطی که کد در حال اجرا است توقف می‌کند .
  • Clear : بخش log را خالی می‌کند .
  • Persist : فعال بودن این دکمه باعث می‌شود که محتویات بخش Console در بارگزاری مجدد صفحه حفظ شود .
  • Profile : بوسیله این گزینه می‌توانید کدهای اجرایی خود در مدت زمان فعال بودن این دکمه ، تحت نظر بگیرید .
    به این صورت که پس از غیر فعال کردن این دکمه ( کلیک مجدد بروی آن ) می‌توانید تابع‌های اجرا شده ، تعداد فراخوانی آنها ، مدت زمان اجرای هر یک ، میانگین زمان اجرای هر بار یک تابع و ... را مشاهده کنید .
  • 5 دکمه‌ی بعدی هم برای فیلتر کردن Log هستند .


نمایش تعداد خطاهای اتفاق افتاده ، در نوار وضعیت ( Status Bar ) :

اگر در زمان فعال بودن فایرباگ ، در صفحه خطایی رخ دهد ، در نوار وضعیت عدد 1 را نمایش می‌دهد و به ازای هر خطای جدید ، یکی به تعداد خطاها اضافه می‌کند .
البته اگر از ورژن‌های جدید فایرفاکس استفاده می‌کنید ، نوار وضعیت را نخواهید داشت و تعداد خطاها را در کنار آیکون فایرباگ خواهید داشت .


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

چند متد کمکی برای نوشتن Log‌های مختلف در Console :
console.debug('This is a Debug message'); 
console.info('This is an Information'); 
console.warn('This is a Warning message'); 
console.error('This is an Error message');


در قسمت بعدی توابع مربوط به توسعه جاوا اسکریپت ( Command Line API & Console API ) در فایرباگ را بررسی خواهیم کرد .
‫۱۲ سال و ۴ ماه قبل، دوشنبه ۵ تیر ۱۳۹۱، ساعت ۰۵:۳۴