ورود / ثبت نام
0
0

ارسال داده Grid به Excel در Kendo UI با استفاده از MVC Web API

325 بازدید
Excel در Kendo UI

Excel در Kendo UI

هدف اصلی در این مقاله ارسال داده Grid به Excel در Kendo UI با استفاده MVC Web API و Entity Framework می باشد. احتیاجات ما برای این هدف ، ویژوال استودیوی ۲۰۱۰ و بالاتر ، SQL Server 2008 و بالاتر و همچنین Fiddler/Postman برای تست کردن آن است. همچنین دانش مورد نیاز برای این مقاله دانستن پایه ای از ساختار MVC ، ASP.NET Web API و jQuery می باشد.

Excel در Kendo UI

بیاید با ایجاد یک سرویس REST با استفاده از Web API شروع کنیم.

فقط یک پروژه Web API در ویژوال استودیو ایجاد کنید. در شکل های زیر روش آن نشان داده شده است :

Excel در Kendo UI

Excel در Kendo UI

ایجاد یک کلاس Model

بر روی فولدر Model راست کلیک کنید و یک کلاس ایجاد کنید. من نام Product را برای آن قرار داده ام.

کد های زیر را در این کلاس Model وارد کنید :

public class Product  
{  
    [Key]  
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]    
    public int ProductID { get; set; }  
    [Required]  
    public string ProductName { get; set; }  
    [Required]  
    public string UnitPrice { get; set; }  
}  

در اینجا من از تکنیک Entity Framework Code first استفاده میکنم پس نیاز داریم که کلاس Context را ایجاد کنیم.

بر روی فولدر Model و یک کلاس دیگر ایجاد کنید. من نام آن را ProductContext قرار داده ام.

کد های زیر را نیز برای این کلاس وارد کنید :

public class ProductContext:DbContext  
{  
    public ProductContext() : base("name=TestConnection") {  }  
    public DbSet<Product> Products { get; set; }  
  
}  

انجام Scaffolding برای کلاس کنترلر Web API

نکته : پیش از انجام Scaffolding یک بار برنامه را Build کنید.

بر روی فولدر Controller راست کلیک کنید و سپس گزینه ی Add و پس از آن Controller و آنگاه با توجه به تصاویر زیر یک کلاس Web API ایجاد کنید.

Excel در Kendo UI

Excel در Kendo UI

روش بالا Scaffold مربوط به سرویس RESTfull را در ProductsController.cs انجام میدهد.

شما مقداری HTTP از پیش تعریف شده ی درخواست ها و واکنش های GET,POST,PUT,DELETE در کنترلر products دریافت خواهید کرد. کد ها را بر اساس نیاز هایتان از برنامه تغییر دهید. برای این مثال من کد ها را تغییری نمیدهم.

اکنون سرویس REST ایجاد شده است. حال زمان آن است که یک Kendo UI GridView برای مصرف سرویس ها ایجاد میکنیم.

پیش از اجرای سرویس در Kendo UI یک بار آن را در Postman/Fiddler را چک کنید.

استفاده از یک Kendo Grid با remote binding

یک صفحه ی HTML در پروژه تان ایجاد کنید. من نام GridtoExcel.htmlرا برای آن قرار داده ام.

طراحی GridtoExcel.html

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
    <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
    <title></title>  
</head>  
<body>  
    <div class="container" id="example">  
        <div class="row">  
  
            <div id="test-grid" data-role="grid"  
                 data-scrollable="true"  
                 data-editable="false"  
                 data-selectable="true"  
                 data-toolbar="['excel']"  
                 data-excel='{fileName: "ProductDetail.xlsx"}'  
                 data-columns="[  
  
                       { 'field': 'ProductName','width':'100px' },  
                    { 'field': ' UnitPrice','width':'100px'},  
                 ]"  
                 data-pageable='true'  
                 data-bind="source:products"  
                     style="height: 300px"></div>  
  
        </div>  
        </div></body>  
</html>  

جاوا اسکریپت با مدل MVVM

<script>    
var viewModel = kendo.observable({    
isVisible: true,    
products: new kendo.data.DataSource({    
schema: {    
model: {    
id: "ProductID",    
fields: {    
ProductName: { type: "string" },    
UnitPrice: { type: "string" }    
}    
}    
},    
batch: true,    
transport: {    
read: {    
url: "api/Products",    
dataType: "json"    
},    
parameterMap: function (options, operation) {    
if (operation !== "read" && options.models) {    
return { models: kendo.stringify(options.models) };    
}    
}    
}    
})    
});    
kendo.bind($("#example"), viewModel);    
</script> 

نتایج در مرورگر

Excel در Kendo UI

بر روی دکمه ی Export to Excel برای ارسال داده های Grid به صفحه ی excel کلیک کنید.

صفحه Excel

Excel در Kendo UI

ارسال داده Grid به Excel همراه با فیلتر

طراحی GridtoExcel.html

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
    <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
    <title></title>  
</head>  
<body>  
    <div class="container" id="example">  
        <div class="row">  
  
            <div id="test-grid" data-role="grid"  
                 data-scrollable="true"  
                 data-editable="false"  
                 data-selectable="true"  
                 data-toolbar="['excel']"  
                 data-excel='{fileName: "ProductDetail.xlsx",filterable:"true"}'  
                 data-columns="[  
  
                       { 'field': 'ProductName','width':'100px' },  
                    { 'field': ' UnitPrice','width':'100px'},  
                 ]"  
                 data-pageable='true'  
                 data-bind="source:products"  
                     style="height: 300px"></div>  
  
        </div>  
        </div>  
</body>  
</html>  

جاوا اسکریپت با مدل MVVM

var viewModel = kendo.observable({    
isVisible: true,    
products: new kendo.data.DataSource({    
schema: {    
model: {    
id: "ProductID",    
fields: {    
ProductName: { type: "string" },    
UnitPrice: { type: "string" }    
}    
}    
},    
batch: true,    
transport: {    
read: {    
url: "api/Products",    
dataType: "json"    
},    
parameterMap: function (options, operation) {    
if (operation !== "read" && options.models) {    
return { models: kendo.stringify(options.models) };    
}    
}    
}    
})    
});    
kendo.bind($("#example"), viewModel); 

نتایج در مرورگر

Excel در Kendo UI

صفحه Excel

Excel در Kendo UI

Excel در Kendo UI

حال میخواهم تعداد بیشتری ورودی با paging به Grid اضافه کنم.

نتایج در مرورگر

Excel در Kendo UI

نتیجه در صفحه ی ۲

Excel در Kendo UI

داده ها در صفحه Excel

Excel در Kendo UI

از نتیجه ی بالامیتوانید مشاهده کنید که ورودی موبایل به دلیل Paging در صفحه ی Excel گم شده است.

برای حل این مشکل نیاز به استفاده خاصیت allPages داریم

طراحی GridtoExcel.html

<div class="container" id="example">  
<div class="row">  
<div id="test-grid" data-role="grid"  
data-scrollable="true"  
data-editable="false"  
data-selectable="true"  
data-toolbar="['excel']"  
data-excel='{fileName: "ProductDetail.xlsx",filterable:"true",allPages:"true"}'  
data-columns="[  
{ 'field': 'ProductName','width':'100px' },  
{ 'field': ' UnitPrice','width':'100px'},  
]"  
data-pageable='true'  
data-bind="source:products"  
style="height: 300px"></div>  
</div>  
</div>  
</div>

جاوا اسکریپت در مدل MVVM

var viewModel = kendo.observable({    
isVisible: true,    
products: new kendo.data.DataSource({    
schema: {    
model: {    
id: "ProductID",    
fields: {    
ProductName: { type: "string" },    
UnitPrice: { type: "string" }    
}    
}    
},    
batch: true,    
pageSize:5,    
transport: {    
read: {    
url: "api/Products",    
dataType: "json"    
},    
parameterMap: function (options, operation) {    
if (operation !== "read" && options.models) {    
return { models: kendo.stringify(options.models) };    
}    
}    
}    
})    
});    
kendo.bind($("#example"), viewModel);

با مشاهده ی نتیجه ی بالا میتوان دید که همه ی مشکلات ورودی با استفاده از خاصیت allPages برطرف شده است.

جمع بندی

در این مقاله با هم روش ازسال داده Grid به صفحه Excel در Kendo UI با استفاده از MVC Web API و Entity Framework را کار کردیم.

سوالات و نظراتتان را با من در میان بگذارید.

موفق باشید !

آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=15933
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

3 نظر در مورد ارسال داده Grid به Excel در Kendo UI با استفاده از MVC Web API

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *