مطالب
سازگار کردن GridView با افزونه‌های jQuery


افزونه‌ها/پلاگین‌های زیادی جهت کار با table استاندارد HTML وجود دارند و خروجی رندر شده‌ی یک ASP.Net GridView هم در نهایت یک جدول است. فرض کنید قصد داریم افزونه زیر را به GridView استاندارد ASP.Net اعمال کنیم.
jQuery quickSearch plug-in

ظاهرا بدون مشکل خاصی اعمال می‌گردد. برای مثال در هدر صفحه داریم: (شبیه به مثال موجود در سایت اصلی آن، جهت اعمال به GridView1)

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

<script type="text/javascript">
$(document).ready(function() {
//جستجو در جدول
$('table#<%=GridView1.ClientID %> tbody tr').quicksearch({
position: 'before',
attached: 'span#attachSearch',
labelText: 'جستجو',
isFieldset: true,
loaderText: ' ... ',
fixWidths: true
});
});
</script>

برای اعمال بر:
(در اینجا محل قرارگیری تکست باکس مربوط به جستجو، در span ایی با id مساوی attachSearch تنظیم شده است، می‌توانید از ID خود GridView هم استفاده کنید.)

<span id="attachSearch"></span>
<br />
<asp:GridView ID="GridView1" runat="server"></asp:GridView>

نکته:
1- همانطور که در مقاله مربوط به ClientID ذکر شد، هیچ الزامی ندارد که ID‌ مربوط به GridView‌ شما برای مثال دقیقا همان GridView1 جهت استفاده در سمت کلاینت باشد و بسته به container آن، این نام ترکیبی از ID شیء(های) در بر گیرنده و شیء مورد نظر می‌باشد. به همین جهت از GridView1.ClientID استفاده گردید تا اسکریپت ما با آن مشکلی نداشته باشد.

2- خصوصیات ظاهری افزونه فوق از سلکتور quicksearch فایل css شما دریافت می‌شوند. برای مثال:
.quicksearch
{
width:190px;
}

مشکل!
پس از هر بار جستجو، header مربوط به GridView محو می‌شود، اما نمونه موجود در سایت اصلی افزونه، این مشکل را ندارد. چرا؟!
GridView‌ مربوط به ASP.Net پس از رندر شدن، جدولی است که تگ‌های thead را ندارد. اگر به سورس صفحه سایت افزونه دقت نمائید، هدر جدول با تگ‌های thead محصور شده است اما GridView استاندارد ASP.Net به صورت پیش فرض این‌کار را انجام نمی‌دهد و خروجی آن چیزی شبیه به جدول زیر است: (هدر با th مشخص می‌شود و از تگ thead خبری نیست)

<table >
<tr >
<th scope="col">col1</th>
<th scope="col">col2</th>
<th scope="col">col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
.
.
.

حداقل دو راه حل برای رفع این مشکل وجود دارد:
الف) راه حل سمت سرور
برای اضافه کردن thead باید کمی کد نویسی کرد. پس از اینکه گرید شما بایند شد، چند سطر زیر را اضافه کنید:

//سازگار با افزونه‌های جی کوئری
if (GridView1.Rows.Count > 0)
{
//This replaces <td> with <th> and adds the scope attribute
GridView1.UseAccessibleHeader = true;

//This will add the <thead> and <tbody> elements
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

//This adds the <tfoot> element.
//Remove if you don't have a footer row
//GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
}

ب)راه حل سمت کلاینت
سطر مربوط به جستجو را به صورت زیر هم می‌توان نوشت:

$('table#<%=GridView1.ClientID %> tr:has(td)').quicksearch({

در اینجا به دنبال هرچی tr که td دارد می‌گردیم. به صورت پیش فرض در tr مربوط به هدر گرید، ما th داریم و نه td ، بنابراین مشکل محو شدن هدر به این صورت حل خواهد شد.

نکته:
اگر می‌خواهید که ناحیه مربوط به جستجوی افزونه فوق در پرینت صفحه ظاهر نشود به css صفحه چند سطر زیر را اضافه کنید:

@media print
{
.quicksearch
{
display: none;
}
}


تمرین!
افزونه جی کوئری زیر را به یک ASP.Net GridView اعمال کنید:
table sorter

اشتراک‌ها
کتابخانه jquery-sortable

jQuery Sortable is a flexible, opinionated sorting plugin. It enables items in a list (or table etc.) to be sorted horizontally and vertically using the mouse. Supports nested lists and pure drag/drop containers.  Demo

jQuery Sortable does not depend on jQuery UI and works well with Twitter's Bootstrap (You can even sort the Bootstrap navigation).

کتابخانه jquery-sortable
نظرات مطالب
سفارشی سازی ASP.NET Core Identity - قسمت پنجم - سیاست‌های دسترسی پویا
در مثالی که شما لینک دادید من متوجه اختلاف و دلیل نشدم.
می خوام از یک گرید Telerik استفاده کنم، در UserManagerController   یک متد اضافه می‌کنم به شکل زیر 
        public IActionResult Users_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(_userManager.Users.ToDataSourceResult(request));
        }

کد گرید هم به این صورت هست
@(Html.Kendo().Grid<User>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.FirstName).Width(140);
                columns.Bound(c => c.LastName).Width(140);
                columns.Bound(c => c.UserName).Width(140);
            })
            .HtmlAttributes(new { style = "height: 380px;" })
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Users_Read", "UserManager"))
            )
)
ولی باز هم خطای 401 دریافت می‌کنم.

اگر ممکنه باشه می‌خوام شبیه مثال خودتون، برای این متد دستری اعمال نکنم. آیا این امکان دارد؟ یا حتما باید شبیه Action‌های دیگر دسترسی پویا براش در نظر بگیرم؟

مطالب
پیاده سازی CQRS توسط MediatR - قسمت پنجم

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


Event Sourcing

در این قسمت قصد داریم تا اطلاعات Command‌های خود را بعد از Process، داخل یک دیتابیس Append-Only ذخیره کنیم. با استفاده از این روش میتوانیم بفهمیم در یک تاریخ مشخص، با چه ورودی‌هایی ( Request )، چه جواب ( Response ) ای در آن لحظه از برنامه برگشت داده شده‌است.


برای پیاده سازی Event Sourcing از دیتابیس EventStore که سورس آن نیز در گیتهاب قابل دسترسی است، استفاده خواهیم کرد. توجه داشته باشید که شما میتوانید از دیتابیس‌های دیگری مثل Elasticsearch, Redis و ... به‌منظور دیتابیس Event Store خود استفاده کنید و محدود به EventStore نیستید.

ما برای راه اندازی دیتابیس EventStore در این قسمت، از Docker استفاده خواهیم کرد. آموزش Docker قبلا طی مقالاتی (2 , 1) در سایت قرار گرفته‌است و در این مقاله به تکرار نحوه استفاده از آن نخواهیم پرداخت.

با استفاده از دستور زیر، EventStore را از روی Docker Hub که Registry پیشفرض است، Pull و اجرا میکنیم و پورت‌های 2113 و 1113 آن را به بیرون Expose میکنیم تا داخل برنامه خود، از آن‌ها استفاده کنیم:
docker run --name eventstore-node -d -p 2113:2113 -p 1113:1113 eventstore/eventstore

EventStore دارای پنل ادمینی است که از طریق http://localhost:2113 قابل دسترسی است. Username پیشفرض آن برابر با admin و کلمه عبور آن برابر با changeit است.

بعد از لاگین در پنل ادمین، با چنین Dashboard ای مواجه خواهید شد و نشان از این دارد که EventStore به‌درستی اجرا شده است:



برای استفاده از EventStore داخل برنامه خود، مانند دیگر دیتابیس‌ها، Client موجود آن را برای #C، از NuGet نصب میکنیم:
Install-Package EventStore.Client

سپس کلاسی بنام EventStoreDbContext ایجاد و منطق ارتباط با EventStore را داخل آن قرار میدهیم :
public class EventStoreDbContext : IEventStoreDbContext
{
    public async Task<IEventStoreConnection> GetConnection()
    {
        IEventStoreConnection connection = EventStoreConnection.Create(
            new IPEndPoint(IPAddress.Loopback, 1113),
            nameof(MediatrTutorial));

        await connection.ConnectAsync();

        return connection;
    }

    public async Task AppendToStreamAsync(params EventData[] events)
    {
        const string appName = nameof(MediatrTutorial);
        IEventStoreConnection connection = await GetConnection();

        await connection.AppendToStreamAsync(appName, ExpectedVersion.Any, events);
    }
}

همانطور که می‌بینید، با استفاده از IP 1113 که در بالاتر با استفاده از Docker آن را Expose کرده بودیم، به EventStore متصل شده‌ایم. همچنین برای متد AppendToStreamAsync خود EventStore ، یک Facade نوشته‌ایم که نحوه کار با آن را برایمان راحت‌تر کرده‌است.

با توجه به اینکه EventStore در Documentation خود بیان کرده که Thread-Safe است، در DI Container خود، EventStoreDbContext را بصورت Singleton ثبت و Register میکنیم و در طول عمر برنامه، یک instance از آن خواهیم داشت:
services.AddSingleton<IEventStoreDbContext, EventStoreDbContext>();

قصد داریم Request هایی را که از نوع Command هستند، همراه با Response آن‌ها داخل EventStore ذخیره کنیم. برای تشخیص Query/Command بودن یک Request ، از نام آنها استفاده خواهیم کرد. همانطور که در قسمت‌های قبل گفتیم ، Command‌ها باید با ذکر "Command" در پایان نامشان همراه باشند.

این یک Convention در برنامه ماست که باید رعایت شود. ( Convention Over Configuration )



مانند Behavior‌های قبلی، یک Behavior جدید را بنام EventLoggerBehavior ایجاد و از IPipelineBehavior ارث بری کرده و EventStoreDbContext خود را به آن Inject میکنیم:
public class EventLoggerBehavior<TRequest, TResponse> :
   IPipelineBehavior<TRequest, TResponse>
{
    readonly IEventStoreDbContext _eventStoreDbContext;

    public EventLoggerBehavior(IEventStoreDbContext eventStoreDbContext)
    {
        _eventStoreDbContext = eventStoreDbContext;
    }

    public async Task<TResponse> Handle(TRequest request, CancellationToken cancellationToken, RequestHandlerDelegate<TResponse> next)
    {
        TResponse response = await next();

        string requestName = request.ToString();

        // Commands convention
        if (requestName.EndsWith("Command"))
        {
            Type requestType = request.GetType();
            string commandName = requestType.Name;

            var data = new Dictionary<string, object>
            {
                {
                    "request", request
                },
                {
                    "response", response
                }
            };

            string jsonData = JsonConvert.SerializeObject(data);
            byte[] dataBytes = Encoding.UTF8.GetBytes(jsonData);

            EventData eventData = new EventData(eventId: Guid.NewGuid(),
                type: commandName,
                isJson: true,
                data: dataBytes,
                metadata: null); 

            await _eventStoreDbContext.AppendToStreamAsync(eventData);
        }

        return response;
    }
}

با استفاده از این Behavior، فقط Request هایی را که Command هستند و State برنامه را تغییر میدهند، داخل EventStore ذخیره میکنیم. اکنون کافیست تا این Behavior را داخل DI Container خود اضافه کنیم :
services.AddScoped(typeof(IPipelineBehavior<,>), typeof(EventLoggerBehavior<,>));

اگر برنامه را اجرا و یکی از Command‌ها را مانند CreateCustomerCommand، با استفاده از api/Customers <= POST فراخوانی کنید، Request و Response شما با Type آن Command و همراه با DateTime ای که این Request رخ داده‌است، داخل EventStore ذخیره خواهد شد که در Admin Panel مربوط به EventStore، در تب Stream Browser قابل مشاهده است :



نامگذاری این بخش به Stream، بدلیل این است که ما جریان و تاریخچه‌ای از وقایع بوجود آمده در سیستم را داریم که با استفاده از آن‌ها میتوانیم به وضعیت جاری و نحوه رسیدن به این State دست پیدا کنیم.
نظرات مطالب
نحوه صحیح تولید Url در ASP.NET MVC
سلام و خسته نباشید خدمت شما آقای نصیری. وبلاگتون واقعا مفید و عالیه
ممنون از زحماتتون بابت مطالبی که به اشتراک میگذارید
یه سوال از خدمتتون داشتم
من روی یه پروژه MVC کار میکنم. به این صورت کار کردم که یک View کلی دارم که توی اون نمایش اطلاعات و "ایجاد" و "حذف" و "ویرایش" همه یکجا انجام میشن. این View را کاملا با Jquery کار کردم و Insert , Update , Delete  کلا توسط Jquery انجام میشه. اما توی یکی از Viewهای دیگه که Strongly Type هم هستش، نمیخام به طور کامل از Jquery استفاده کنم. به این صورت که من اطلاعات جدول مربوطه رو توسط Jquery از پایگاه داده میگیرم و در یک گرید نمایش میدم. توی این گرید برای هر ردیف دوتا لینک "حذف" و "ویرایش" وجود داره. برای حذف هم با Jquery کارمو انجام میدم. اما برای "ایجاد" یک فرم از نوع فرم‌های MVC دارم که داخل یه dialog از نوع Jquery قرارشون دادم. برای ایجاد هم مشکلی نیست. اما برای ویرایش، نمیدونم که چطوری باید اطلاعات رو از پایگاه داده لود کنم که خودش مستقیما داخل TextBox‌ها قرار بگیره. البته توسط Jquery اومدم تک تک textbox‌ها رو به صورت زیر مقدار دادم. حالا نمیدونم کارم درسته یا روش بهتری هست واسه این کار. اگر نیاز هست تا سورس برنامه رو واستون بفرستم
function editmode(val) {
        $.ajax({ url: "/User/SelectUser", data: { Username: val }, type: "post", dataType: "json", success: function (data) {
            if (data != "timeout") {
                if (data.isRedirect) { window.location.href = data.redirectUrl; return; }
                try {
                    $("#dvEdit").dialog({ modal: 'true', title: 'ویرایش', hide: 'clip' });
                    //alert($("#dvEdit").html());

                    $("#UsernameEdit").val(data.Username);
                    $("#FirstNameEdit").val(data.FirstName);
                    $("#LastNameEdit").val(data.LastName);
                    $("#NationalCodeEdit").val(data.NationalCode);
                    $("#EmailEdit").val(data.Email);
                    $("#PhoneNoEdit").val(data.PhoneNo);
                    $("#MobileNoEdit").val(data.MobileNo);
                    $("#CreationDateEdit").val(data.CreationDate);
                    $("#CreationDateEdit").prop('disabled', true);
                    $("#LastActivityDateEdit").val(data.LastActivityDate);
                    $("#LastActivityDateEdit").prop('disabled', true);
                    $("#LastLoginDateEdit").val(data.LastLoginDate);
                    $("#LastLoginDateEdit").prop('disabled', true);
                    $("#IsLockedOutEdit").val(data.IsLockedOut);
                    $("#AddressEdit").val(data.Address);


                }
                catch (err) {
                    $("#dverr").show(); $("#lblErr").html(err);
                }
            }
            else
                AjaxTimeout();
        }
        , error: function (req, textstatus, errorthrown) { AjaxError(req, textstatus, "#dverr", "#lblErr"); }
        , complete: function (xhr, e) { AjaxComplete(xhr, "#dverr", "#lblErr"); }
        });
    }

نظرات مطالب
کار با اسکنر در برنامه های تحت وب (قسمت دوم و آخر)
با سلام
در صورتی که از وب سرویس asmx یا web API یا wcf service در پروژه وبی جهت انجام عملیات اسکن استفاده کنم با خطای زیر مواجه می‌شوم :

Creating an instance of the COM component with CLSID {850D1D11-70F3-4BE5-9A11-77AA6B2BB201} from the IClassFactory failed due to the following error: 80070005 Access is denied. (Exception from HRESULT: 0x80070005 (E_ACCESSDENIED)).

سطح دسترسی application pool وب سایت را نیز تغییر داده ام, اما مشکل حل نشده است .
ظاهرا اگر عملیات دسترسی به کتابخانه WIA از طریق وب سایت انجام شود این مشکل به وجود می‌آید .
یعنی حتما باید این کار در یک پروژه مجزای WCF انجام شود و هاست شود و سپس در وب اپلیکیشن فراخوانی شود؟ 
پاسخ به بازخورد‌های پروژه‌ها
Report Viewer
- نه. حاصل این گزارشات یا کلا فایل‌های PDF نوعی HTML نیستند. PDF یک فرمت مستقل و بسیار پیشرفته‌تر است. (من در مورد عکس آن یعنی تبدیل HTML به PDF مطلب نوشتم)
- یک سری مثال در سورس‌های این کتابخانه موجود است که نحوه استفاده از active-x خود شرکت adobe را جهت نمایش گزارشات در winforms و wpf بیان می‌کند.
- در وب هم این اکتیو ایکس به صورت خودکار کار می‌کند. فقط کافی است استفاده کننده adobe reader را نصب کرده باشد.
- به علاوه امکان تبدیل PDF به تصویر هم وجود دارد. می‌تونید لینک‌های این گروه رو دنبال کنید:
iTextSharp
در لینک‌ها فوق، شما یک سری جمع آوری اطلاعات را در مورد نحوه‌های دیگر نمایش فایل‌های PDF، مشاهده می‌کنید و از هم مهم‌تر در این بین پروژه pdf.js فایرفاکس است (که از نگارش 15 جزئی از فایرفاکس شده).
نظرات مطالب
افزودن و اعتبارسنجی خودکار Anti-Forgery Tokens در برنامه‌های Angular مبتنی بر ASP.NET Core
وقتی که یک فرم با متد POST به سمت API ارسال میشه خطای 400 Bad request می‌گیرم.
ولی اگر AutoValidateAntiforgeryTokenAttribute در قسمت سرویس startup رو غیر فعال می‌کنم مشکل پیش نمیاد.
درصورتی که برای فرم لاگین با همچین مشکلی برخورد نمی‌کنم!
نظرات مطالب
پیاده سازی JSON Web Token با ASP.NET Web API 2.x
قسمت «نحوه‌ی ارسال درخواست‌های Ajax ایی به همراه توکن صادر شده» را مطالعه کنید. اگر توکنی به سمت سرور ارسال نشود و هدر نهایی حاوی key/value مربوط به authorization ذکر شده نباشد:
    $.ajax({
        headers: { 'Authorization': 'Bearer ' + jwtToken },
مقدار access token در سمت سرور قابل بازیابی نخواهد بود.
با استفاده از developer tools مرورگرها بررسی کنید که آیا هدر authorization را به شکل زیر به سمت سرور ارسال می‌کنید یا خیر؟ (این هدر ویژه هست که actionContext.Request.Headers.Authorization را وهله سازی می‌کند)