مطالب
تبدیل پلاگین‌های jQuery‌ به کنترل‌های ASP.Net

امروز داشتم یک سری از پلاگین‌های jQuery را مرور می‌کردم، مورد زیر به نظرم واقعا حرفه‌ای اومد و کمبود آن هم در بین کنترل‌های استاندارد ASP.Net محسوس است:
Masked Input Plugin
استفاده از آن به صورت معمولی بسیار ساده است. فقط کافی است اسکریپت‌های jQuery و سپس این افزونه به هدر صفحه اضافه شوند و بعد هم مطابق صفحه usage آن عمل کرد.
خیلی هم عالی! ولی این شیوه‌ی متداول کار در ASP.Net نیست. آیا بهتر نیست این مجموعه را تبدیل به یک کنترل کنیم و از این پس به سادگی با استفاده از Toolbox ویژوال استودیو آن‌را به صفحات اضافه کرده و بدون درگیر شدن با دستکاری سورس html صفحه، از آن استفاده کنیم؟ به‌عبارتی دیگر یکبار باید با جزئیات درگیر شد، آنرا بسته بندی کرد و سپس بارها از آن استفاده نمود. (مفاهیم شیءگرایی)

برای این‌کار، یک پروژه جدید ایجاد ASP.Net server control را آغاز نمائید (به نام MaskedEditCtrl).



به صورت پیش فرض یک قالب استاندارد ایجاد خواهد شد که کمی نیاز به اصلاح دارد. نام کلاس را به MaskedEdit تغییر خواهیم داد و همچنین در قسمت ToolboxData نیز نام کنترل را به MaskedEdit ویرایش می‌کنیم.
برای اینکه مجبور نشویم یک کنترل کاملا جدید را از صفر ایجاد کنیم، خواص و توانایی‌های اصلی این کنترل را از TextBox استاندارد به ارث خواهیم برد. بنابراین تا اینجای کار داریم:
namespace MaskedEditCtrl
{
[DefaultProperty("MaskFormula")]
[ToolboxData("<{0}:MaskedEdit runat=server></{0}:MaskedEdit>")]
[Description("MaskedEdit Control")]
public class MaskedEdit : TextBox

{

سپس باید رویداد OnPreRender را تحریف (override) کرده و در آن همان اعمالی را که هنگام افزودن اسکریپت‌ها به صورت دستی انجام می‌دادیم با برنامه نویسی پیاده سازی کنیم. چند نکته ریز در اینجا وجود دارد که در ادامه به آن‌ها اشاره خواهد شد.
از ASP.Net 2.0 به بعد، امکان قرار دادن فایل‌های اسکریپت و یا تصاویر همراه یک کنترل، درون فایل dll آن بدون نیاز به توزیع مجزای آنها به صورت WebResource مهیا شده است. برای این منظور اسکریپت‌های jQuery و افزونه mask edit را به پروژه اضافه نمائید. سپس به قسمت خواص آنها (هر دو اسکریپت) مراجعه کرده و build action آنها را به Embedded Resource تغییر دهید (شکل زیر):



از این پس با کامپایل پروژه، این فایل‌ها به صورت resource به dll ما اضافه خواهند شد. برای تست این مورد می‌توان به برنامه reflector مراجعه کرد (تصویر زیر):



پس از افزودن مقدماتی اسکریپت‌ها و تعریف آنها به صورت resource ، باید آنها را در فایل AssemblyInfo.cs پروژه نیز تعریف کرد (به صورت زیر).

[assembly: WebResource("MaskedEditCtrl.jquery.min.js", "text/javascript")]
[assembly: WebResource("MaskedEditCtrl.jquery.maskedinput-1.1.4.pack.js", "text/javascript")]

نکته مهم: همانطور که ملاحظه می‌کنید نام فضای نام پروژه (namespace) باید به ابتدای اسکریپت‌های معرفی شده اضافه شود.

پس از آن نوبت به افزودن این اسکریپت‌ها به صورت خودکار در هنگام نمایش کنترل است. برای این منظور داریم:
        protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);

//adding .js files
if (!Page.ClientScript.IsClientScriptIncludeRegistered("jquery_base"))
{
string scriptUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(),
"MaskedEditCtrl.jquery.min.js");
Page.ClientScript.RegisterClientScriptInclude("jquery_base", scriptUrl);
}

if (!Page.ClientScript.IsClientScriptIncludeRegistered("edit_ctrl"))
{
string scriptUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(),
"MaskedEditCtrl.jquery.maskedinput-1.1.4.pack.js");
Page.ClientScript.RegisterClientScriptInclude("edit_ctrl", scriptUrl);
}

if (!Page.ClientScript.IsStartupScriptRegistered("MaskStartup" + this.ID))
{
// Form the script to be registered at client side.
StringBuilder sbStartupScript = new StringBuilder();
sbStartupScript.AppendLine("jQuery(function($){");
sbStartupScript.AppendLine("$(\"#" + this.ClientID + "\").mask(\"" + MaskFormula + "\");");
sbStartupScript.AppendLine("});");
Page.ClientScript.RegisterStartupScript(typeof(Page),
"MaskStartup" + this.ID, sbStartupScript.ToString(), true);
}

}

همانطور که ملاحظه می‌کنید، ابتدا WebResource دریافت شده و سپس به صفحه اضافه می‌شود. در آخر مطابق راهنمای افزونه mask edit عمل شد. یعنی اسکریپت مورد نظر را ساخته و به صفحه اضافه کردیم.

نکته جاوا اسکریپتی: علت استفاده از this.ClientID جهت معرفی نام کنترل جاری این است که هنگامیکه کنترل توسط یک master page رندر شود، ID آن توسط موتور ASP.Net کمی تغییر خواهد کرد. برای مثال myTextBox‌ به ctl00_ContentPlaceHolder1_myTextBox تبدیل خواهد شد و اگر صرفا this.ID ذکر شده باشد دیگر دسترسی به آن توسط کدهای جاوا اسکریپت مقدور نخواهد بود. بنابراین از ClientID جهت دریافت ID نهایی رندر شده توسط ASP.Net کمک می‌گیریم.

در اینجا MaskFormula مقداری است که هنگام افزودن کنترل به صفحه می‌توان تعریف کرد.

[Description("MaskedEdit Formula such as 99/99/9999")]
[Bindable(true), Category("MaskedEdit"), DefaultValue(0)]
public string MaskFormula
{
get
{
if (ViewState["MaskFormula"] == null) ViewState["MaskFormula"] = "99/99/9999";
return (string)ViewState["MaskFormula"];
}
set { ViewState["MaskFormula"] = value; }

}

این خاصیت public هنگام نمایش در Visual studio به شکل زیر درخواهد آمد:



نکته مهم: در اینجا حتما باید از view state جهت نگهداری مقدار این خاصیت استفاده کرد تا در حین post back ها مقادیر انتساب داده شده حفظ شوند.

اکنون پروژه را کامپایل کنید. برای افزودن کنترل ایجاد شده به toolbox می‌توان مطابق تصویر عمل کرد:



نکته: برای افزودن آیکون به کنترل (جهت نمایش در نوار ابزار) باید: الف) تصویر مورد نظر از نوع bmp باشد با اندازه 16 در16 pixel . ب) باید آنرا به پروژه افزود و build action آن را به Embedded Resource تغییر داد. سپس آنرا در فایل AssemblyInfo.cs پروژه نیز تعریف کرد (به صورت زیر).

[assembly: System.Web.UI.WebResource("MaskedEditCtrl.MaskedEdit.bmp", "img/bmp")]

کنترل ما پس از افزوده شدن، شکل زیر را خواهد داشت:


جهت دریافت سورس کامل و فایل بایناری این کنترل، اینجا کلیک کنید.


پاسخ به پرسش‌ها
ساخت یک دیتابیس ترکیبی از SQL و فایل های XML

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

۲: ۱۰۰۰ کالا از ۱۰۰ سایت، آیا دامنه تغییر این اعداد مثلا ۱۲۰۰ کالا از ۱۳۰ سایت خواهد بود؟ یا امکانش هست که در کوتاه/میان‌مدت تبدیل به ۱۰٬۰۰۰ کالا از ۵۰۰۰ سایت بشه؟ (پیش‌بینی رشد)

۳: ایندکس‌گذاری روی XML در SQL Server به خوبی پشتیبانی می‌شه، سایز XML در سریالایز/دیسریالایز شدن و طبیعتن در کارایی سیستم اثرگذار است

۴: برای محصولی مثل SQL Server نگهداری ۴۰ میلیون رکورد (۱ سال داده‌ با اعدادی که فرمودید) عدد کوچکی است، «ولی» بسیار وابسته به اینه که زیرساخت خوب و مدیردیتابیس با دانشی داشته باشید وگرنه حتی ۴۰۰٬۰۰۰ رکورد هم می‌تونه مشکل ایجاد کنه

۵: این نوع سیستم‌ها عموما در مرحله جمع‌آوری به صورت OLTP طراحی می‌شن و برای سابقه به DW با ساختار Dimensional تبدیل و منتقل می‌شن. باز هم بستگی به تیم و شرایط تولید داره

۶: نکته بعدی اینکه مثلا به راحتی می‌تونید دیتا رو روی جدول پارتیشن‌بندی کنید و پارتیشن‌های قدیمی رو فشرده کنید

نظرات مطالب
فعال سازی و پردازش صفحات پویای افزودن، ویرایش و حذف رکوردهای jqGrid در ASP.NET MVC
سلام. من کد‌های زیر رو نوشتم اما دیلیت خطی ( ردیفی) برام کار نمی‌کنه و اررو 500 میده:
$("#JQGrid1").jqGrid({
                url: "/manager/Products/OnProductDataRequested",
                editurl: '/manager/Products/EditProductData',
                mtype: "GET",
                datatype: "json",
                page: 1,
                sortname: 'Priority',
                sortorder: "desc",
                viewrecords: true,
                jsonReader: { id: "Id" },
                prmNames: { id: "Id" },
                colNames: ["Id","خلاصه","توضیح خلاصه","قیمت","قیمت با تخفیف","درصد کارمزد سایت","آستانه هشدار موجودی","محتوا", "عنوان","فروشگاه","گروه","تعداد موجودی", "اولویت","محصولات مکمل","تصاویر","مقادیر مشخصه محصول","قیمت","نظرات", "فعال","ویژه","موجود","برند","عملیات درجا","عملیات کامل"],
                colModel: [
                    { key: true, width: 50, name: "Id", hidden: true, search: false },
                    {
                        editable: true, width: 10, name: "Abstract", search: true, stype: "text", editable: true,
                        hidden: true,
                        editrules: { edithidden: true }
                    },
                    {
                        editable: true, width: 10, name: "AbstractDescription", search: true, stype: "text", editable: true,
                        hidden: true,
                        editrules: { edithidden: true }
                    },
                    {
                        editable: true, width: 10, name: "Value", search: true, stype: "text", editable: true,
                        hidden: true,
                        editrules: { edithidden: true }
                    },
                    {
                        editable: true, width: 10, name: "Discount", search: true, stype: "text", editable: true,
                        hidden: true,
                        editrules: { edithidden: true }
                    },
                    {
                        editable: true, width: 10, name: "SiteWagePercentage", search: true, stype: "text", editable: true,
                        hidden: true,
                        editrules: { edithidden: true }
                    },
                    {
                        editable: true, width: 10, name: "InventoryAlertLimit", search: true, stype: "text", editable: true,
                        hidden: true,
                        editrules: { edithidden: true }
                    },
                    {
                        editable: true, width: 10, name: "Context", search: true, stype: "text", editable: true,
                        hidden: true,
                        editrules: { edithidden: true }
                    },
                    {
                        editable: true, width: 150, name: "Title", search: true, stype: "text",
                        searchoptions: { "sopt": ["bw", "eq"] }
                    },
                   {
                       name: "shopTitle", align: 'center', viewable: true, editrules: { edithidden: true },
                       search: true,
                       editable: true, stype: 'select',
                       edittype: 'select',
                       searchoptions: {
                           sopt: ["eq", "ne"],
                           dataUrl: "/manager/Products/Getshop/", buildSelect: function (data) {
                               var response, s = '<select>', i;
                               response = jQuery.parseJSON(data);
                               if (response && response.length) {
                                   $.each(response, function (i) {
                                       s += '<option value="' + this.shId + '">' + this.shTitle + '</option>';
                                   });
                               }
                               return s + '</select>';
                           }, 
                       },
                       editoptions: {
                           dataUrl: "/manager/Products/Getshop",
                           buildSelect: function (data) {
                               var response, s = '<select>', i;
                               response = jQuery.parseJSON(data);
                               if (response && response.length) {
                                   $.each(response, function (i) {
                                       s += '<option value="' + this.shId + '">' + this.shTitle + '</option>';
                                   });
                               }
                               return s + '</select>';
                           },
                       }
                   },
                    {
                        editable: true, name: "groupTitle", search: true, stype: "select"
                        , editrules: { edithidden: true },
                        search: true,
                        edittype: 'select',
                        editoptions: {
                        dataUrl:  "/manager/Products/GetGroups",
                          buildSelect: function (data) {
                              var response, s = '<select>', i;
                              response = jQuery.parseJSON(data);
                              if (response && response.length) {
                                  $.each(response, function (i) {
                                      s += '<option value="' + this.grpId + '">' + this.grpTitle + '</option>';
                                  });
                              }
                              return s + '</select>';
                          },
                          }
                    },
                    {
                        editable: true, width: 70, name: "AvailableCount", search: true, stype: "number",
                        searchoptions: { "sopt": ["bw", "eq"] }
                    },
                   {
                       editable: true, width: 50, name: "Priority", search: true, stype: "number",
                       searchoptions: { "sopt": ["bw", "eq"] }
                   },
                   {
                       editable: false, width: 80, name: "ComplementProducts", search: true, stype: "text",
                       searchoptions: { "sopt": ["bw", "eq"] }
                   },
                   {
                       editable: false, width: 70, name: "Images", search: true, stype: "text",
                       searchoptions: { "sopt": ["bw", "eq"] }
                   },
                   {
                       editable: false, width: 100, name: "ProductProperty", search: true, stype: "text",
                       searchoptions: { "sopt": ["bw", "eq"] }
                   },
                   {
                       editable: false, width: 80, name: "Price", search: true, stype: "text",
                       searchoptions: { "sopt": ["bw", "eq"] }
                   },
                   {
                       editable: false, width: 80, name: "Comments", search: true, stype: "text",
                       searchoptions: { "sopt": ["bw", "eq"] }
                   },
                   {
                       editable: true, width: 50, name: "Active", search: true, formatter: 'checkbox', edittype: 'checkbox', editoptions: { value: "True:False" }
                       , formatoptions: { disabled: false}
                   },
                    {
                        editable: true, width: 80, name: "AmazingOffer", search: true, formatter: 'checkbox', edittype: 'checkbox', editoptions: { value: "True:False" }
                        , formatoptions: { disabled: false}
                    },
                    {
                        editable: true, width: 80, name: "Available", search: true, formatter: 'checkbox', edittype: 'checkbox', editoptions: { value: "True:False" },
                        searchoptions: { "sopt": ["bw", "eq"] }, formatoptions: { disabled: false }
                    },
                   
                       {
                           name: 'BrandId', align: 'center', hidden: true, viewable: true, editrules: { edithidden: true },
                           editable: true, stype: 'select',
                           edittype: 'select',
                           editoptions: {
                               dataUrl: "/manager/Products/GetBrands",
                               buildSelect: function (data) {
                                   var response, s = '<select>', i;
                                   response = jQuery.parseJSON(data);
                                   if (response && response.length) {
                                       $.each(response, function (i) {
                                           s += '<option value="' + this.brandId + '">' + this.brandTitle + '</option>';
                                       });
                                   }
                                   return s + '</select>';
                               },
                           }

                       },
                    {
                        name: "myac", width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions',
                        formatoptions: { keys: true }
                       },
                    {
                        editable: false, width: 70, name: "FullEdit", search: true, stype: "text",
                        searchoptions: { "sopt": ["bw", "eq"] }
                    },
                    // BLAH, BLAH, BLAH
                ],
                gridComplete: function () {
                    var ids = jQuery("#JQGrid1").jqGrid('getDataIDs');
                    for (var i = 0; i < ids.length; i++) {
                        var cl = ids[i];
                        ComplementProducts = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/ComplementProducts/Index/" + cl + " }) + '><span class=\"fa fa-shopping-cart\" style='color: white;'></span></a></div>";
                        Images = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/Images/Index/" + cl + " }) + '><span class=\"fa fa-picture-o\" style='color: white;'></span></a></div>";
                        ProductProperty = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/ProductPropertyItems/Index/" + cl + " }) + '><span class=\"fa fa-braille\" style='color: white;'></span></a></div>";
                        Price = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/pricesppitems/Index/" + cl + " }) + '><span class=\"fa fa-line-chart\" style='color: white;'></span></a></div>";
                        Comments = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/Products/Comments/" + cl + " }) + '><span class=\"fa fa-comments\" style='color: white;'></span></a></div>";
                        FullEdit = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/Products/Edit/" + cl + " }) + '><span class=\"fa fa-edit\" style='color: white;'></span></a><a class='btn btn-primary' href=/manager/Products/Details/" + cl + " }) + '><span class=\"fa fa-exclamation-circle\" style='color: white;'></span></a></div>";

                        jQuery("#JQGrid1").jqGrid('setRowData', ids[i], { ComplementProducts: ComplementProducts, Images: Images, ProductProperty: ProductProperty, Price: Price, Comments: Comments, FullEdit: FullEdit});
                    }
                }, loadComplete: function () {

                    var activeButton = getColumnIndexByName('Active');
                    var ids = jQuery("#JQGrid1").jqGrid('getDataIDs'); //id's
                    $("tbody > tr.jqgrow > td:nth-child(" + (activeButton + 1) + ") > input",
                      this).click(function (e) {
                          var rowId = $(e.target).closest("tr").attr("id");
                          // alert("active clicked " + rowId);
                          $.ajax({
                              type: "POST",
                              url: "/manager/Products/Activate",
                              data: {
                                  id: rowId
                              },
                              dataType: "json"
                          });

                      });



                    var amazingOfferButton = getColumnIndexByName('AmazingOffer');
                    var ids = jQuery("#JQGrid1").jqGrid('getDataIDs'); //id's
                    $("tbody > tr.jqgrow > td:nth-child(" + (amazingOfferButton + 1) + ") > input",
                      this).click(function (e) {
                          var rowId = $(e.target).closest("tr").attr("id");
                          $.ajax({
                              type: "POST",
                              url: "/manager/Products/ShowInAmazingOffer",
                              data: {
                                  id: rowId
                              },
                              dataType: "json"
                          });
                          $('#JQGrid1').trigger('reloadGrid');
                      });

                    var availableButton = getColumnIndexByName('Available');
                    var ids = jQuery("#JQGrid1").jqGrid('getDataIDs'); //id's
                    $("tbody > tr.jqgrow > td:nth-child(" + (availableButton + 1) + ") > input",
                      this).click(function (e) {
                          var rowId = $(e.target).closest("tr").attr("id");
                          $.ajax({
                              type: "POST",
                              url: "/manager/Products/Available",
                              data: {
                                  id: rowId
                              },
                              dataType: "json"
                          });
                          $('#JQGrid1').trigger('reloadGrid');
                      });
                },
                height: "auto",
                caption: "",
                viewrecords: true,
                rowNum: 20,
                direction: "rtl",
                pager: jQuery('#JQGrid1_pager'),
                rowList: [10, 20, 30, 40],
                toppager: true,
                jsonReader:
                {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,
                    Id: "0"
                },

            }).jqGrid('navGrid', '#JQGrid1_pager',
                // the buttons to appear on the toolbar of the grid
                { edit: true, add: true, del: true, search: true, refresh: true, view: false, position: "left", cloneToTop: true,searchtext:"جستجو" },
                   // options for the Edit Dialog
                   {
                       width: 450,
                       editCaption: "ویرایش محصول",
                       recreateForm: true,
                       closeAfterEdit: true,
                       viewPagerButtons: false,
                       //afterShowForm: populateGroups,
                       errorTextFormat: function (data) {
                           return 'Error: ' + data.responseText
                       }
                },
                   // Add options
                   { url: '/TabMaster/Create', closeAfterAdd: true },
                   // Delete options
                   { url: '/manager/Products/Remove' },
                   {
                       zIndex: 100,
                       caption: "جستجوی محصول",
                       sopt: ['cn']
                   }
                   );

 
نظرات اشتراک‌ها
پشتیبانی رسمی از زبان و تقویم فارسی در Orchard - نسخه پیش انتشار
خبر بسیار خوشحال کننده ای بود. امیدوارم امکانات فارسی و راست به چپ نویسی اورچرد روز به روز بیشتر شده و شاهده رواج بیشتر آن در دنیای CMSها باشیم.
نظرات اشتراک‌ها
Mono 3.0 منتشر شد
سایت فوق مربوط است به مدیر پروژه mono (در مورد صحت خبر).
همچنین نسخه دانلودی از اینجا هم قابل دریافت است/خواهد بود: (^)
ضمن اینکه اگر کامنت‌های سایت فوق را بررسی کنید، عنوان شده به زودی سایت اصلی را هم به روز خواهند کرد.
اشتراک‌ها
پروژه‌های Setup از نسخه ویژوال استودیو 2012 به بعد پشتیبانی نخواهند شد!
خبر بد اینکه تعدادی از تمپلت‌هایی که سال‌ها در کنار ما بودند از نسخه ویژوال استودیو 2012 دیگر پشتیبانی نخواهند شد! جایگزین این تمپلیت‌ها گزینه‌های تجاری خواهند بود. :(
پروژه‌های Setup از نسخه ویژوال استودیو 2012 به بعد پشتیبانی نخواهند شد!
نظرات مطالب
ساخت منوهای چند سطحی در ASP.NET MVC
سلام; در این روش (AOP Interceptors ) آیا میتوان موقع افزودن خبر جدید یا منو جدید یا ... کش سرویس مورد نظر رو غیرفعال کرد و پس از اولین لود دوباره اطلاعات کش شوند
نظرات مطالب
ایجاد لینک با یک تصویر بوسیله Html Helper
یه سوال برام پیش اومد
فرض کنیم کاربری لاگین کرده رولش هم مثلا خبرنگاره,
 در پروفایلش لیست خبر هایی که ثبت کرده را می‌بینه با توجه به مثالی که شما هم زدید , اگر مثلا عدد "1" لینک ویرایش (یا حذف) که نشانگر id است رو به صورت دستی(تغییر کد html و ...) تغییر بده, می‌تونه به خبر دیگه ای دسترسی داشته باشه ؟
خبری که ثبت کنندش خودش نیست بتبع هم اجازه ویرایش و حذف ان را نباید داشته باشه...
راه حل چیست؟ آیا باید قبل از نشان دادن صفحه ویرایش یا قبل از عمل حذف ثبت کننده خبر هم چک بشه (که فردی که این خبر رو ثبت نکرده دسترسی به ان نداشته باشه)؟
لطفا راهنمایی بفرمایید.
سپاس.
نظرات مطالب
OutputCache در ASP.NET MVC
سلام
یک ابهام در یک مثال واقعی مثلا سایت خبری.
اگر بخواهیم خروجی اکشن اخبار رو کش کنیم، و در عین حال تعداد بازدید از هر خبر رو هم ثبت کنیم، چطور باید این کار رو انجام داد؟