مطالب
استفاده از ویجت آپلود KendoUI بصورت پاپ آپ
پیشنیاز:
- بررسی ویجت Kendo UI File Upload

در مطلب قبل جزئیات استفاده از ویجت آپلود فریمورک قدرتمند Kendo UI عنوان شدند. در این مطلب قصد داریم طریقه‌ی استفاده از آن را به صورت پاپ آپ، در ویجت گرید Kendo بررسی کنیم.
مدل زیر را در نظر بگیرید:
var product = {
    ProductId: 1001,
    ProductName: "Product 1001",
    Available: true,
    Filename: "Image02.png"
};
و برای ایجاد یک دیتاسورس سمت کاربر برای گرید، یک منبع داده را با استفاده از مدل بالا تولید میکنیم:
        var productCount = 100;
        var products = [];

        function datasourceFilling() {
            for (var i = 0; i < productCount; i++) {
                var product = {
                    ProductId: i,
                    ProductName: "Product " + i + " Name",
                    Available: i % 2 == 0 ? true: false,
                    Filename: i % 2 == 0 ? "Image01.png" : "Image02.png"
                };
                products.push(product);
            }
        }
سپس برای نمایش در گرید، سیم پیچی‌های لازم را انجام میدهیم:
        function makekendoGrid() {

            $("#grid").kendoGrid({
                dataSource: {
                    data: products,
                    schema: {
                        model:
                        {
                            //id: "ProductId",
                            fields:
                            {
                                ProductId: { editable: false, nullable: true },
                                ProductName: { validation: { required: true } },
                                Available: { type: "boolean" },
                                ImageName: { type: "string", editable: false },
                                Filename: { type: "string", validation: { required: true } }
                            }
                        }
                    },
                    pageSize: 20
                },
                height: 550,
                scrollable: true,
                sortable: true,
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                editable: {
                    mode: "popup",
                },
                columns: [
                    { field: "ProductName", title: "Product Name" },
                    { field: "Available", width: "100px", template: '<input type="checkbox" #= Available ? checked="checked" : "" # disabled="disabled" ></input>' },
                    { field: "ImageName", width: "150px", template: "<img src='/img/#=Filename#' alt='#=Filename #' Title='#=Filename #' height='80' width='80'/>" },
                    { field: "Filename", width: "100px", editor: fileEditor },
                    { command: ["edit"], title: "&nbsp;", width: "200px" }
                ]
            });

            var grid = $('#grid').data('kendoGrid');
            grid.hideColumn(3);
        }
همانطور که میبینید در ستون‌های گرید، یک ستون ImageName نیز اضافه شده‌است که به‌صورت تمپلیت تصویر محصول را نمایش میدهد. برای خود فیلد نیز از یک تمپلیت ادیتور که در ادامه تعریف خواهیم کرد استفاده کرده‌ایم:
        function fileEditor(container, options) {

            $('<input type="file" name="file"/>')
                .appendTo(container)
                .kendoUpload({
                    multiple: false,
                    async: {
                        saveUrl: "@Url.Action("Save", "Home")",
                        removeUrl: "@Url.Action("Remove", "Home")",
                        autoUpload: true,
                    },
                    upload: function (e) {
                        alert("upload");
                        e.data = { Id: options.model.Id };
                    },
                    success: function (e) {
                        alert("success");
                        options.model.set("ImageName", e.response.ImageUrl);
                    },
                    error: function (e) {
                        alert("error");
                        alert("Failed to upload " + e.files.length + " files " + e.XMLHttpRequest.status + " " + e.XMLHttpRequest.responseText);
                    }
                });
        }
برای آپلود فایل و حذف آن نیز اکشن‌های لازم را در سمت سرور مینویسم:
        [System.Web.Mvc.HttpPost]
        public virtual ActionResult Save(HttpPostedFileBase file)
        {
            var exName = Path.GetExtension(file.FileName);
            var totalFileName = System.Guid.NewGuid().ToString().ToLower().Replace("-", "") + exName;
            var physicalPath = Path.Combine(Server.MapPath("/img"), totalFileName);
            file.SaveAs(physicalPath);
            return Json(new { ImageUrl = totalFileName }, "text/plain");
        }

        [System.Web.Mvc.HttpPost]
        public virtual ContentResult Remove(string fileName)
        {
            if (fileName != null)
            {
                var physicalPath = Path.Combine(Server.MapPath("/img"), fileName);
                System.IO.File.Delete(physicalPath);
            }

            // Return an empty string to signify success
            return Content("");
        }

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

اشتراک‌ها
نمایش لیست کشورها به همراه پرچم آنها به صورت dropdown با استفاده از select2
بعد از دانلود و افزودن  select2 ، برای پرچم‌ها سراغ semantic-ui  می‌رویم و بعد از دانلود آن، فایل flag.min.css در آدرس Semantic-Ui/components/flag.min.css را به پروژه اضافه می‌کنیم.
<div>
    <div>
        <select ></select>
    </div>
</div>

 $(document).ready(function () {

            $('.js-example-basic-single').select2({
                data: [
                    { id: "al", text: "Albania" },
                    { id: "dz", text: "Algeria" },
                    { id: "as", text: "American Samoa" },
                    { id: "ad", text: "Andorra" },
                    { id: "ao", text: "Angola" },
                    { id: "ai", text: "Anguilla" },
                    { id: "ag", text: "Antigua" },
                    { id: "ar", text: "Argentina" },
                    { id: "am", text: "Armenia" },
                    { id: "aw", text: "Aruba" },
                    { id: "au", text: "Australia" },
                    { id: "at", text: "Austria" },
                    { id: "az", text: "Azerbaijan" },
                    { id: "bs", text: "Bahamas" },
                    { id: "bh", text: "Bahrain" },
                    { id: "bd", text: "Bangladesh" },
                    { id: "bb", text: "Barbados" },
                    { id: "by", text: "Belarus" },
                    { id: "be", text: "Belgium" },
                    { id: "bz", text: "Belize" },
                    { id: "bj", text: "Benin" },
                    { id: "bm", text: "Bermuda" },
                    { id: "bt", text: "Bhutan" },
                    { id: "bo", text: "Bolivia" },
                    { id: "ba", text: "Bosnia" },
                    { id: "bw", text: "Botswana" },
                    { id: "bv", text: "Bouvet Island" },
                    { id: "br", text: "Brazil" },
                    { id: "vg", text: "British Virgin Islands" },
                    { id: "bn", text: "Brunei" },
                    { id: "bg", text: "Bulgaria" },
                    { id: "bf", text: "Burkina Faso" },
                    { id: "mm", text: "Burma" },
                    { id: "bi", text: "Burundi" },
                    { id: "tc", text: "Caicos Islands" },
                    { id: "kh", text: "Cambodia" },
                    { id: "cm", text: "Cameroon" },
                    { id: "ca", text: "Canada" },
                    { id: "cv", text: "Cape Verde" },
                    { id: "ky", text: "Cayman Islands" },
                    { id: "cf", text: "Central African Republic" },
                    { id: "td", text: "Chad" },
                    { id: "cl", text: "Chile" },
                    { id: "cn", text: "China" },
                    { id: "cx", text: "Christmas Island" },
                    { id: "cc", text: "Cocos Islands" },
                    { id: "co", text: "Colombia" },
                    { id: "km", text: "Comoros" },
                    { id: "cg", text: "Congo Brazzaville" },
                    { id: "cd", text: "Congo" },
                    { id: "ck", text: "Cook Islands" },
                    { id: "cr", text: "Costa Rica" },
                    { id: "ci", text: "Cote Divoire" },
                    { id: "hr", text: "Croatia" },
                    { id: "cu", text: "Cuba" },
                    { id: "cy", text: "Cyprus" },
                    { id: "cz", text: "Czech Republic" },
                    { id: "dk", text: "Denmark" },
                    { id: "dj", text: "Djibouti" },
                    { id: "dm", text: "Dominica" },
                    { id: "do", text: "Dominican Republic" },
                    { id: "ec", text: "Ecuador" },
                    { id: "eg", text: "Egypt" },
                    { id: "sv", text: "El Salvador" },
                    { id: "gb", text: "England" },
                    { id: "gq", text: "Equatorial Guinea" },
                    { id: "er", text: "Eritrea" },
                    { id: "ee", text: "Estonia" },
                    { id: "et", text: "Ethiopia" },
                    { id: "eu", text: "European Union" },
                    { id: "fk", text: "Falkland Islands" },
                    { id: "fo", text: "Faroe Islands" },
                    { id: "fj", text: "Fiji" },
                    { id: "fi", text: "Finland" },
                    { id: "fr", text: "France" },
                    { id: "gf", text: "French Guiana" },
                    { id: "pf", text: "French Polynesia" },
                    { id: "tf", text: "French Territories" },
                    { id: "ga", text: "Gabon" },
                    { id: "gm", text: "Gambia" },
                    { id: "ge", text: "Georgia" },
                    { id: "de", text: "Germany" },
                    { id: "gh", text: "Ghana" },
                    { id: "gi", text: "Gibraltar" },
                    { id: "gr", text: "Greece" },
                    { id: "gl", text: "Greenland" },
                    { id: "gd", text: "Grenada" },
                    { id: "gp", text: "Guadeloupe" },
                    { id: "gu", text: "Guam" },
                    { id: "gt", text: "Guatemala" },
                    { id: "gw", text: "Guinea-Bissau" },
                    { id: "gn", text: "Guinea" },
                    { id: "gy", text: "Guyana" },
                    { id: "ht", text: "Haiti" },
                    { id: "hm", text: "Heard Island" },
                    { id: "hn", text: "Honduras" },
                    { id: "hk", text: "Hong Kong" },
                    { id: "hu", text: "Hungary" },
                    { id: "is", text: "Iceland" },
                    { id: "in", text: "India" },
                    { id: "io", text: "Indian Ocean Territory" },
                    { id: "id", text: "Indonesia" },
                    { id: "ir", text: "Iran" },
                    { id: "iq", text: "Iraq" },
                    { id: "ie", text: "Ireland" },
                    { id: "il", text: "Israel" },
                    { id: "it", text: "Italy" },
                    { id: "jm", text: "Jamaica" },
                    { id: "jp", text: "Japan" },
                    { id: "jo", text: "Jordan" },
                    { id: "kz", text: "Kazakhstan" },
                    { id: "ke", text: "Kenya" },
                    { id: "ki", text: "Kiribati" },
                    { id: "kw", text: "Kuwait" },
                    { id: "kg", text: "Kyrgyzstan" },
                    { id: "la", text: "Laos" },
                    { id: "lv", text: "Latvia" },
                    { id: "lb", text: "Lebanon" },
                    { id: "ls", text: "Lesotho" },
                    { id: "lr", text: "Liberia" },
                    { id: "ly", text: "Libya" },
                    { id: "li", text: "Liechtenstein" },
                    { id: "lt", text: "Lithuania" },
                    { id: "lu", text: "Luxembourg" },
                    { id: "mo", text: "Macau" },
                    { id: "mk", text: "Macedonia" },
                    { id: "mg", text: "Madagascar" },
                    { id: "mw", text: "Malawi" },
                    { id: "my", text: "Malaysia" },
                    { id: "mv", text: "Maldives" },
                    { id: "ml", text: "Mali" },
                    { id: "mt", text: "Malta" },
                    { id: "mh", text: "Marshall Islands" },
                    { id: "mq", text: "Martinique" },
                    { id: "mr", text: "Mauritania" },
                    { id: "mu", text: "Mauritius" },
                    { id: "yt", text: "Mayotte" },
                    { id: "mx", text: "Mexico" },
                    { id: "fm", text: "Micronesia" },
                    { id: "md", text: "Moldova" },
                    { id: "mc", text: "Monaco" },
                    { id: "mn", text: "Mongolia" },
                    { id: "me", text: "Montenegro" },
                    { id: "ms", text: "Montserrat" },
                    { id: "ma", text: "Morocco" },
                    { id: "mz", text: "Mozambique" },
                    { id: "na", text: "Namibia" },
                    { id: "nr", text: "Nauru" },
                    { id: "np", text: "Nepal" },
                    { id: "an", text: "Netherlands Antilles" },
                    { id: "nl", text: "Netherlands" },
                    { id: "nc", text: "New Caledonia" },
                    { id: "pg", text: "New Guinea" },
                    { id: "nz", text: "New Zealand" },
                    { id: "ni", text: "Nicaragua" },
                    { id: "ne", text: "Niger" },
                    { id: "ng", text: "Nigeria" },
                    { id: "nu", text: "Niue" },
                    { id: "nf", text: "Norfolk Island" },
                    { id: "kp", text: "North Korea" },
                    { id: "mp", text: "Northern Mariana Islands" },
                    { id: "no", text: "Norway" },
                    { id: "om", text: "Oman" },
                    { id: "pk", text: "Pakistan" },
                    { id: "pw", text: "Palau" },
                    { id: "ps", text: "Palestine" },
                    { id: "pa", text: "Panama" },
                    { id: "py", text: "Paraguay" },
                    { id: "pe", text: "Peru" },
                    { id: "ph", text: "Philippines" },
                    { id: "pn", text: "Pitcairn Islands" },
                    { id: "pl", text: "Poland" },
                    { id: "pt", text: "Portugal" },
                    { id: "pr", text: "Puerto Rico" },
                    { id: "qa", text: "Qatar" },
                    { id: "re", text: "Reunion" },
                    { id: "ro", text: "Romania" },
                    { id: "ru", text: "Russia" },
                    { id: "rw", text: "Rwanda" },
                    { id: "sh", text: "Saint Helena" },
                    { id: "kn", text: "Saint Kitts and Nevis" },
                    { id: "lc", text: "Saint Lucia" },
                    { id: "pm", text: "Saint Pierre" },
                    { id: "vc", text: "Saint Vincent" },
                    { id: "ws", text: "Samoa" },
                    { id: "sm", text: "San Marino" },
                    { id: "gs", text: "Sandwich Islands" },
                    { id: "st", text: "Sao Tome" },
                    { id: "sa", text: "Saudi Arabia" },
                    { id: "sn", text: "Senegal" },
                    { id: "cs", text: "Serbia" },
                    { id: "rs", text: "Serbia" },
                    { id: "sc", text: "Seychelles" },
                    { id: "sl", text: "Sierra Leone" },
                    { id: "sg", text: "Singapore" },
                    { id: "sk", text: "Slovakia" },
                    { id: "si", text: "Slovenia" },
                    { id: "sb", text: "Solomon Islands" },
                    { id: "so", text: "Somalia" },
                    { id: "za", text: "South Africa" },
                    { id: "kr", text: "South Korea" },
                    { id: "es", text: "Spain" },
                    { id: "lk", text: "Sri Lanka" },
                    { id: "sd", text: "Sudan" },
                    { id: "sr", text: "Suriname" },
                    { id: "sj", text: "Svalbard" },
                    { id: "sz", text: "Swaziland" },
                    { id: "se", text: "Sweden" },
                    { id: "ch", text: "Switzerland" },
                    { id: "sy", text: "Syria" },
                    { id: "tw", text: "Taiwan" },
                    { id: "tj", text: "Tajikistan" },
                    { id: "tz", text: "Tanzania" },
                    { id: "th", text: "Thailand" },
                    { id: "tl", text: "Timorleste" },
                    { id: "tg", text: "Togo" },
                    { id: "tk", text: "Tokelau" },
                    { id: "to", text: "Tonga" },
                    { id: "tt", text: "Trinidad" },
                    { id: "tn", text: "Tunisia" },
                    { id: "tr", text: "Turkey" },
                    { id: "tm", text: "Turkmenistan" },
                    { id: "tv", text: "Tuvalu" },
                    { id: "ug", text: "Uganda" },
                    { id: "ua", text: "Ukraine" },
                    { id: "ae", text: "United Arab Emirates" },
                    { id: "us", text: "United States" },
                    { id: "uy", text: "Uruguay" },
                    { id: "um", text: "Us Minor Islands" },
                    { id: "vi", text: "Us Virgin Islands" },
                    { id: "uz", text: "Uzbekistan" },
                    { id: "vu", text: "Vanuatu" },
                    { id: "va", text: "Vatican City" },
                    { id: "ve", text: "Venezuela" },
                    { id: "vn", text: "Vietnam" },
                    { id: "wf", text: "Wallis and Futuna" },
                    { id: "eh", text: "Western Sahara" },
                    { id: "ye", text: "Yemen" },
                    { id: "zm", text: "Zambia" },
                    { id: "zw", text: "Zimbabwe" }
                ],
                placeholder: "کشور مورد نظرتان را انتخاب نمایید",
                language: "fa",
                theme: "bootstrap",
                dir: "rtl",
                tokenSeparators: [',', ' '],
                multiple: false,
                templateResult:format,
                templateSelection: format,
                escapeMarkup: function (m) { return m; }
            });

        });
    </script>
در اینجا ما اطلاعات را به صورت دستی وارد کرده ایم. شما می‌توانید این اطلاعات را از سمت سرور دریافت نمایید.
در templateResult و templateSelection شما می‌توانید ساختار مورد نظرتان را پیاده سازی کنید. اولی در لیستی از dropdown به عنوان یک option و دومی وقتی که انتخاب می‌شود.
تابع fotmat به صورت زیر می‌باشد.
 function format(state) {
            var $state = $(
                '<span>' + state.text + ' <i class="' + state.id + ' flag"> ' +
                '</i></span>'
            );
            return $state;
        };

لازم به ذکر است کلاس لازم برای ایجاد  پرچم کشوری مثل ایران با استفاده از Semantic-Ui به صورت زیر می‌باشد.
<i class="ir flag"></i>
و در نهایت خروجی آن به شکل زیر می‌باشد

نمایش لیست کشورها به همراه پرچم آنها به صورت dropdown با استفاده از select2
نظرات مطالب
C# 7.1 - Tuple Name Inference
یکی از ویژگی‌های جالب Tuple اینه که میشه در بدنه For نوع داده‌ی متفاوتی قرار داد
public static  void Main() 
{
        var li = Enumerable.Range(1, 10).ToList();
        var sb = new StringBuilder();
        //for (int i=0,j=1;;) 
//در اینجا میشه نوع‌های متفاوتی تعریف کرد
        for ( (int i, bool first) = (0, true); i < li.Count; i++, first = false)
        {
            if (!first)
                sb.Append(", ");
            
            sb.Append(li[i]);
        }
        
        Console.WriteLine(sb.ToString());
}
نظرات مطالب
Ajax.BeginForm و ارسال فایل به سرور در ASP.NET MVC
با سلام
ما مطابق آموزشی که در این مقاله داده شده  از یک اکشن متد برای ذخیره عکس ارسالی تو یک پوشه و سپس برگشت دادن مسیر عکس و از یک اکشن متد دیگه برای ذخیره اطلاعاتی که قراره همراه با فرم ارسال بشن (به همراه مسیر عکس برگشت داده شده)، استفاده میکنیم
مشکلی که ما موقع استفاده از این افزونه باهاش برخوردیم اینه که گاهی اوقات و همونطور که انتظار میره اکشن متد (AddAvatars) که وظیفه ذخیره عکس رو داره اول اجرا میشه و اکشن متد (Add) که وظیفه ذخیره اطلاعات رو داره دوم، ولی گاهی اوقات این ترتیب به هم میریزه و ابتدا اطلاعات ارسالی ذخیره میشه و بعد اکشن متد ذخیره عکس اجرا میشه.
سناریوی ما هم تا حدی شبیه به سناریویی هست که آقای احمدی مطرح کردند، ولی همونطور که گفتیم مشکل اصلی اینه که اکشن متدها هر بار با ترتیب‌های متفاوت فراخوانی میشن
<div class="container-fluid">
    @using (Ajax.BeginForm("Add", "Authors", new AjaxOptions { UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, HttpMethod = "POST" }, new { @class = "form-horizontal", id = "UploadFile" }))
    {
        @Html.AntiForgeryToken()
                
        <div class="control-group">
            <label class="control-label" for="AuhtorFirstNameAndLastName">نام نویسنده</label>
            <div class="controls">
                @Html.TextBoxFor(author => author.AuhtorFirstNameAndLastName, new { placeholder = "نام نویسنده" })
            </div>
            @Html.ValidationMessageFor(author => author.AuhtorFirstNameAndLastName)
        </div>
      
        <div class="control-group">
            <label class="control-label" for="Status">ارسال عکس</label>
            <div class="controls">
                <input type="file" name="avatarFile" id="avatarFile" />
            </div>
            <div>
                @*<input type="submit" name="btn-submit" value="ارسال" class="btn btn-success" />*@
                <img id="loading" alt="1" src="Images/loading83.gif" style="display: none;" />
            </div>
        </div>
       
        <div id="result"></div>
        <input type="submit" name="btn-submit" value="افزودن نویسنده" class="btn btn-success" />
        <input type="button" name="btn-colose" id="btn-close" value="انصراف" class="btn btn-danger" onclick="$dialog.dialog('close');" />
    }
</div>

<script type="text/javascript">
        $('#UploadFile').submit(function () {
            $("#loading").show();
            $.ajaxFileUpload({
                url: "@Url.Action("AddAvatar","Authors")",
                 secureuri: false,
                 fileElementId: 'avatarFile',
                 dataType: 'json',
                 data: {}, 
                 success: function (data, status) {
                     $("#loading").hide();
                 },
                 error: function (data, status, e) {
                     $("#loading").hide();
                 }
             });
         });
</script>
نظرات مطالب
نحوه استفاده از افزونه Firebug برای دیباگ برنامه‌های ASP.NET مبتنی بر jQuery
حداقل دو علت می‌تونه داشته باشه:
الف) تصاویر رو نمی‌تونه پیدا کنه، یا صفحه کش شده بیش از حد. قسمت «اجرای کدهای jQuery Ajax فوق، چه تغییری را در صفحه سبب می‌شوند؟» را بررسی کنید که چه آدرسی توسط کدهای جی‌کوئری در حال پردازش است.
همچنین کش شدن نتایج قبلی رو هم می‌شود غیرفعال کرد:
$.ajax({
  cache: false /* گاهی از اوقات خصوصا برای آی ایی نیاز است */
});
ب) چند وقت قبل در یکی از بحث‌های سایت دیدم که مورد زیر رعایت نشده بود و کدهای جی‌کوئری کار نمی‌کردند:
<script type="text/javascript">
        $(function () {
            // کدهای جی‌کوئری در اینجا 
        });
</script>
اجرای کدهای جی‌کوئری نیازی به DOM حاضر و آماده دارند که توسط متد document ready آن مانند کدهای فوق باید تدارک دیده شود. نیازی به این کد نخواهد بود اگر اسکریپت‌ها در آخر صفحه و پیش از بسته شدن تگ body اضافه بشن.
اشتراک‌ها
TypeScript 4.3 منتشر شد

Separate Write Types on Properties
override and the --noImplicitOverride Flag
Template String Type Improvements
ECMAScript #private Class Elements
ConstructorParameters Works on Abstract Classes
Contextual Narrowing for Generics
Always-Truthy Promise Checks
static Index Signatures
.tsbuildinfo Size Improvements
Lazier Calculations in --incremental and --watch Compilations
Import Statement Completions
Editor Support for @link Tags
Go-to-Definition on Non-JavaScript File Paths
Breaking Changes
What’s Next? 

TypeScript 4.3 منتشر شد
مطالب
نمایش بلادرنگ اعلامی به تمام کاربران در هنگام درج یک رکورد جدید
در ادامه می‌خواهیم اعلام عمومی نمایش افزوده شدن یک پیام جدید را بعد از ثبت رکوردی جدید، به تمامی کاربران متصل به سیستم ارسال کنیم. پیش نیاز مطلب جاری موارد زیر می‌باشند:
namespace ShowAlertSignalR.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public float Price { get; set; }
        public Category Category { get; set; }

    }

    public enum Category
    {
        [Display(Name = "دسته بندی اول")]
        Cat1,
        [Display(Name = "دسته بندی دوم")]
        Cat2,
        [Display(Name = "دسته بندی سوم")]
        Cat3
    }
}
در اینجا مدل ما شامل عنوان، توضیح، قیمت و یک enum برای دسته‌بندی یک محصول ساده می‌باشد.
کلاس context نیز به صورت زیر می‌باشد:
namespace ShowAlertSignalR.Models
{
    public class ProductDbContext : DbContext
    {
        public ProductDbContext() : base("productSample")
        {
            Database.Log = sql => Debug.Write(sql);
        }
        public DbSet<Product> Products { get; set; }
    }
}
همانطور که در ابتدا عنوان شد، می‌خواهیم بعد از ثبت یک رکورد جدید، پیامی عمومی به تمامی کاربران متصل به سایت نمایش داده شود. در کد زیر اکشن متد Create را مشاهده می‌کنید: 
[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(Product product)
        {
            if (ModelState.IsValid)
            {
                db.Products.Add(product);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(product);
        }
می‌توانیم از ViewBag برای اینکار استفاده کنیم؛ به طوریکه یک پارامتر از نوع bool برای متد Index تعریف کرده و سپس مقدار آن را درون این شیء ViewBag انتقال دهیم، این متغییر بیانگر حالتی است که آیا اطلاعات جدیدی برای نمایش وجود دارد یا خیر؟ بنابراین اکشن متد Index را به اینصورت تعریف می‌کنیم:
public ActionResult Index(bool notifyUsers = false)
        {
            ViewBag.NotifyUsers = notifyUsers;
            return View(db.Products.ToList());
        }
در اینجا مقدار پیش‌فرض این متغیر، false می‌باشد. یعنی اطلاعات جدیدی برای نمایش موجود نمی‌باشد. در نتیجه اکشن متد Create را به صورتی تغییر می‌دهیم که بعد از درج رکورد موردنظر و هدایت کاربر به صفحه‌ی Index، مقدار این متغییر به true تنظیم شود:
[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(Product product)
        {
            if (ModelState.IsValid)
            {
                db.Products.Add(product);
                db.SaveChanges();
                return RedirectToAction("Index", new { notifyUsers = true });
            }

            return View(product);
        }
قدم بعدی ایجاد یک هاب SignalR می‌باشد:
namespace ShowAlertSignalR.Hubs
{
    public class NotificationHub : Hub
    {
        public void SendNotification()
        {
            Clients.Others.ShowNotification();
        }
    }
}
در ادامه کدهای سمت کلاینت را برای هاب فوق، داخل ویوی Index اضافه می‌کنیم:
@section scripts
{
    
    <script src="~/Scripts/jquery.signalR-2.0.2.min.js"></script>
    <script src="~/signalr/hubs"></script>
    <script>

        var notify = $.connection.notificationHub;
        notify.client.showNotification = function() {
            $('#result').append("<div class='alert alert-info alert-dismissable'>" +
                "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>" +
            "رکورد جدیدی هم اکنون ثبت گردید، برای مشاهده آن صفحه را بروزرسانی کنید" + "</div>");
        };
        $.connection.hub.start().done(function() {
            @{
                if (ViewBag.NotifyUsers)
                {
                    <text>notify.server.sendNotification();</text>
                }
            }
        });
    </script>
}
همانطور که در کدهای فوق مشاهده می‌کنید، بعد از اینکه اتصال با موفقیت برقرار شد (درون متد done) شرط چک کردن متغییر NotifyUsers را بررسی کرده‌ایم. یعنی در این حالت اگر مقدار آن true بود، متد درون هاب را فراخوانی کرده‌ایم. در نهایت پیام به یک div با آی‌دی result اضافه شده است.
لازم به ذکر است برای حالت‌های حذف و به‌روزرسانی نیز روال کار به همین صورت می‌باشد.
سورس مثال جاری : ShowAlertSignalR.zip
مطالب
فایرفاکس 4 و غیرفعال کردن قابلیت تنظیم دستی اندازه جعبه‌های متنی آن

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


یکی از موارد جالب توجه آن منهای مورد فوق، امکان تغییر سایز TextArea در آن به صورت "سر خود" می‌باشد (همانند مرورگر کروم) :


برای غیرفعال کردن این قابلیت باید css سایت یا عنصر مورد نظر را به صورت ذیل تغییر داد:
<style type="text/css">
textarea {
resize:none;
}
</style>

مطالب
استفاده از Fluent Validation در برنامه‌های ASP.NET Core - قسمت سوم - اعتبارسنجی سمت کلاینت
FluentValidation یک کتابخانه‌ی اعتبارسنجی اطلاعات سمت سرور است و راهکاری را برای اعتبارسنجی‌های سمت کلاینت ارائه نمی‌دهد؛ اما می‌تواند متادیتای مورد نیاز unobtrusive java script validation را تولید کند و به این ترتیب بسیاری از قواعد آن دقیقا همانند روش‌های توکار اعتبارسنجی ASP.NET Core در سمت کلاینت نیز کار می‌کنند؛ مانند:
• NotNull/NotEmpty
• Matches (regex)
• InclusiveBetween (range)
• CreditCard
• Email
• EqualTo (cross-property equality comparison)
• MaxLength
• MinLength
• Length

اما باید دقت داشت که سایر قابلیت‌های این کتابخانه، قابلیت ترجمه‌ی به قواعد unobtrusive java script validation ندارند؛ مانند:
- استفاده‌ی از شرط‌ها توسط متدهای When و یا Unless (برای مثال اگر خاصیت A دارای مقدار 5 بود، آنگاه ورود اطلاعات خاصیت B باید اجباری شود)
- تعریف قواعد اعتبارسنجی سفارشی، برای مثال توسط متد Must
- تعریف RuleSetها (برای مثال تعیین کنید که از یک مدل، فقط تعدادی از خواص آن اعتبارسنجی شوند و نه تمام آن‌ها)

در یک چنین حالت‌هایی باید کاربر اطلاعات کامل فرم را به سمت سرور ارسال کند و در post-back صورت گرفته، نتایج اعتبارسنجی را دریافت کند.


روش توسعه‌ی اعتبارسنجی سمت کلاینت کتابخانه‌ی FluentValidation جهت سازگاری آن با  unobtrusive java script validation

باتوجه به اینکه قواعد سفارشی کتابخانه‌ی FluentValidation، معادل unobtrusive java script validation ای ندارند، در ادامه مثالی را جهت تدارک آن‌ها بررسی می‌کنیم. برای این منظور، معادل مطلب «ایجاد ویژگی‌های اعتبارسنجی سفارشی در ASP.NET Core 3.1 به همراه اعتبارسنجی سمت کلاینت آن‌ها» را بر اساس ویژگی‌های کتابخانه‌ی FluentValidation پیاده سازی می‌کنیم.

1) ایجاد اعتبارسنج سمت سرور

می‌خواهیم اگر مقدار عددی خاصیتی بیشتر از مقدار عددی خاصیت دیگری بود، اعتبارسنجی آن با شکست مواجه شود. به همین منظور با پیاده سازی یک PropertyValidator سفارشی، LowerThanValidator را به صورت زیر تعریف می‌کنیم:
using System;
using FluentValidation;
using FluentValidation.Validators;

namespace FluentValidationSample.Models
{
    public class LowerThanValidator : PropertyValidator
    {
        public string DependentProperty { get; set; }

        public LowerThanValidator(string dependentProperty) : base($"باید کمتر از {dependentProperty} باشد")
        {
            DependentProperty = dependentProperty;
        }

        protected override bool IsValid(PropertyValidatorContext context)
        {
            if (context.PropertyValue == null)
            {
                return false;
            }

            var typeInfo = context.Instance.GetType();
            var dependentPropertyValue =
                Convert.ToInt32(typeInfo.GetProperty(DependentProperty).GetValue(context.Instance, null));

            return int.Parse(context.PropertyValue.ToString()) < dependentPropertyValue;
        }
    }

    public static class CustomFluentValidationExtensions
    {
        public static IRuleBuilderOptions<T, int> LowerThan<T>(
            this IRuleBuilder<T, int> ruleBuilder, string dependentProperty)
        {
            return ruleBuilder.SetValidator(new LowerThanValidator(dependentProperty));
        }
    }
}
- در اینجا dependentProperty همان خاصیت دیگری است که باید مقایسه با آن صورت گیرد. در متد بازنویسی شده‌ی IsValid، می‌توان مقدار آن‌را از context.Instance استخراج کرده و سپس با مقدار جاری context.PropertyValue مقایسه کرد.
- همچنین جهت سهولت کار فراخوانی آن، یک متد الحاقی جدید به نام LowerThan نیز در اینجا تعریف شده‌است.
- البته اگر قصد اعتبارسنجی سمت سرور را ندارید، می‌توان در متد IsValid، مقدار true را بازگشت داد.


2) ایجاد متادیتای مورد نیاز جهت unobtrusive java script validation در سمت سرور

در ادامه نیاز است ویژگی‌های data-val خاص unobtrusive java script validation را توسط FluentValidation ایجاد کنیم:
using FluentValidation;
using FluentValidation.AspNetCore;
using FluentValidation.Internal;
using FluentValidation.Resources;
using FluentValidation.Validators;
using Microsoft.AspNetCore.Mvc.ModelBinding.Validation;

namespace FluentValidationSample.Models
{
    public class LowerThanClientValidator : ClientValidatorBase
    {
        private LowerThanValidator LowerThanValidator
        {
            get { return (LowerThanValidator)Validator; }
        }

        public LowerThanClientValidator(PropertyRule rule, IPropertyValidator validator) :
            base(rule, validator)
        {
        }

        public override void AddValidation(ClientModelValidationContext context)
        {
            MergeAttribute(context.Attributes, "data-val", "true");
            MergeAttribute(context.Attributes, "data-val-LowerThan", GetErrorMessage(context));
            MergeAttribute(context.Attributes, "data-val-LowerThan-dependentproperty", LowerThanValidator.DependentProperty);
        }

        private string GetErrorMessage(ClientModelValidationContext context)
        {
            var formatter = ValidatorOptions.MessageFormatterFactory().AppendPropertyName(Rule.GetDisplayName());
            string messageTemplate;
            try
            {
                messageTemplate = Validator.Options.ErrorMessageSource.GetString(null);
            }
            catch (FluentValidationMessageFormatException)
            {
                messageTemplate = ValidatorOptions.LanguageManager.GetStringForValidator<NotEmptyValidator>();
            }
            return formatter.BuildMessage(messageTemplate);
        }
    }
}
در این کدها، تنها قسمت مهم آن، متد AddValidation است که کار تعریف و افزودن متادیتاهای unobtrusive java script validation را انجام می‌دهد و برای مثال سبب رندر یک چنین تگ HTML ای می‌شود که در آن پیام اعتبارسنجی و خاصیت دیگر مدنظر ذکر شده‌اند:
<input dir="rtl" type="number"
 data-val="true"
 data-val-lowerthan="باید کمتر از Age باشد"
 data-val-lowerthan-dependentproperty="Age"
 data-val-required="'سابقه کار' must not be empty."
 id="Experience"
 name="Experience"
 value="">


3) تعریف مدل کاربران و اعتبارسنجی آن

مدلی که در این مثال از آن استفاده شده، یک چنین تعریفی را دارد و در قسمت اعتبارسنجی خاصیت Experience آن، از متد الحاقی جدید LowerThan استفاده شده‌است:
    public class UserModel
    {
        [Display(Name = "نام کاربری")]
        public string Username { get; set; }

        [Display(Name = "سن")]
        public int Age { get; set; }

        [Display(Name = "سابقه کار")]
        public int Experience { get; set; }
    }

    public class UserValidator : AbstractValidator<UserModel>
    {
        public UserValidator()
        {
            RuleFor(x => x.Username).NotNull();
            RuleFor(x => x.Age).NotNull();
            RuleFor(x => x.Experience).LowerThan(nameof(UserModel.Age)).NotNull();
        }
    }


4) افزودن اعتبارسنج‌های تعریف شده به تنظیمات برنامه

پس از تعریف LowerThanValidator و LowerThanClientValidator، روش افزودن آن‌ها به تنظیمات FluentValidation به صورت زیر است:
namespace FluentValidationSample.Web
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews().AddFluentValidation(
                fv =>
                {
                    fv.RegisterValidatorsFromAssembly(Assembly.GetExecutingAssembly());
                    fv.RegisterValidatorsFromAssemblyContaining<RegisterModelValidator>();
                    fv.RunDefaultMvcValidationAfterFluentValidationExecutes = false;

                    fv.ConfigureClientsideValidation(clientSideValidation =>
                    {
                        clientSideValidation.Add(
                            validatorType: typeof(LowerThanValidator),
                            factory: (context, rule, validator) => new LowerThanClientValidator(rule, validator));
                    });
                }
            );
        }


5) تعریف کدهای جاوا اسکریپتی مورد نیاز

پیش از هرکاری، اسکریپت‌های فایل layout برنامه باید چنین تعریفی را داشته باشند:
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
در اینجا مداخل jquery، سپس jquery.validate و بعد از آن jquery.validate.unobtrusive را مشاهده می‌کنید. در ادامه فایل js/site.js را به صورت زیر تکمیل خواهیم کرد:
$.validator.unobtrusive.adapters.add('LowerThan', ['dependentproperty'], function (options) {
    options.rules['LowerThan'] = {
        dependentproperty: options.params['dependentproperty']
    };
    options.messages['LowerThan'] = options.message;
});

$.validator.addMethod('LowerThan', function (value, element, parameters) {      
    var dependentProperty = '#' + parameters['dependentproperty'];
    var dependentControl = $(dependentProperty);
    if (dependentControl) {
        var targetvalue = dependentControl.val();
        if (parseInt(targetvalue) > parseInt(value)) {
            return true;
        }
        return false;
    }
    return true;
});
در اینجا یکبار اعتبارسنج LowerThan را به validator.unobtrusive معرفی می‌کنیم. سپس منطق پیاده سازی آن‌را که بر اساس یافتن مقدار خاصیت دیگر و مقایسه‌ی آن با مقدار خاصیت جاری است، به اعتبارسنج‌های jQuery Validator اضافه خواهیم کرد.


6) آزمایش برنامه

پس از این تنظیمات، اگر Viewما چنین تعریفی را داشته باشد:
@using FluentValidationSample.Models
@model UserModel
@{
    ViewData["Title"] = "Home Page";
}
<div dir="rtl">
    <form asp-controller="Home"
          asp-action="RegisterUser"
          method="post">
        <fieldset class="form-group">
        <legend>ثبت نام</legend>
            <div class="form-group row">
                <label asp-for="Username" class="col-md-2 col-form-label text-md-left"></label>
                <div class="col-md-10">
                    <input dir="rtl" asp-for="Username" class="form-control" />
                    <span asp-validation-for="Username" class="text-danger"></span>
                </div>
            </div>
            <div class="form-group row">
                <label asp-for="Age" class="col-md-2 col-form-label text-md-left"></label>
                <div class="col-md-10">
                    <input dir="rtl" asp-for="Age" class="form-control" />
                    <span asp-validation-for="Age" class="text-danger"></span>
                </div>
            </div>
            <div class="form-group row">
                <label asp-for="Experience" class="col-md-2 col-form-label text-md-left"></label>
                <div class="col-md-10">
                    <input dir="rtl" asp-for="Experience" class="form-control" />
                    <span asp-validation-for="Experience" class="text-danger"></span>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-md-2 col-form-label text-md-left"></label>
                <div class="col-md-10 text-md-right">
                    <button type="submit" class="btn btn-info col-md-2">ارسال</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>
در صورتیکه سابقه‌ی کار را بیشتر از سن وارد کنیم، به یک چنین خروجی سمت کلاینتی (بدون نیاز به post-back کامل به سمت سرور) خواهیم رسید: