TechNet
Products
IT Resources
Downloads
Training
Support
Products
Windows
Windows Server
System Center
Microsoft Edge
Office
Office 365
Exchange Server
SQL Server
SharePoint Products
Skype for Business
See all products »
Resources
Channel 9 Video
Evaluation Center
Learning Resources
Microsoft Tech Companion App
Microsoft Technical Communities
Microsoft Virtual Academy
Script Center
Server and Tools Blogs
TechNet Blogs
TechNet Flash Newsletter
TechNet Gallery
TechNet Library
TechNet Magazine
TechNet Wiki
Windows Sysinternals
Virtual Labs
Solutions
Networking
Cloud and Datacenter
Security
Virtualization
Updates
Service Packs
Security Bulletins
Windows Update
Trials
Windows Server 2016
System Center 2016
Windows 10 Enterprise
SQL Server 2016
See all trials »
Related Sites
Microsoft Download Center
Microsoft Evaluation Center
Drivers
Windows Sysinternals
TechNet Gallery
Training
Expert-led, virtual classes
Training Catalog
Class Locator
Microsoft Virtual Academy
Free Windows Server 2012 courses
Free Windows 8 courses
SQL Server training
Microsoft Official Courses On-Demand
Certifications
Certification overview
Special offers
MCSE Cloud Platform and Infrastructure
MCSE: Mobility
MCSE: Data Management and Analytics
MCSE Productivity
Other resources
Microsoft Events
Exam Replay
Born To Learn blog
Find technical communities in your area
Azure training
Official Practice Tests
Support options
For business
For developers
For IT professionals
For technical support
Support offerings
More support
Microsoft Premier Online
TechNet Forums
MSDN Forums
Security Bulletins & Advisories
Not an IT pro?
Microsoft Customer Support
Microsoft Community Forums
Sign in
Home
Library
Wiki
Learn
Gallery
Downloads
Support
Forums
Blogs
Resources For IT Professionals
United States (English)
Россия (Pусский)
中国(简体中文)
Brasil (Português)
Skip to locale bar
Post an article
Translate this page
Powered by
Microsoft® Translator
Wikis - Page Details
First published by
Veysel Ugur KIZMAZ
When:
4 Jun 2013 1:58 AM
Last revision by
Veysel Ugur KIZMAZ
When:
4 Jun 2013 11:19 AM
Revisions:
2
Comments:
0
Options
Subscribe to Article (RSS)
Share this
Can You Improve This Article?
Positively!
Click Sign In to add the tip, solution, correction or comment that will help other users.
Report inappropriate content using
these instructions
.
Wiki
>
TechNet Articles
>
Asp.Net MVC JQuery Grid Kullanımı (tr-TR)
Asp.Net MVC JQuery Grid Kullanımı (tr-TR)
Article
History
Asp.Net MVC JQuery Grid Kullanımı (tr-TR)
Bu yazımızda Asp.Net MVC ile JQuery Grid’ine nasıl veri yerleştirebileceğimizi inceleyelim.
Projemize başlamadan önce aşağıdaki linkten JQuery Grid dosyalarımızı indirelim. Yeni bir Asp.Net MVC (Empty) Web Application oluşturalım ve bu uygulamada “Scripts” klasörünün altına jqgrid klasörü oluşturalım ve zipten çıkardığımız dosyaları aşağıdaki gibi yerleştirelim.
Uygulamamızda Action methodumuzda ürün listesi oluşturacağız ve bu listeyi JSon formatına dönüştürüp JQuery ile ekranda göstereceğiz.
Öncelikle Models klasörünün altında UrunModel isminde bir ürün modeli oluşturalım.
UrunModel.cs
public
class
UrunModel
{
public
int
UrunId {
get
;
set
; }
public
string
UrunAd {
get
;
set
; }
public
double
Fiyat {
get
;
set
; }
}
Verilerimizi gride yerleştirmek için gridin istediği bir veri formatı bulunmaktadır. Ürünlerimizi bu formata göre View’a göndereceğiz. Formatımız için de bir model oluşturalım.
JSonGridModel.cs
public
class
JSonGridModel
{
public
int
id {
get
;
set
; }
public
object
[] cell {
get
;
set
; }
}
Şimdi HomeController altında Index()
Action’ı
ve
View’ını
oluşturalım. Ayrıca bir de
Getir_Urunler
isminde bir Action oluşturalım fakat bunun View’ını
OLUŞTURMAYALIM
. Çünkü bu Action’da sadece JQuery ile ürün listesi alma işlemini gerçekleştireceğiz.
HomeController.cs
public
class
HomeController
:
Controller
{
public
ActionResult
Index()
{
return
View();
}
public
ActionResult
Getir_Urunler()
{
List
<
UrunModel
> urunler =
new
List
<
UrunModel
>()
{
new
UrunModel
{UrunId = 1, UrunAd =
"Kola"
, Fiyat = 1.5},
new
UrunModel
{UrunId = 2, UrunAd =
"Meyve Suyu"
, Fiyat = 1},
new
UrunModel
{UrunId = 3, UrunAd =
"Su"
, Fiyat = 0.5},
new
UrunModel
{UrunId = 4, UrunAd =
"Ayran"
, Fiyat = 1.5},
new
UrunModel
{UrunId = 5, UrunAd =
"Gazoz"
, Fiyat = 1}
};
var
gridData = (
from
u
in
urunler
select
new
JSonGridModel
{
id = u.UrunId,
cell =
new
object
[] { u.UrunId, u.UrunAd, u.Fiyat }
}).ToArray();
var
jSonData =
new
{
total = 1,
page = 1,
records = 5,
rows = gridData
};
return
Json(jSonData,
JsonRequestBehavior
.AllowGet);
}
}
Getir_Urunler() Action’ını inceleyelim. Burada List<UrunModel> türünde bir liste oluşturduk. Bunun yerine veritabanından da ürün listesini çekebiliriz. gridData değişkenimizde, az önce bahsettiğimiz durum (gride veri göndermek için verimizi belirli bir formata dönüştürmemiz gerekiyor) gerçekleştirilmektedir. Verimizi JSonGridModel türünde bir diziye dönüştürdük.
jSonData değişkenimizde ise geri döndüreceğimiz JSon verimizi belirliyoruz.
return Json() methodu ile de verimizi Json formaına dönüştürüyoruz.
Şimdi Index.cshtml dosyamıza gidelim ve gride verimizi göstermek için kodlarımızı şu şekilde düzenleyelim.
Index.cshtml
@{
Layout =
"~/Views/Shared/_Layout.cshtml"
;
}
<
link
href
="../../Scripts/jqgrid/themes/ui.jqgrid.css"
rel
="stylesheet"
type
="text/css"
/>
<
link
href
="../../Scripts/jqgrid/themes/redmond/jquery-ui-1.8.2.custom.css"
rel
="stylesheet"
type
="text/css"
/>
<
script
src
="../../Scripts/jqgrid/js/jquery-1.5.2.min.js"
type
="text/javascript"></
script
>
<
script
src
="../../Scripts/jqgrid/js/jquery.jqGrid.min.js"
type
="text/javascript"></
script
>
<
script
src
="../../Scripts/jqgrid/src/jqModal.js"
type
="text/javascript"></
script
>
<
script
src
="../../Scripts/jqgrid/src/jqDnR.js"
type
="text/javascript"></
script
>
<
script
type
="text/javascript">
jQuery(document).ready(
function
() {
jQuery(
"#urunliste"
).jqGrid({
url:
'/Home/Getir_Urunler/'
,
datatype:
'json'
,
mtype:
'GET'
,
colNames: [
'UrunId'
,
'UrunAd'
,
'Fiyat'
],
colModel: [
{ name:
'UrunId'
, index:
'UrunId'
, width: 100, align:
'left'
},
{ name:
'UrunAd'
, index:
'UrunAd'
, width: 200, align:
'left'
},
{ name:
'Fiyat'
, index:
'Fiyat'
, width: 100, align:
'left'
}],
pager: jQuery(
'#pager'
),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname:
'Id'
,
sortorder:
"desc"
,
viewrecords:
true
,
imgpath:
'./../Content/jqqrid/themes/images'
,
caption:
'Ürün Listesi'
});
});
</
script
>
<
table
id
="urunliste"
class
="scroll"
cellpadding
="0"
cellspacing
="0"></
table
>
<
div
id
="pager"
class
="scroll"
style
="
text-align
:center;"></
div
>
1.
CSS ve JavaScript dosyalarımızı sayfamıza yüklüyoruz.
2.
urunliste isminde bir tablo oluşturuyoruz ve bu tabloya jQuery ile erişiyoruz.
3.
url: parametresi ile veriyi alacağımız Action’ı seçiyoruz.
4.
datatype: parametresi ile alacağımız veri türünü belirliyoruz (json ya da xml)
5.
colNames: parametresi ile sütunlarımızın isimlerini belirliyoruz.
6.
colModel: parametresi ile sütunlarımızın, gelen veriyle bağlantısını oluşturuyoruz.
7.
pager: parametresi ile sayfalama alanının nerede olacağı bilgisini belirliyoruz.
8.
rowNum: parametresi ile sayfada kaç satır olacağını belirliyoruz.
9.
rowList: parametresi ile sayfada kaçar tane satır gösterilebileceğini belirliyoruz.
10.
sortname: parametresi ile neye göre sıralama yapılacağını belirliyoruz.
11.
sortorder: parametresi ile sıralama türünü belirliyoruz.
12.
viewrecords: parametresi ile kayıtların ekranda gösterileceğini belirliyoruz.
13.
imgpath: parametresi ile temamızın resim klasörünü belirliyoruz.
14.
caption: parametresi ile gridin başlığını belirliyoruz.
Projeyi çalıştıralım ve nasıl bir sonuç alacağımızı inceleyelim.
Chrome Javascript konsolundan ya da FireBug’dan gelen giden verimizi incelediğimizide Javascript’in şu şekilde çalıştığını göreceğiz:
Verinin alınması için gidilen yol:
http://localhost:2097/Home/Getir_Urunler/?_search=false&nd=1304260839139&rows=10&page=1&sidx=Id&sord=desc
Alınan veri:
{"total":1,"page":1,"records":5,"rows":[{"id":1,"cell":[1,"Kola",1.5]},{"id":2,"cell":[2,"Meyve Suyu",1]},{"id":3,"cell":[3,"Su",0.5]},{"id":4,"cell":[4,"Ayran",1.5]},{"id":5,"cell":[5,"Gazoz",1]}]}
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com
ASP.NET MVC 4
,
asp.net mvc grid
,
asp.net mvc jquery
,
JQuery
,
jquery grid
,
tr-TR
[Edit tags]
Leave a Comment
Please add 2 and 8 and type the answer here:
Post
Wiki - Revision Comment List(Revision Comment)
Wikis - Comment List