مطالب
معرفی Selector های CSS - قسمت 7
61- :any-link
تمامی تگ‌هایی را انتخاب می‌کند که می‌توانند نقش لینک را در صفحه ایفا کنند. در واقع تگ‌های a، area و link را انتخاب می‌نماید که دارای ویژگی href هستند و به عنوان لینک عمل می‌کنند.
<style>
    :any-link {
        color: red;
    }
</style>
<a href="page1.htm">Link 1</a>
در مثال فوق، متن Link 1 به رنگ قرمز نمایش می‌یابد.
           Selector  نسخه CSS
No No
No
No No :any-link  4
62- :local-link
تمامی لینک هایی را انتخاب می‌کند که با آدرس صفحه‌ی جاری یکسان می‌باشند.
<style>
    :local-link {
        color: red;
    }
</style>
<a href="http://www.example.com/article/">Link 1</a>
<a href="http://www.example.com/article">Link 2</a>
<a href="http://www.example.com/article/">Link 3</a>
<a href="http://www.example.com/article/12">Link 4</a>
با فرض اینکه آدرس صفحه‌ی جاری http://www.example.com/article/   می باشد مثال فوق را بررسی می‌کنیم. متن Link 1 و Link3 به رنگ قرمز نمایش می‌یابند، زیرا مشابه آدرس صفحه‌ی جاری می‌باشند.
           Selector  نسخه CSS
No No
No
No No :local-link  4 
63- :local-link(n)
تمامی لینک هایی را انتخاب می‌کند که آدرس آنها با آدرس صفحه‌ی جاری یکسان بوده و n بخش از آدرس آنها با بخش‌های آدرس جاری یکسان باشند. در واقع n، تعداد بخش هایی از آدرس لینک را مشخص می‌کند که با بخش‌های آدرس صفحه‌ی جاری مطابقت داشته باشند. در مطابقت آدرس، از scheme، username، password، port، query string و fragment صرف نظر می‌شود تا یکسان بودن آدرس را تشخیص دهد. سپس تشخیص می‌دهد کدام بخش‌های آدرس با هم یکسان می‌باشند. جهت اطلاع باید عرض کنم که شکل کامل یک آدرس به صورت scheme:[//[user:password@]host[:port]][/]path[?querystring][#fragment] می‌باشد.
<style>
    :local-link {
        color: red;
    }
    :local-link(0) {
        text-decoration: none;
    }
    :local-link(1) {
        text-decoration: overline;
    }
    :local-link(2) {
        background: blue;
    }
</style>
<a href="http://www.example.com">Link 1</a>
<a href="http://www.example.com/2016">Link 2</a>
<a href="http://www.example.com/2016/01">Link 3</a>
<a href="http://www.example.com/2016/01/">Link 4</a>
<a href="http://www.example.com/2016/01/02">Link 5</a>
<a href="https://www.example.com/2016/01/">Link 6</a>
<a href="http://example.com/2016/01">Link 7</a>
با فرض اینکه آدرس صفحه‌ی جاری http://www.example.com/2016/01/ می باشد مثال فوق را بررسی میکنیم. Link 1 تحت تاثیر Selector دوم، بدون زیرخط نمایش می‌یابد. Link 2 تحت تاثیر Selector دوم و سوم، بدون زیرخط و با روخط نمایش می‌یابد. Link 3، Link 5 و Link 6 تحت تاثیر Selector دوم و سوم و چهارم، بدون زیرخط، با روخط و پس زمینه‌ی آبی نمایش می‌یابند. Link 6 به دلیل استفاده از https نمی‌تواند تحت تاثیر Selector اول قرار بگیرد. Link 4 تحت تاثیر Selector اول و دوم و سوم و چهارم، به رنگ قرمز، بدون زیرخط، با روخط و پس زمینه‌ی آبی نمایش می‌یابد. Link 7 هم بدون تاثیر هیچ Selector ی بر روی آن، بدون قالب باقی می‌ماند، زیرا قسمت host لینک با آدرس مطابقت ندارد.
           Selector  نسخه CSS
No No
No
No No :local-link(n)  4
64- :active-drop-target
تگی را انتخاب می‌کند که در حال حاضر به عنوان مقصد یک تگ drag (کشیده) شده در نظر گرفته شده است. به عبارت دیگر، تگی را با عمل drag کشیده ایم و بر روی یک تگ مقصد قرار داده ایم، ولی هنوز عمل drop یا رها کردن صورت نگرفته است.
              Selector  نسخه CSS
No No
No
No No :active-drop-target   4 
65- :valid-drop-target
تگی را انتخاب می‌کند که در حال حاضر به عنوان مقصد یک تگ drag (کشیده) شده در نظر گرفته شده است و برای عمل drop معتبر می‌باشد. به عبارت دیگر، تگ مقصد امکان پذیرش یک تگ را با عمل Drag & Drop دارد.
              Selector  نسخه CSS
No No
No
No No :valid-drop-target   4 
66- :invalid-drop-target
تگی را انتخاب می‌کند که در حال حاضر به عنوان مقصد یک تگ drag (کشیده) شده در نظر گرفته شده است و برای عمل drop معتبر نمی‌باشد. به عبارت دیگر، تگ مقصد امکان پذیرش یک تگ را با عمل Drag & Drop ندارد.
              Selector  نسخه CSS
No No
No
No No :invalid-drop-target   4 
<style>
    :active-drop-target {
        background: blue;
    }
    :valid-drop-target {
        border: 1px solid green;
    }
    :invalid-drop-target {
        border: 1px solid red;
    }
    .container {
        width: 200px;
        height: 200px;
    }
</style>
<div class="container"></div>
<img src="image.jpg" draggable="true"/>
در مثال فوق، با Drag نمودن تصویر بر روی تگ div، تحت تاثیر Selector اول، رنگ پس زمینه‌ی div آبی می‌شود. اگر امکان پذیرش img توسط تگ div وجود داشته باشد، کادری سبز رنگ دور تگ div نمایش می‌یابد در غیر اینصورت کادر قرمز رنگ دور آن نمایش خواهد یافت.
67- :current
تگی را انتخاب می‌کند که در حال حاضر در حال نمایش یا ارائه می‌باشد. این Selector در زمان پردازش صوت، تصویر، نمایش زیر نویس و غیره در تگ canvas مورد استفاده قرار می‌گیرد.
              Selector  نسخه CSS
No No
No
No No :current   4 
68- :past
تگی را انتخاب می‌کند که قبل از :current نمایش یافته است.
              Selector  نسخه CSS
No No
No
No No :past   4 
69- :future
تگی را انتخاب می‌کند که بعد از :current نمایش یافته است.
              Selector  نسخه CSS
No No
No
No No :future   4 
هر سه Selector فوق می‌توانند با دریافت آرگومان به صورت مجموعه ای از Selector ها، تگ‌های خاصی را انتخاب کنند یا نتیجه‌ی انتخاب را محدود نمایند. اگر بدون آرگومان به کار روند، تک مورد نظر را بدون در نظر گرفتن محدویت انتخاب می‌نمایند.
<style>
    :past(div,p) {
        background: red;
    }
    :current(div,p) {
        background: green;
    }
    :future(div,p) {
        background: yellow;
    }
</style>
در مثال فوق، تگ‌های div یا p که در حال حاضر در حال نمایش می‌باشند، با پس زمینه‌ی سبز، تگی که قبل از :current نمایش یافته است با پس زمینه‌ی قرمز و تگی که بعد از :current نمایش خواهد یافت با پس زمینه‌ی زرد نمایش می‌یابد.
70- :placeholder-shown
تمامی تگ‌های input و textarea را انتخاب می‌کند که در حال نمایش یا حاوی placeholder می‌باشند و هنوز متنی در آنها وارد نشده است. در حال حاضر به صورت آزمایشی و با vendor prefix قابل استفاده است.
<style>
    :placeholder-shown {
        color: gray;
    }
</style>
<input placeholder="Enter Username"/>
<input placeholder="Enter Password"/>
در مثال فوق، اگر در هر کدام از تگ‌های input، هیچ متنی وارد نشده باشد، متن‌های Enter Username و Enter Password به رنگ طوسی نمایش می‌یابند.
              Selector  نسخه CSS
-webkit- -wekit-
-ms-
-moz- -webkit- :placeholder-shown   4 















مطالب
روش کار با فایل‌های ایستا در برنامه‌های React
روش ذکر فایل‌های ایستا در کامپوننت‌های جاوا اسکریپتی برنامه‌های React

React، برای مدیریت پروژه‌ی خود، از Webpack استفاده می‌کند و در این حالت، کار با فایل‌های ایستا مانند تصاویر و قلم‌های وب، شبیه به کار با فایل‌های CSS خواهد بود؛ یعنی این نوع فایل‌ها را باید در فایل‌های جاوا اسکریپتی برنامه، import کرد. به این ترتیب Webpack کار یکی سازی این فایل‌ها را با bundle نهایی تولید شده، انجام می‌دهد.

یک مثال: فرض کنید فایل button.css به صورت زیر تعریف شده‌است:
.Button {
    padding: 20px;
}

برای استفاده‌ی از این فایل css در یک کامپوننت، ابتدا آن‌را import کرده و سپس از classNameهای تعریف شده‌ی در آن استفاده می‌کنیم:
import React, { Component } from 'react';
import './Button.css'; 

class Button extends Component {
  render() {
    return <div className="Button" />;
  }
}
در حالت توسعه، با هر تغییری در این فایل css، بارگذاری مجدد برنامه به صورت خودکار صورت گرفته و نتیجه‌ی نهایی رندر خواهد شد. در حالت نهایی ارائه‌ی برنامه، تمام فایل‌های css، با هم یکی شده و نگارش minified آن‌ها، به bundle نهایی برنامه اضافه می‌شوند. توصیه شده‌است یک فایل css را در چندین کامپوننت برنامه import نکنید. بهتر است یک کامپوننت دکمه را ایجاد کنید که فایل css مشخصی را import می‌کند و سپس از آن کامپوننت در قسمت‌های مختلف برنامه استفاده کنید.

البته برخلاف حالت کار با CSS imports، با import یک فایل ایستا، یک رشته در اختیار ما قرار می‌گیرد که از آن می‌توان در کدهای خود استفاده کرد. برای کاهش تعداد رفت و برگشت‌های به سرور، اگر فایل‌های تصویری با فرمت‌های bmp, gif, jpg, jpeg و  png، کمتر از 10,000 بایت باشند، از data URI آن‌ها بجای مسیر نهایی استفاده خواهد شد. این مورد شامل فایل‌های svg نمی‌شود.

یک مثال:
import React from 'react';
import logo from './logo.svg'; 

console.log(logo);

function Header() {
  return <img src={logo} alt="Logo" />;
}

export default Header;
در اینجا ابتدا یک فایل تصویری، import شده‌است. سپس می‌توان از رشته‌ی متناظر با آن، به عنوان src المان تصویر استفاده کرد.

این مورد برای تصاویر ذکر شده‌ی در فایل‌های CSS نیز صادق است:
.Logo {
    background-image: url(./logo.png);
}
Webpack در فایل‌های CSS به دنبال مسیرهای فایل‌های ثابت شروع شده‌ی با /. می‌گردد و مسیرهای این نوع فایل‌ها را با مسیر نهایی ارائه‌ی برنامه، به صورت خودکار جایگزین و اصلاح می‌کند. همچنین نیازی هم به نگرانی در مورد کش شدن این فایل‌های ثابت وجود ندارد؛ چون webpack از نام‌های خاصی به همراه hash این نوع فایل‌ها، برای جایگزینی نهایی استفاده خواهد کرد و اگر محتوای فایل‌های ثابت تغییر کنند، این هش نیز تغییر کره و مرورگر نگارش جدید آن‌ها را دریافت می‌کند. مزیت دیگر کار با webpack، ارائه‌ی خطاهای زمان کامپایل برنامه است. برای مثال اگر فایل‌های ثابت مورد استفاده‌ی در برنامه به درستی مسیر دهی نشده باشند، یک خطای زمان کامپایل صادر می‌شود.

یک مثال: فرض کنید در برنامه‌ی ASP.NET Core خود که با React یکی شده‌است، فایل project_folder/ClientApp/src/images/progress_bar.gif را قرار داده‌اید. روش import آن با توجه به مسیرهای نسبی برنامه به صورت زیر است:
import progressBar from '../images/progress_bar.gif';
و روش فراخوانی آن در کدهای یک کامپوننت به نحو زیر خواهد بود:
<img alt="loading..." src={progressBar} />


روش ذکر فایل‌های ایستا در کامپوننت‌های تایپ اسکریپتی برنامه‌های React

اگر از تایپ‌اسکریپت استفاده می‌کنید، چنین importهایی سبب بروز خطای «'Cannot find module './logo.png» می‌شوند. برای رفع این مشکل، فایلی را به نام assets.d.ts به پروژه‌ی خود اضافه کرده و آن‌را به صورت زیر تکمیل کنید:
declare module "*.gif";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.png";
declare module "*.svg";
به این ترتیب پسوند‌های فایل‌های مختلف ایستا، به عنوان فرمت‌های مجاز ماژول‌ها، قابل استفاده می‌شوند.


نحوه‌ی پردازش پوشه‌ی ویژه‌ی public در برنامه‌های React

اگر فایلی در پوشه‌ی ویژه‌ی public برنامه‌های react قرار گیرد، توسط webpack پردازش نخواهد شد. در این حالت این نوع فایل‌ها بدون هیچ نوع تغییری به پوشه‌ی build نهایی کپی می‌شوند. بنابراین برای کار با فایل‌های ایستای قرار گرفته‌ی در پوشه‌ی public باید از متغیر خاصی به نام PUBLIC_URL استفاده کرد. برای مثال درون فایل index.html، چنین تعریفی را می‌توان مشاهده کرد:
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
اگر نیاز به استفاده‌ی از فایلی درون پوشه‌ی src و یا node_modules دارید، باید آن‌ها را به این پوشه کپی کنید تا جزئی از پروسه‌ی build شوند. متغیر PUBLIC_URL در زمان اجرای دستور npm run build، با مسیر صحیحی جایگزین خواهد شد.
برای دسترسی به این مسیر در کامپوننت‌های برنامه نیز می‌توان از متغیر محیطی process.env.PUBLIC_URL استفاده کرد:
render() {
    return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}
البته روش توصیه شده، همان ذکر importهای فایل‌های ایستا است و بهتر است از این متغیر محیطی زیاد استفاده نکنید؛ چون پردازش ثانویه‌ای بر روی آن‌ها صورت نمی‌گیرد و یا minified نمی‌شوند. نبود آن‌ها سبب بروز خطای زمان کامپایل نخواهد شد و همچنین هیچ hash ای به نام نهایی آن‌ها به صورت خودکار اضافه نمی‌گردد که ممکن است سبب بروز مشکلات کش شدن طولانی مدت این فایل‌های ایستا شود.

بنابراین اکنون این سؤال مطرح می‌شود که چه زمانی بهتر است از پوشه‌ی public استفاده شود؟
- اگر می‌خواهید نام فایل نهایی ایستای مدنظر مانند manifest.json، بدون تغییر باقی بماند.
- هزاران فایل ایستا را دارید و می‌خواهید این مسیرها را به صورت پویا در برنامه فراخوانی کنید (و قرار نیست جزئی از bundle نهایی شوند).
- می‌خواهید فایل‌های js خاصی را خارج از سیستم bundle اصلی قرار دهید؛ چون به هر دلیلی این نوع فایل‌ها با سیستم webpack سازگاری ندارند و نباید توسط آن پردازش شوند. در این حالت باید این نوع فایل‌ها را با تگ script به فایل index.html به صورت دستی معرفی کنید.
مطالب
نمایش خطاهای اعتبارسنجی سمت کاربر ASP.NET MVC به شکل Popover به کمک Twitter bootstrap
این مطلب در ادامه بحث «اعمال کلاس‌های ویژه اعتبارسنجی Twitter bootstrap به فرم‌های ASP.NET MVC» می‌باشد. بنابراین تعاریف مدل و کنترلر آن، به همراه توضیحات ذکر شده در آن، در ادامه مورد استفاده قرار خواهند گرفت.


اصول نمایش Popover در Twitter bootstrap

PopOverها نیز یکی دیگر از کامپوننت‌های جاوا اسکریپتی مجموعه بوت استرپ هستند. بسیار شبیه به Tooltip بوده، اما ماندگارتر هستند. PopOverها با کلیک بر روی یک عنصر باز شده و تنها با کلیک مجدد بر روی آن المان، بسته می‌شوند (البته این موارد نیز قابل تنظیم هستند).
<a rel="popover" 
               data-content="محتوایی برای نمایش" 
               data-original-title="عنوان" href="#">اطلاعات</a>

    <script type="text/javascript">
        $(document).ready(function () {
            $("[rel='popover']").popover({ placement: 'left' })
                            .click(function (e) { e.preventDefault(); });
        });
   </script>
نحوه استفاده از آن را در مثال فوق مشاهده می‌کنید. در اینجا یک لینک با rel=popover تعریف شده است. از این rel، در یافتن کلیه المان‌هایی اینگونه، توسط jQuery استفاده خواهیم کرد. سپس مقدار ویژگی data-content، محتوای اطلاعاتی را که باید نمایش داده شود، مشخص می‌کند. همچنین برای مشخص ساختن عنوان آن می‌توان از ویژگی data-original-title استفاده کرد. نهایتا نیاز است افزونه popover بر روی المان‌هایی با rel=popover فراخوانی گردد. در روال رخدادگردان click آن، با استفاده از e.preventDefault، سبب خواهیم شد تا با کلیک بر روی لینک تعریف شده، صفحه مجددا بازیابی نشده و مکان اسکرول عمودی صفحه، تغییر نکند.


تبدیل خطاهای اعتبارسنجی ASP.NET MVC به PopOver

هدف ما در اینجا نهایتا رسیدن به شکل زیر می‌باشد:

همانطور که ملاحظه می‌کنید، اینبار بجای نمایش خطاها در یک برچسب، مقابل کنترل متناظر، این خطا صرفا در حالت فوکوس کنترل، به شکل یک PopOver در کنار آن ظاهر شده است.


کدهای کامل View برنامه

@model Mvc4TwitterBootStrapTest.Models.User
@{
    ViewBag.Title = "Index";
}
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true, null, new { @class = "alert alert-error alert-block" })

    <fieldset class="form-horizontal">
        <legend>تعریف کاربر جدید</legend>
        <div class="control-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label" })
            <div class="controls">
                @Html.EditorFor(model => model.Name)
                @*@Html.ValidationMessageFor(model => model.Name, null, new { @class = "help-inline" })*@
            </div>
        </div>
        <div class="control-group">
            @Html.LabelFor(model => model.LastName, new { @class = "control-label" })
            <div class="controls">
                @Html.EditorFor(model => model.LastName)
                @*@Html.ValidationMessageFor(model => model.LastName, null, new { @class = "help-inline" })*@
            </div>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                ارسال</button>
        </div>
    </fieldset>
}
@section JavaScript
{
    <script type="text/javascript">
        $.validator.setDefaults({
            showErrors: function (errorMap, errorList) {
                this.defaultShowErrors();
                //اگر المانی معتبر است نیاز به نمایش پاپ اور ندارد
                $("." + this.settings.validClass).popover("destroy");
                //افزودن پاپ اورها
                for (var i = 0; i < errorList.length; i++) {
                    var error = errorList[i];
                    $(error.element).popover({ placement: 'left' })
                                    .attr("data-original-title", "خطای اعتبارسنجی")
                                    .attr("data-content", error.message);
                }
            },
            // همانند قبل برای رنگی کردن کل ردیف در صورت عدم اعتبار سنجی و برعکس
            highlight: function (element, errorClass, validClass) {
                if (element.type === 'radio') {
                    this.findByName(element.name).addClass(errorClass).removeClass(validClass);
                } else {
                    $(element).addClass(errorClass).removeClass(validClass);
                    $(element).closest('.control-group').removeClass('success').addClass('error');
                }
                $(element).trigger('highlited');
            },
            unhighlight: function (element, errorClass, validClass) {
                if (element.type === 'radio') {
                    this.findByName(element.name).removeClass(errorClass).addClass(validClass);
                } else {
                    $(element).removeClass(errorClass).addClass(validClass);
                    $(element).closest('.control-group').removeClass('error').addClass('success');
                }
                $(element).trigger('unhighlited');
            }
        });
        //برای حالت پست بک از سرور عمل می‌کند
        $(function () {
            $('form').each(function () {
                $(this).find('div.control-group').each(function () {
                    if ($(this).find('span.field-validation-error').length > 0) {
                        $(this).addClass('error');
                    }
                });
            });
        });
   </script>
}
کدهای مدل و کنترلر، همانند مطلب «اعمال کلاس‌های ویژه اعتبارسنجی Twitter bootstrap به فرم‌های ASP.NET MVC» می‌باشند و از تکرار مجدد آن‌ها در اینجا صرفنظر گردید.

توضیحات
- با توجه به اینکه دیگر نمی‌خواهیم خطاها به صورت برچسب در مقابل کنترل‌ها نمایش داده شوند، کلیه Html.ValidationMessageFor به صورت کامنت درآورده شده‌اند.
- تغییر دوم مطلب جاری، اضافه شدن متد showErrors به تنظیمات پیش فرض jQuery Validator است. در این متد، اگر المانی معتبر بود، Popover آن حذف می‌شود یا در سایر حالات، المان‌هایی که نیاز به اعتبارسنجی سمت کلاینت دارند، یافت شده و سپس ویژگی data-content با مقداری معادل خطای اعتبارسنجی متناظر، به این المان افزوده و سپس متد popover بوت استرپ بر روی آن فراخوانی می‌گردد.
به عبارتی زمانیکه یک input box در ASP.NET MVC به همراه مقادیر مرتبط با اعتبارسنجی آن رندر می‌شود، چنین شکلی را خواهد داشت:
<input class="text-box single-line" data-val="true" data-val-required="لطفا نام را تکمیل کنید"
 id="Name" name="Name" type="text" value="" />
اما در اینجا به صورت پویا، data-original-title و data-content نیز به آن افزوده می‌گردند:
<input class="text-box single-line input-validation-error" data-val="true" data-val-required="لطفا نام را تکمیل کنید"
 id="Name" name="Name" type="text" value="" 
data-original-title="خطای اعتبارسنجی" title="" data-content="لطفا نام را تکمیل کنید">
این مقادیر توسط افزونه popover بوت استرپ شناسایی شده و مورد استفاده قرار می‌گیرد.
البته این موارد را در صورت نیاز به صورت دستی نیز می‌توان تعریف و اضافه کرد:
 @Html.TextBoxFor(x => x.Name, 
         new { data_content = "Name is required", 
               data_original_title = "Error", rel="popover" })
نظرات مطالب
ASP.NET MVC #12
سلام آقای نصیری خسته نباشید
یه سوال از خدمتتون داشتم اونم اینکه اگر توی پروژه جایی نیاز باشه که ما اطلاعات یک فیلد رو از دیتابیس بخونیم و توی یک DropDownList نمایش بدیم، وقتی که میخوایم Value این DropDownList رو سمت کنترلر بفرستیم باید چیکار کنیم؟ منظورم اینه که فرض کنید در جدولی قرار است Username کاربران به عنوان فیلدی ذخیره شود و نام تمامی کاربران را در DropDownList نمایش داده و برای هر کدام Username را به عنوان Value به DropDownList بایند میکنیم. حال مطابق با متد Srongly Type View برای متد Create در کنترلر یک View  ایجاد میکنیم. همون طور که میدونید Razor به صورت پیش فرض برای فیلد Username یک EditorFor قرار میده. در صورتی که ما میخوایم یک DropDownList به کاربر نشون بدیم که به راحتی بتونه کاربر مورد نظرش رو انتخاب کنه. حالا چجوری میشه این Username که Value این DropDownList هست رو در موقع کلیک بر روی دکمه ذخیره به سمت کنترلر فرستاد؟ در واقع من نمیدونم اصلا میشه Value رو از FormCollection گرفت یا نه ؟ امیدوارم منظورمو خوب بیان کرده باشم
و یه سوال دیگه اینکه در موقع ویرایش چجوری میشه Vaule ای که در جدول Insert شده رو به این DropDownList بایند کرد جوری که از بین کل مقدارهای بایند شده این Value خاص انتخاب شده باشد؟
بازخوردهای دوره
افزونه‌ای برای کپسوله سازی نکات ارسال یک فرم ASP.NET MVC به سرور توسط jQuery Ajax
با سلام.
اطلاعات کنترلر من بصورت زیر است:
using MvcApplication3.Models;
...

namespace MvcApplication3.Controllers
{
    public class StudentController : Controller
    {
        public ActionResult Index()
        {
            //var data = new StudentsList();
            return View();
        }
        public ActionResult DataList()
        {
            var data = new StudentsList();
            return PartialView("Pv_DataList", data);
        }

        #region Edit 

        [HttpGet]
        public ActionResult Edit(int? id)
        {
            var data = new StudentsList().FirstOrDefault(p => p.Id == id);
            return PartialView("Pv_Edit", data);
        }
        [HttpPost]
        [AjaxOnly]
        [ValidateAntiForgeryToken]
        public ActionResult Edit(StudentModel model)
        { 
            Thread.Sleep(1000);
            if (this.ModelState.IsValid)
            {
                return Json("ok", JsonRequestBehavior.AllowGet);
            }
            return Json("error");
        }
        
        #endregion
    }
}
اطلاعات ویو :
@using MvcApplication3.Models
@{
    ViewBag.Title = "Student Index";
}
<style>
    #div_StudentEditDialogContainer {
        padding: 15px;
        background-color: silver;
        border: 1px solid gray;
        -webkit-border-radius: pxpx;
        -moz-border-radius: pxpx;
        border-radius: 10px;
        display: none;
        position: absolute;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
        box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
</style>
<h2>Student Index</h2>
<div id="div_StudentListViewContainer">
    @{ Html.RenderAction("DataList", "Student");}
</div>
<div id="div_StudentEditDialogContainer">
    @{ Html.RenderAction("Edit", "Student");}
</div>
<div id="div_StudentAddDialogContainer">
</div>
<div id="div_StudentRemoveDialogContainer">
</div>
<div id="div_StudentSearchDialogContainer">
</div>

@section JavaScript{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#div_StudentListViewContainer table input[type='submit']").click(function (e) {
                //show edit dialog
                e.preventDefault();
                var id = $(this).parent().parent().attr('data-studentid');
                var url = '@Url.Action("Edit", "Student")';
                $.ajax({
                    type: "GET",
                    url: url,
                    data: { id: id },
                    beforeSend: function () {
                        //$(waitingPanel).css("display", "block");
                    },
                    success: function (html) {
                        if (html == "nodata") {
                            $("#div_StudentEditDialogContainer").html("دانشجویی با این مشخصات یافت نشد!");
                        } else {
                            $("#div_StudentEditDialogContainer").css("display", "block");
                            $("#div_StudentEditDialogContainer").html("").append(html);
                        }
                    },
                    complete: function () {
                        //$(waitingPanel).css("display", "none");
                    }
                });
            });
        });
    </script>
}

و یک دیالوگ برای ویرایش را بصورت داینامیک در صفحه ظاهر میکنم، اما اعتبارسنجی سمت کاربر برای آن کار نمیکند:
@using MvcApplication3.Models
@model StudentModel
@{
    var postUrl = Url.Action(actionName: "Edit", controllerName: "Student");
}

@using (Html.BeginForm(actionName: "Edit", controllerName: "Student",
                       method: FormMethod.Post,
                       htmlAttributes: new { id = "frm_studentEdit" }))
{
    @Html.ValidationSummary(true)
    @Html.AntiForgeryToken()
    
    <div class="editor-label">
        @Html.LabelFor(model => model.Id)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Id)
        @Html.ValidationMessageFor(model => model.Id)
    </div>

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

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

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

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

    <p>
        <input type="submit" id="btn_Save" value="ذخیره" />
        <input type="submit" id="btn_Cancel" value="انصراف" />
    </p>
}

<script type="text/javascript">
    $(function () {
        $("#btn_Save").click(function (e) {
            e.preventDefault();
            var button = $(this);
            $("#frm_studentEdit").PostMvcFormAjax({
                postUrl: '@postUrl',
                loginUrl: '/login',
                beforePostHandler: function () {
                    //غیرفعال سازی دکمه ارسال
                    button.attr('disabled', 'disabled');
                    button.val("...");
                },
                completeHandler: function (data) {
                    //فعال سازی مجدد دکمه ارسال
                    button.removeAttr('disabled');
                    button.val("ذخیره");
                },
                errorHandler: function () {
                    alert('خطایی رخ داده است');
                }
            });
        });
        $("#btn_Cancel").click(function (e) {
            e.preventDefault();
            var button = $(this);
            $(".editDialog").parent("div").css("display", "none");
        });
    });
</script>
با تشکر.
اشتراک‌ها
گردهمایی‌های مجازی توسعه دهنده‌ها

Virtual Events for Developers

While in-person conferences and events may be cancelled, there are still many online opportunities for you to stay connected. Browse the full list of virtual events to continue to grow your skills as a developer, contribute to interesting projects, and meet like-minded developers around the world.
 

گردهمایی‌های مجازی توسعه دهنده‌ها
اشتراک‌ها
لیستی از APIهای جدید NET Core 3.0.

.NET Core 3.0 is representing a major step for the .NET community. It is interesting to analyze what’s new in the API directly from the compiled bits. In this post I will first explain how to diff .NET Core 3.0 against .NET Core 2.2 with NDepend, and then how to browse diff results. 

لیستی از APIهای جدید NET Core 3.0.
مطالب
توسعه برنامه‌های Cross Platform با Xamarin Forms & Bit Framework - قسمت دوازدهم
در این قسمت قصد داریم به بررسی چند زبانه سازی برنامه‌ها بپردازیم. برای چند زبانه کردن یک برنامه باید حداقل به موارد زیر توجه شود:
1- بحث Right to left و Left to right در صورتیکه زبان هایی که قصد پشتیبانی از آن‌ها را داریم، از هر دو مدل باشند.
2- بحث string‌های استفاده شده در View (مثلا Text یک Button) و View Model (مثل متن هشدار Alert Dialog)
3- بحث تقویم شمسی، قمری و میلادی در صورت لزوم.

همه کنترل‌ها در Xamarin Forms دارای Property ای با نام FlowDirection هستند که مقادیر RightToLeft، LeftToRight و MatchParent را می‌پذیرد. MatchParent که مقدار پیش فرض است، به این معنی است که مثلا اگر در ContentPage، مقدار FlowDirection را RightToLeft دهیم، تمامی کنترل‌های داخل آن صفحه RightToLeft باشند و بالعکس.
برای اطلاعات بیشتر، به مستندات مربوطه مراجعه کنید.

برای string هایی که ممکن است در View یا View Model استفاده شوند، از فایل‌های resx استفاده می‌کنیم. در پروژه XamApp، یک فولدر بسازید با نام Resources و در آن فولدر، یک فایل از نوع Resources file را اضافه کنید با نام Strings.resx

مجددا یک Resources file را با نام Strings.fa.resx و یکی دیگر را با نام Strings.en.resx اضافه کنید. برای درک بهتر وضعیت نهایی، پروژه XamApp را Clone/Pull کنید و آن را بررسی کنید.

در فایل Strings.resx یک ردیف جدید اضافه کنید که Name آن برابر با HelloWorld باشد و Value آن خالی است. این نام، در کد نویسی ما استفاده می‌شود و مثلا نباید شامل Space، علامت ! و ... باشد. در فایل Strings.fa.resx یک ردیف جدید اضافه کنید که Name آن برابر با همان HelloWorld باشد و Value آن برابر با سلام دنیا! در نهایت در فایل Strings.en.resx یک ردیف جدید را اضافه کنید که Name آن HelloWorld بوده و Value آن ! Hello world باشد.

سپس در فایل App.xaml.cs می‌توانید قبل از اولین NavigationService.NavigateAsync، از کد زیر را استفاده کنید:

 
Strings.Culture = CultureInfo.CurrentUICulture = new CultureInfo("en"); // or new CultureInfo("fa");

برای نمایش پیام در View Model با استفاده از IUserDialogs نیز می‌توانید به شکل زیر عمل کنید:

await UserDialogs.AlertAsync(message: Strings.HelloWorld);

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

 Name  En Value  Fa Value
 ButtonTappedCount   Button tapped {0} times!   دکمه {0} کلیک شده است 
سپس در Xaml داریم: (مثال در فایل HelloWorldMultiLanguageView.xaml قرار دارد)
<Label Text="{Binding StepsCount, StringFormat={x:Static resx:Strings.ButtonTappedCount}}" />
که باعث نمایش چنین چیزی می‌شود: "دکمه 7 بار کلیک شده است!" 
namespace مربوطه یعنی resx هم در بالای فایل Xaml باید قرار داده شود، که می‌شود:
xmlns:resx="clr-namespace:XamApp.Resources"
و در CSharp داریم:
await UserDialogs.AlertAsync(string.Format(Strings.ButtonTappedCount, StepsCount));
یکی از کتابخانه‌های خوب در این زمینه، Humanizer است. فرض کنید می‌خواهید string هایی چون "آخرین ورود: بیست ساعت پیش" و ... را بسازید. این کتابخانه فوق العاده در این زمینه به شما کمک می‌کند که استفاده از آن را شدیدا توصیه می‌کنم.
برای داشتن تقویم شمسی، میلادی و هجری نیز می‌توانید از Bit Date Picker استفاده کنید که توضیح نحوه استفاده از آن در این پست آورده شده است.
نظرات مطالب
امکان استفاده‌ی مستقیم از کتابخانه‌های Full .NET Framework در NET Core 2.0.
در شاخه پروژه net core 2 (پروژه وب asp.net core) یک پوشه به نام DLL وجود دارد و LC.dll خارجی (تولید شده با Full .Net FrameWork) را در آن قرار دادم. dll را به پروژه اضافه (add reference) می‌کنم.
<ItemGroup>
    <Reference Include="LC">
      <HintPath>DLL\LC.dll</HintPath>
    </Reference>
</ItemGroup>
 در زمان بیلد مشکلی وجود ندارد ولی در زمان اجرا با خطای پیدا نکردن dll مواجه می‌شوم.
System.IO.FileNotFoundException: 'Could not load file or assembly 'LC, Version=1.0.0.0, Culture=neutral, .PublicKeyToken=null'. The system cannot find the file specified.'
برای امتحان dll هایی با .net standard  هم تولید کردم و به صورت بالا به پروژه اضافه کردم ولی باز هم همین خطا را دریافت کردم. این در صورتی است که اگر در هر دو حالت بالا (Standard , Full .Net FrameWork) به پروژه اصلی، reference را به صورت پروژه‌ای (ProjectReference) اضافه کنیم هیچ مشکلی وجود ندارد.

بروزرسانی (حل مشکل):

باید Copy to Output Drirectory فایل‌های dll مورد استفاده true باشد. البته این حالت را در شرایط بالا قرار داده تست کرده بودم ولی مشکل همچنان پابرجا بود؛ ولی به عنوان نکته می‌توان در نظر گرفت.
<ItemGroup>
    <None Update="DLL\LC.dll">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </None>
</ItemGroup>

نکته اصلی که مشکل را حل کرد حذف فیزیکی پوشه‌های bin و obj از پروژه بود! که با بیلد مجدد، دوباره تشکیل شده و در زمان اجرا دیگر خطایی وجود نداشت.