وحید نصیری وحید نصیری
کار با Kendo UI DataSource
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: شش دقیقه
Kendo UI DataSource جهت تامین داده‌های سمت کلاینت ویجت‌های مختلف KendoUI طراحی شده‌است و به عنوان یک اینترفیس استاندارد قابل استفاده توسط تمام کنترل‌های داده‌ای Kendo UI کاربرد دارد. Kendo UI DataSource امکان کار با منابع داده محلی، مانند اشیاء و آرایه‌های جاوا اسکریپتی و همچنین منابع تامین شده از راه دور، مانند JSON، JSONP و XML را دارد. به علاوه توسط آن می‌توان اعمال ثبت، ویرایش و حذف اطلاعات، به همراه صفحه بندی، گروه بندی و مرتب سازی داده‌ها را کنترل کرد.


استفاده از منابع داده محلی
در ادامه مثالی را از نحوه‌ی استفاده از یک منبع داده محلی جاوا اسکریپتی، مشاهده می‌کنید:
    <script type="text/javascript">
        $(function () {
            var cars = [
                { "Year": 2000, "Make": "Hyundai", "Model": "Elantra" },
                { "Year": 2001, "Make": "Hyundai", "Model": "Sonata" },
                { "Year": 2002, "Make": "Toyota", "Model": "Corolla" },
                { "Year": 2003, "Make": "Toyota", "Model": "Yaris" },
                { "Year": 2004, "Make": "Honda", "Model": "CRV" },
                { "Year": 2005, "Make": "Honda", "Model": "Accord" },
                { "Year": 2000, "Make": "Honda", "Model": "Accord" },
                { "Year": 2002, "Make": "Kia", "Model": "Sedona" },
                { "Year": 2004, "Make": "Fiat", "Model": "One" },
                { "Year": 2005, "Make": "BMW", "Model": "M3" },
                { "Year": 2008, "Make": "BMW", "Model": "X5" }
            ];

            var carsDataSource = new kendo.data.DataSource({
                data: cars
            });

            carsDataSource.read();
            alert(carsDataSource.total());
        });
    </script>
در اینجا cars آرایه‌ای از اشیاء جاوا اسکریپتی بیانگر ساختار یک خودرو است. سپس برای معرفی آن به Kendo UI، کار با مقدار دهی خاصیت data مربوط به new kendo.data.DataSource شروع می‌شود.
ذکر new kendo.data.DataSource به تنهایی به معنای مقدار دهی اولیه است و در این حالت منبع داده مورد نظر، استفاده نخواهد شد. برای مثال اگر متد total آن‌را جهت یافتن تعداد عناصر موجود در آن فراخوانی کنید، صفر را بازگشت می‌دهد. برای شروع به کار با آن، نیاز است ابتدا متد read را بر روی این منبع داده مقدار دهی شده، فراخوانی کرد.


استفاده از منابع داده راه دور

در برنامه‌های کاربردی، عموما نیاز است تا منبع داده را از یک وب سرور تامین کرد. در اینجا نحوه‌ی خواندن اطلاعات JSON بازگشت داده شده از جستجوی توئیتر را مشاهده می‌کنید:
    <script type="text/javascript">
        $(function () {
            var twitterDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://search.twitter.com/search.json",
                        dataType: "jsonp",
                        contentType: 'application/json; charset=utf-8',
                        type: 'GET',
                        data: { q: "#kendoui" }
                    },
                    schema: { data: "results" }
                },
                error: function (e) {
                    alert(e.errorThrown.stack);
                }
            });
        });
    </script>
در قسمت transport، جزئیات تبادل اطلاعات با سرور راه دور مشخص می‌شود؛ برای مثال url ارائه دهنده‌ی سرویس، dataType بیانگر نوع داده مورد انتظار و data کار مقدار دهی پارامتر مورد انتظار توسط سرویس توئیتر را انجام می‌دهد. در اینجا چون صرفا عملیات خواندن اطلاعات صورت می‌گیرد، خاصیت read مقدار دهی شده‌است.
در قسمت schema مشخص می‌کنیم که اطلاعات JSON بازگشت داده شده توسط توئیتر، در فیلد results آن قرار دارد.


کار با منابع داده OData

علاوه بر فرمت‌های یاد شده، Kendo UI DataSource امکان کار با اطلاعاتی از نوع OData را نیز دارا است که تنظیمات ابتدایی آن به صورت ذیل است:
    <script type="text/javascript">
            var moviesDataSource = new kendo.data.DataSource({
                type: "odata",
                transport: {
                    read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                },
                error: function (e) {
                    alert(e.errorThrown.stack);
                }
            });
        });
    </script>
همانطور که ملاحظه می‌کنید، تنظیمات ابتدایی آن اندکی با حالت remote data پیشین متفاوت است. در اینجا ابتدا نوع داده‌ی بازگشتی مشخص می‌شود و در قسمت transport، خاصیت read آن، آدرس سرویس را دریافت می‌کند.


یک مثال: دریافت اطلاعات از ASP.NET Web API

یک پروژه‌ی جدید ASP.NET را آغاز کنید. تفاوتی نمی‌کند که Web forms باشد یا MVC؛ از این جهت که مباحث Web API در هر دو یکسان است.
سپس یک کنترلر جدید Web API را به نام ProductsController با محتوای زیر ایجاد کنید:
using System.Collections.Generic;
using System.Web.Http;

namespace KendoUI02
{
    public class Product
    {
        public int Id { set; get; }
        public string Name { set; get; }
    }

    public class ProductsController : ApiController
    {
        public IEnumerable<Product> Get()
        {
            var products = new List<Product>();
            for (var i = 1; i <= 100; i++)
            {
                products.Add(new Product { Id = i, Name = "Product " + i });
            }
            return products;
        }
    }
}
در این مثال، هدف صرفا ارائه یک خروجی ساده JSON از طرف سرور است.
در ادامه نیاز است تعریف مسیریابی ذیل نیز به فایل Global.asax.cs برنامه اضافه شود تا بتوان به آدرس api/products در سایت، دسترسی یافت:
using System;
using System.Web.Http;
using System.Web.Routing;

namespace KendoUI02
{
    public class Global : System.Web.HttpApplication
    {
        protected void Application_Start(object sender, EventArgs e)
        {
            RouteTable.Routes.MapHttpRoute(
               name: "DefaultApi",
               routeTemplate: "api/{controller}/{id}",
               defaults: new { id = RouteParameter.Optional }
               );
        }
    }
}

در ادامه فایلی را به نام Index.html (یا در یک View و یا یک فایل aspx دلخواه)، محتوای ذیل را اضافه کنید:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Kendo UI: Implemeting the Grid</title>

    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.all.min.js" type="text/javascript"></script>
</head>
<body>

    <div id="report-grid"></div>
    <script type="text/javascript">
        $(function () {
            var productsDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "api/products",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8',
                        type: 'GET'
                    }
                },
                error: function (e) {
                    alert(e.errorThrown.stack);
                },
                pageSize: 5,
                sort: { field: "Id", dir: "desc" }
            });

            $("#report-grid").kendoGrid({
                dataSource: productsDataSource,
                autoBind: true,
                scrollable: false,
                pageable: true,
                sortable: true,
                columns: [
                    { field: "Id", title: "#" },
                    { field: "Name", title: "Product" }
                ]
            });
        });
    </script>
</body>
</html>
- ابتدا فایل‌های اسکریپت و CSS مورد نیاز Kendo UI اضافه شده‌اند.
- گرید صفحه، در محل div ایی با id مساوی report-grid تشکیل خواهد شد.
- سپس DataSource ایی که به آدرس api/products اشاره می‌کند، تعریف شده و در آخر productsDataSource را توسط یک kendoGrid نمایش داده‌ایم.
- نحوه‌ی تعریف productsDataSource، در قسمت استفاده از منابع داده راه دور ابتدای بحث توضیح داده شد. در اینجا فقط دو خاصیت pageSize و sort نیز به آن اضافه شده‌اند. این دو خاصیت بر روی نحوه‌ی نمایش گرید نهایی تاثیر گذار هستند. pageSize تعداد رکورد هر صفحه را مشخص می‌کند و sort نحوه‌ی مرتب سازی را بر اساس فیلد Id و در حالت نزولی قرار می‌دهد.
- در ادامه، ابتدایی‌ترین حالت کار با kendoGrid را ملاحظه می‌کنید.
- تنظیم dataSource و autoBind: true (حالت پیش فرض)، سبب خواهند شد تا به صورت خودکار، اطلاعات JSON از مسیر api/products خوانده شوند.
- سه خاصیت بعدی صفحه بندی و مرتب سازی خودکار ستون‌ها را فعال می‌کنند.
- در آخر هم دو ستون گرید، بر اساس نام‌های خواص کلاس Product تعریف شده‌اند.


سورس کامل این قسمت را از اینجا می‌توانید دریافت کنید:
KendoUI02.zip
 
‫۹ سال و ۱۱ ماه قبل، جمعه ۱۶ آبان ۱۳۹۳، ساعت ۰۱:۳۵
۱۰۲۸۶
۲۶
JavaScriptASP.NET Web APIjQueryKendo UIjson.net
مطالب مشابه
  • #
    ژوپیتر ژوپیتر
    ‫۹ سال و ۸ ماه قبل، پنجشنبه ۹ بهمن ۱۳۹۳، ساعت ۱۳:۵۷
    سلام
    چرا زمان اجرا به جای نمایش اطلاعات گرید، پیام undefined داده می‌شود؟ بنده از MVC استفاده کردم و کاملا مطابق مقاله مسیریابی و ... را اعمال کردم.
    • #
      وحید نصیری وحید نصیری
      ‫۹ سال و ۸ ماه قبل، پنجشنبه ۹ بهمن ۱۳۹۳، ساعت ۱۴:۴۰
      روی چه سطری پیام خطا دریافت کردید؟
      حین کار با کتابخانه‌های جاوا اسکریپتی باید مدام کنسول developer مرورگر را باز نگه دارید تا بتوانید خطاها را بهتر بررسی و دیباگ کنید.
      • #
        ژوپیتر ژوپیتر
        ‫۹ سال و ۸ ماه قبل، شنبه ۱۱ بهمن ۱۳۹۳، ساعت ۱۲:۳۳
        خطا توسط error handler، گرفته می‌شود وقتی این بخش نیز حذف می‌شود مرورگر فقط منتظر دریافت اطلاعات از api/products می‌ماند و خطایی از کد گرفته نمی‌شود.

        • #
          وحید نصیری وحید نصیری
          ‫۹ سال و ۸ ماه قبل، شنبه ۱۱ بهمن ۱۳۹۳، ساعت ۱۳:۳۳
          خطای 404 به معنای یافتن نشدن مسیر تنظیمی "url: "api/products در برنامه شما است.
          مطابق تصویر، مسیر home/api/product در حال جستجو است که به ریشه‌ی سایت اشاره نمی‌کند.
          - آیا در ASP.NET MVC از یک اکشن متد برای بازگرداندن لیست جی‌سون محصولات استفاده کرده‌اید؟ اگر بله، از مطلب «نحوه صحیح تولید Url در ASP.NET MVC» کمک بگیرید؛ مثلا آدرس آن چنین شکلی را پیدا خواهد کرد:
          @Url.Action("method_name", "Home")
          - اگر وب API است در یک برنامه‌ی MVC، از روش زیر استفاده کنید:
          '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "products" })'
          و البته فرض بر این است که مسیریابی DefaultApi پیشتر در برنامه‌ی شما ثبت شده‌است:
          routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{id}",
    defaults: new { id = RouteParameter.Optional }
);
          • #
            ژوپیتر ژوپیتر
            ‫۹ سال و ۸ ماه قبل، شنبه ۱۱ بهمن ۱۳۹۳، ساعت ۱۴:۳۸
            - ممنون؛ از وب API استفاده شده بود که با راهنمایی شما حل شد. ولی استفاده از خروجی Json کنترلر به‌نظرم بهتر و ساده‌تر اومد. آیا تفاوتی محسوسی بین این دو روش وجود داره؟
            - آیا امکان استفاده مستقیم اشیا Strongly Typed هم در توابع این کتابخانه وجود داره؟ (منظورم همون model@ به صورت مستقیم یا با واسطه است).
  • #
    رضا نادری رضا نادری
    ‫۹ سال و ۶ ماه قبل، چهارشنبه ۲۷ اسفند ۱۳۹۳، ساعت ۰۲:۰۵
    سلام؛ من میخوام در متد read ,خواندنم همراه با پارامتر باشد. به این معنا که آن رکوردهایی را بخوان که فرضا Id=12 هست. چگونه میتوانم این کار را بکنم؟
    • #
      وحید نصیری وحید نصیری
      ‫۹ سال و ۶ ماه قبل، چهارشنبه ۲۷ اسفند ۱۳۹۳، ساعت ۰۳:۳۸
      - مثال بحث جاری جهت اضافه شدن پارامترهای سفارشی به روز شد. با این View و این کنترلر.
      - مقایسه‌ی تغییرات انجام شده با نمونه‌ی قبلی در اینجا.
      • #
        رضا نادری رضا نادری
        ‫۹ سال و ۶ ماه قبل، چهارشنبه ۲۷ اسفند ۱۳۹۳، ساعت ۰۴:۰۱
        من از mvc استفاده میکنم و فرمایشات شما را هم انجام دادم ولی پارامتر‌ها null هستند. آیا در mvc نحوه کار متفاوت است.
        • #
          وحید نصیری وحید نصیری
          ‫۹ سال و ۶ ماه قبل، چهارشنبه ۲۷ اسفند ۱۳۹۳، ساعت ۰۴:۴۰
          خیر متفاوت نیست. متد Get در ASP.NET Web API معادل متد دارای ویژگی HttpGet در ASP.NET MVC است. این Get هم بر اساس 'type: 'GET سمت کلاینت مشخص می‌شود. اگر مقدار آن به Post تنظیم شده، باید به متد Post سمت سرور یا اکشن متد HttpPost دار ارسال شود.
      • #
        رضا نادری رضا نادری
        ‫۹ سال و ۶ ماه قبل، سه‌شنبه ۴ فروردین ۱۳۹۴، ساعت ۱۹:۴۵
        سلام من پروژه شما را دانلود کردم و هنگام تست وقتی پارامتر داشته باشد پیغام undefined می‌دهد ولی هنگامی که پارامتر نداشته باشد درست جواب می‌دهد.
        می‌خواستم بدونم که آیا نیاز به افزونه ویا ... چیز دیگری هست که رو سیستم من نصب باشه؟
        • #
          وحید نصیری وحید نصیری
          ‫۹ سال و ۶ ماه قبل، سه‌شنبه ۴ فروردین ۱۳۹۴، ساعت ۲۱:۱۷
          نسخه‌ی تکمیلی ASP.NET MVC بحث جاری (^ ):


          نسخه‌ی تکمیلی ASP.NET Web API بحث جاری (^):

          هر دو مورد پارامترهای ارسالی را بدون مشکل دریافت می‌کنند.
          • #
            رضا نادری رضا نادری
            ‫۹ سال و ۶ ماه قبل، چهارشنبه ۵ فروردین ۱۳۹۴، ساعت ۰۱:۳۸
            سلام؛ من در حل این مشکل به یک نکته برخوردم و آن اینه که وقتی view من دقیقا مشابه آن چیزی هست که شما در جواب فوق آدرس دادید من موفق به دریافت پارامتر‌ها میگردم. اما اگر ویو من به شکل زیر باشد پارامتر‌ها را نال بر میگرداند.
               <script type="text/javascript">
        $(function () {
            //            var r = "12";
            var productsDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "@Url.Action("GetProducts", "Home")",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8',
                        type: 'GET',
                        data: { param1: "dfvdf", param2: "val2" } // ارسال اطلاعات اضافی و سفارشی به سرور در حین درخواست
                    },
                    create: {
                        url: "@Url.Action("PostProduct","Home")",
                        contentType: 'application/json; charset=utf-8',
                        type: "POST"
                    },
                    update: {
                        url:// function (product) {
                             "@Url.Action("UpdateProduct","Home")",//, +product.Id;
                        //},
                        contentType: 'application/json; charset=utf-8',
                        type: "PUT"
                    },
                    destroy: {
                        url: function (p) {
                            return "@Url.Action("DeleteProduct","Home")/" + p.Id;
                        },
                        contentType: 'application/json; charset=utf-8',
                        type: "DELETE"
                    },
                    parameterMap: function (options) {
                        return kendo.stringify(options);
                    }
                },
                schema: {
                    parse: function (data) {
                        return data;
                    },
                    data: "Data",
                    total: "Total",
                    model: {
                        id: "Id", // define the model of the data source. Required for validation and property types.
                        fields: {
                            "Id": { type: "number", editable: false }, //تعیین نوع فیلد برای جستجوی پویا مهم است
                            "Name": { type: "string", validation: { required: true }, editable: true },
                            "Discription": { type: "string", },
                            "Title": { type: "string", editable: false },
                            "GroupName": { type: "string", },
                            "Link": { type: "string" }

                        }

                    },
                    batch: false,


                },
                error: function (e) {
                    alert(e.errorThrown.stack);
                },
                pageSize: 5,
                sort: { field: "Id", dir: "desc" }

            });
            $("#report-grid").kendoGrid({
                dataSource: productsDataSource,
                autoBind: true,
                scrollable: false,
                pageable: true,
                sortable: true,
                columns: [
                { field: "Id", title: "#" },
                { field: "Name", title: "Product" }
                ]
            });
        });
    </script>
            • #
              وحید نصیری وحید نصیری
              ‫۹ سال و ۶ ماه قبل، چهارشنبه ۵ فروردین ۱۳۹۴، ساعت ۰۲:۵۷
              کدهای ASP.NET MVC مطلب «فعال سازی عملیات CRUD در Kendo UI Grid» را جهت دریافت پارامتر سفارشی به روز کردم.  
              زمانیکه صفحه بندی فعال است، تمام پارامترها داخل یک کوئری استرینگ با فرمت جی‌سون قرار می‌گیرند. به این شکل:
              {"param1":"val1","param2":"val2","take":10,"skip":0,"page":1,"pageSize":10,"sort":[{"field":"Id","dir":"desc"}]}
              برای خواندن آن‌ها فقط کافی است یک کلاس سفارشی ایجاد کرد:
               // با ارث بری، خواص اضافی و سفارشی را به کلاس پایه اضافه می‌کنیم
public class CustomDataSourceRequest : DataSourceRequest
{
    public string Param1 { set; get; }
    public string Param2 { set; get; }
}
              بعد بجای DataSourceRequest اصلی، از کلاس سفارشی حاوی پارامترهای اضافی استفاده خواهیم کرد:
               var request = JsonConvert.DeserializeObject<CustomDataSourceRequest>(queryString);
  • #
    امیر نوروزیان امیر نوروزیان
    ‫۹ سال و ۵ ماه قبل، دوشنبه ۷ اردیبهشت ۱۳۹۴، ساعت ۱۶:۰۴
    با سلام؛ من از api استفاده نمیکنم دقیقا روش شما رو استفاده کردم برنامه رو هم دیباگ کردم اطلاعات درست به سمت سرور میره بر میگرده ولی نمیدونم چرا نشون نمیده و هیچ خطاییم نشون نمیده

    • #
      وحید نصیری وحید نصیری
      ‫۹ سال و ۵ ماه قبل، دوشنبه ۷ اردیبهشت ۱۳۹۴، ساعت ۱۷:۰۲
      کدهای کامل بحث جاری را با فرمت ASP.NET MVC، از اینجا دریافت کنید و با کدهای خودتان انطباق دهید؛ با این کنترلر و با این View
      • #
        امیر نوروزیان امیر نوروزیان
        ‫۹ سال و ۵ ماه قبل، دوشنبه ۷ اردیبهشت ۱۳۹۴، ساعت ۱۷:۲۷
        ممنون
        مشکلم حل شد فراموش کردن <body> بود
  • #
    محمد رحیم پورابراهیم محمد رحیم پورابراهیم
    ‫۹ سال و ۴ ماه قبل، پنجشنبه ۷ خرداد ۱۳۹۴، ساعت ۱۹:۰۸
    سلام
    من طبق مقاله یه پروژه MVC  رو ساختم اما زمانی که پروژه رو اجرا میکنم در خطی که   
    $("#report-grid").kendoGrid
    رو تعریف کردم خطای زیر رو دریافت میکنم
    $(...).kendoGrid is not a function
    در layout به فایلهای css و js ارجاع داده شده و view که ساخته ام از lyout استفاده میکنه.
  • #
    منصور ج منصور ج
    ‫۸ سال و ۶ ماه قبل، یکشنبه ۲۳ اسفند ۱۳۹۴، ساعت ۱۲:۳۵
    باسلام و خسته نباشید

    زمانی که میخوام داخل web api اطلاعات رو از داخل دیتابیس ارسال کنم بدون مشکل تمامی اطلاعات رو میاره مثلا به این شکل
    DatabaseContext db = new DatabaseContext();
        [HttpGet]
        public IEnumerable<News> Get()
        {
            db.Configuration.ProxyCreationEnabled = false;

            var lst = db.Newses.ToList();
            return lst;

        }

    اما چطور باید جدول رابطه ای رو بفرستم و اون طرف در ویوو دریافت کنم مثلا زمانی که اینطور می‌فرستم خطا میگیره
    DatabaseContext db = new DatabaseContext();
        [HttpGet]
        public IEnumerable<News> Get()
        {
            db.Configuration.ProxyCreationEnabled = false;

            var lst = db.Newses.Include("Types").ToList();
            return lst;

        }

    ممنون میشم راهنمایی کنید.
    • #
      وحید نصیری وحید نصیری
      ‫۸ سال و ۶ ماه قبل، یکشنبه ۲۳ اسفند ۱۳۹۴، ساعت ۱۳:۴۵
      - «خطا می‌گیره» برای بررسی کافی نیست. اطلاعات بیشتر
      دفعه‌ی قبل هم همین رویه را تکرار کردی و پاسخی نگرفتی. چون برای رفع مشکل، اگر نتوان شرایط شما را خیلی «سریع»، «تکرار» کرد، امکان دیباگ و رفع اشکال آن هم نیست. بنابراین اگر قسمتی از یک پروژه‌ی بزرگ را اینجا عنوان کنید که کار نمی‌کند، هیچ کسی کمکی به شما نخواهد کرد (چون امکان بررسی و شبیه سازی جزئیات آن از راه دور میسر نیست).
      بنابراین قبل از اینکه سؤالی را مطرح کنید، این سؤال را خودتان بپرسید:
      - آیا طرف مقابل می‌تواند به «سرعت» مشکل من را شبیه سازی و «تکرار» کند؟
      اگر پاسخ آن خیر است، احتمال اینکه پاسخ مناسبی را دریافت کنید، خیلی کم است.

      - نیازی به تنظیم ProxyCreationEnabled = false در این قسمت از کد نیست و روش بهتری برای آن وجود دارد. اطلاعات بیشتر
      - اگر قسمتی از اسکیمای JSON شما چنین شکلی را دارد:
      "address":{
   "street":"test 59",
   "city":"City test",
   "post_number":"25050"
},
      معادل Kendo UI Data source آن به صورت زیر خواهد بود:
      columns : [
        { field: "address.street", title: "Street" },
        { field: "address.city", title: "City" },
        { field: "address.post_number", title: "Post#" }
    ]
      یک مثال کامل
  • #
    وحید نصیری وحید نصیری
    ‫۷ سال قبل، جمعه ۱۷ شهریور ۱۳۹۶، ساعت ۲۰:۰۶
    جهت اطلاع

    تمام مثال‌های این سری به ASP.NET Core منتقل شدند. کدهای نهایی آن‌ها را از مخزن کد KendoUI.Core.Samples می‌توانید دریافت کنید.
    این مثال‌ها بر اساس Kendo UI Professional R2 2017 SP1 تهیه شده‌اند (فایل‌های مورد نیاز هم پیوست شده‌اند).  
  • #
    کیان سبزی کیان سبزی
    ‫۵ سال قبل، شنبه ۲ شهریور ۱۳۹۸، ساعت ۱۵:۵۷
    سلام؛ من درخواست رو کامل این طرف دریافت میکنم. یعنی اطلاعات درست میره سمت سرور و پاسخ برمیگرده؛ ولی چیزی نشون داده نمیشه و خطایی هم در کنسول یا برنامه دریافت نمیکنم.

    • #
      وحید نصیری وحید نصیری
      ‫۵ سال قبل، شنبه ۲ شهریور ۱۳۹۸، ساعت ۱۶:۱۳
      سورس کامل این سری را برای ASP.NET Core در اینجا KendoUI.Core.Samples می‌توانید مشاهده کنید. برای نمونه، مثال مرتبط با این قسمت، کنترلر 2 و view 2 است. تصویری که ارسال کردید شبیه به کنترلر 3 و view 3 است. مطمئن شوید که view متناظری را درحال استفاده هستید و فیلدهای data source آن درست تعریف شده و همچنین تعریف قسمت ستون‌های گرید، با آن متناظر است. به علاوه به بزرگی و کوچکی ابتدای نام فیلدهای تعریف شده دقت داشته باشید. سمت سرور، نام به صورت Name و در سمت کلاینت (به علت نوع serialization و تنظیمات آن)، باید name تعریف شود.
      • #
        کیان سبزی کیان سبزی
        ‫۵ سال قبل، دوشنبه ۴ شهریور ۱۳۹۸، ساعت ۰۱:۱۱
        بله مشکل از نام ستون‌های متناظر بود توی بخش column و تعریف template فراموش کرده بودم اونجا رو هم باید دو تا فیلدی که دارم رو همه حروفشون کوچک باشه. ممنون از دقت نظر شما. فقط یه مساله ای که دارم این هستش که تاریخ رو من به شکل Datetime دارم میخونم داخل مدل هام ولی اینجا نشون نمیده داخل جدول.  به این شکل تعریف شده داخل viewModel : 
         [DisplayName("تاریخ درج")]
 public DateTime CreateDate { get; set; }
 [DisplayName("تاریخ انتشار")]
 public DateTime PublishDate { get; set; }

        حتی الان یه پراپرتی دیگه از مدل رو نگاه کردم که از نوع string هستش(blogtype) و اون هم از سمت سرور برمی گرده ولی تو جدول خالی نشون میده :
        [DisplayName("نوع مطلب")]
public string BlogType { get; set; }
        ولی بقیه پراپرتی‌ها درست کار میکنند.
        این هم کد داخل View بنده : 
         <script type="text/javascript">

            $(function () {
                var blogDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "@Url.Action("GetLastBlogs", "Admin")",
                            dataType: "json",
                            contentType: 'application/json; charset=utf-8',
                            type: 'GET'
                        },
                        parameterMap: function (options) {
                            return kendo.stringify(options);
                        }
                    },
                    schema: {
                        data: "data",
                        total: "total",
                        model: {
                            fields: {
                                "id": { type: "number" }, //تعیین نوع فیلد برای جستجوی پویا مهم است
                                "title": { type: "string" },
                                "content": { type: "string" },
                                "imagepath": { type: "string" },
                                "attachmentid": { type: "number" },
                                "createdate": { type: "string" },
                                "publishdate": { type: "date" },
                                "blogtype": { type: "string" },
                                "lastmodified": { type: "date" },
                                "visitcount": { type: "number" },
                                "isarchived": { type: "boolean" },
                                "ispublished": { type: "boolean" },
                                "isdeleted": { type: "boolean" },
                                "tags": { type: "string" }


                            }
                        }
                    },
                    error: function (e) {
                        alert(e.errorThrown);
                    },
                    pageSize: 10,
                    sort: { field: "id", dir: "desc" },
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                });

                $("#report-grid").kendoGrid({
                    dataSource: blogDataSource,
                    autoBind: true,
                    scrollable: false,
                    pageable: true,
                    sortable: true,
                    filterable: true,
                    reorderable: true,
                    columnMenu: true,
                    columns: [
                        { field: "id", title: "شماره", width: "130px" },
                        { field: "title", title: "عنوان مطلب" },
                        { field: "createdate", title: "تاریخ درج" },
                        { field: "publishdate", title: "تاریخ انتشار" },
                        { field: "content", title: "خلاصه مطلب" },
                        { field: "blogtype", title: "نوع" },
                        { field: "lastmodified", title: "آخرین ویرایش" },
                        { field: "visitcount", title: "تعداد بازدید" },
                        {
                            field: "isarchived", title: "آرشیو شده",
                            template: '<input type="checkbox" #= isarchived ? checked="checked" : "" # disabled="disabled" ></input>'
                        },
                        {
                            field: "ispublished", title: "منتشر شده",
                            template: '<input type="checkbox" #= ispublished ? checked="checked" : "" # disabled="disabled" ></input>'
                        }

                    ]
                });
            });
            </script>
        • #
          وحید نصیری وحید نصیری
          ‫۵ سال قبل، دوشنبه ۴ شهریور ۱۳۹۸، ساعت ۰۱:۲۶
          حالت پیش‌فرض serialization نام خواص در ASP.NET Core به صورت camelCase است:

          در این‌حالت نام BlogType می‌شود blogType و نه blogtype. اگر خواستید Pascal Case (شبیه به syntax خواص در #C) شود، از این نکته استفاده کنید.