ASP.NET
Network Akademi

Met Hostimg

“Bilgi paylaşıldıkça artar” sloganı ile .NET Platformuna ilişkin birikimlerin paylaşıldığı ASP.NET.TR Topluluğunda sizde “YAZAR” olmak için ; info@asp.net.tr e-mail adresine kendinizi anlatan bir e-mail göndererek başvuruda bulunabilirsiniz.

Asp.Net MVC Grid Düzenleme

Veysel Uğur KIZMAZ
MVC
13.08.2011 16:52:34
Hit : 3667

Önceki makalemizde JQuery Grid’ine nasıl veri yerleştirebileceğimizi incelemiştik. Bu makalemizde ise JQuery Grid’inde edit işlemi nasıl olacak? İnceleyelim.

Yukarıdaki linkten bir önceki makalemize ulaşarak JQuery Grid’ine veri yerleştirme işlemini inceleyebilirsiniz. Şimdi aynı uygulama üzerinden devam edelim ve griddeki veriyi nasıl düzenleyeceğimizi inceleyelim.

Örnek uygulamamızda grid’in editable özelliğini nasıl oluşturacağımızı, veri düzenlendiğinde bu veriye nasıl erişeceğimizi inceleyelim.

 Index.cshtml dosyamızın kodunun eski hali (edit yokken) aşağıdaki gibiydi.

@{

    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>

 

Şimdi kodumuzda aşağıdaki düzenlemeleri yapalım.

1. forcefit:true -> Satırların seçilmesine izin veriyoruz.

2. cellEdit:true -> Seçilen hücrenin düzenlenmesine izin veriyoruz.

3. cellSubmit:’clientArray’ -> Eleman düzenlenmesi client tarafında yapılsın diyoruz.

4. afterEditCell -> Kayıt düzenlendikten hemen sonra çalışan method

5. afterSaveCell -> Kayıt düzenlenmesi için tıklandığı anda çalışan method

Şimdi kodumuza bu elemanları ekleyelim.

@{

    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', editable: true },

          { name: 'Fiyat', index: 'Fiyat', width: 100, align: 'left', editable: true, editrules: { number: true}}],

            pager: jQuery('#pager'),

            rowNum: 10,

            rowList: [5, 10, 20, 50],

            sortname: 'Id',

            sortorder: "desc",

            forceFit: true,

            cellEdit: true,

            cellsubmit: 'clientArray',

            viewrecords: true,

            imgpath: './../Content/jqqrid/themes/images',

            caption: 'Ürün Listesi',

            afterEditCell: function (id, name, val, iRow, iCol) {

                alert("Edit\nname = " + name + "\nval = " + val + "\niRow = " + iRow + "\niCol = " + iCol);

            },

            afterSaveCell: function (rowid, name, val, iRow, iCol) {

                alert("Save\nname = " + name + "\nval = " + val + "\niRow = " + iRow + "\niCol = " + iCol);

            }

        });

    });

</script>

 

<table id="urunliste" class="scroll" cellpadding="0" cellspacing="0"></table>

<div id="pager" class="scroll" style="text-align:center;"></div>

 

afterEditCell methodunda Edit satırıyla başlayan ve kayıt bilgilerini gösteren bir uyarı mesajı, afterSaveCell methodunda Save satırıyla başlayan ve kayıt bilgilerini gösteren bir uyarı mesajının gelmesini bekelyeceğiz. Kayıt işlemlerini düzenler düzenlemez yapmak istiyorsak bu methodları kullanabilmekteyiz.

 Kola kaydına düzenlemek için tıklayalım. 

Kaydı düzenleyelim ve Fiyat bilgisini düzenlemek için Fiyat’a tıklaylım.

 UrunAd bilgisini değiştirdikten sonra düzenleme yapıldığı için Fiyat alanına geçmeden önce Save uyarısı geldi. Ardından Fiyat alanının bilgileri gelecektir.

 

 

 

Veysel Uğur KIZMAZ

Bilgisayar Mühendisi

veysel@ugurkizmaz.com

www.ugurkizmaz.com

 


Tag asp.net » mvc » jquery » grid » update


BU İÇERİĞE YORUMDA BULUNUN


Bu MAKALE'ye yorum yapabilmek için Üye olmalısınız ...!


BU İÇERİĞE YAPILAN YORUMLAR