هدف اصلی در این مقاله ارسال داده 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 در ویژوال استودیو ایجاد کنید. در شکل های زیر روش آن نشان داده شده است :
ایجاد یک کلاس 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 ایجاد کنید.
روش بالا 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>
نتایج در مرورگر
بر روی دکمه ی Export to Excel برای ارسال داده های Grid به صفحه ی excel کلیک کنید.
صفحه Excel
ارسال داده 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
حال میخواهم تعداد بیشتری ورودی با paging به Grid اضافه کنم.
نتایج در مرورگر
نتیجه در صفحه ی ۲
داده ها در صفحه Excel
از نتیجه ی بالامیتوانید مشاهده کنید که ورودی موبایل به دلیل 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 را کار کردیم.
سوالات و نظراتتان را با من در میان بگذارید.
موفق باشید !
زبان فارسی چی ؟من اطلاعاتم فارسی هست و تو اکسل به شکل نا مناسب پاپ میشه فارسی پشتیبانی نمیشه؟
۴
زبان فارسی چی ؟من اطلاعاتم فارسی هست و تو اکسل به شکل نا مناسب چاپ میشه فارسی پشتیبانی نمیشه؟
۵
نو داده اطلاعات رو UTF8 تنظیم کنید.
۵