Arsip
Using JQGrid ASP .Net MVC
After i read Phil Haack about Using jQuery Grid With ASP.NET MVC, i have idea to create my own library to create JQGrid module. Then I search reference to build it. then I’ve got library from trirand . I create this library Base on Trirand JQGrid for MVC Library structure.
I fix some issue in trirand library, among others:
- can filter Null and Not Null data, which is in trirand library is not support
- Optimize data access. using Entity framework and Dynamic Query to access data.
- Add Multiple Row Footer.
- And More…
In this articles i want to share how to make JQGrid ASP .Net MVC.
First… Create New MVC Project
After Create New MVC Project, you should add Aiska Library reference to your project, the library can be download here
Second, add Entity model for Grid.in this case i’m using Northwind database.
After you create entity model for grid lets create the model for grid,
using System;
using System.Collections.Generic;
using Aiska.Web.Jquery;
using System.Web.UI.WebControls;
public class OrderGridModel
{
public Grid OrderGrid { get; set; }
public Grid OrderDetailGrid { get; set; }
public OrderGridModel()
{
OrderGrid = new Grid()
{
Height = Unit.Percentage(100),
ID = "Orders",
Columns = new List<GridColumn>()
{
new GridColumn()
{
DataField = "OrderId",
PrimaryKey = true,
},
new GridColumn()
{
DataField = "RequiredDate",
},
new GridColumn()
{
DataField = "ShippedDate",
},
new GridColumn()
{
DataField = "CompanyName",
},
new GridColumn()
{
DataField = "ShipName",
HeaderText = "Ship To"
}
}
};
OrderDetailGrid = new Grid()
{
ID = "Orders",
Height = Unit.Percentage(100),
Columns = new List<GridColumn>()
{
new GridColumn()
{
DataField = "Product",
},
new GridColumn()
{
DataField = "Price",
TextAlign = Aiska.Web.Jquery.TextAlign.Right,
DataFormatString = "{0:#,##0.00;;-}"
},
new GridColumn()
{
DataField = "Quantity",
TextAlign = Aiska.Web.Jquery.TextAlign.Right
},
new GridColumn()
{
DataField = "Discount",
TextAlign = Aiska.Web.Jquery.TextAlign.Right,
DataFormatString = "{0:#,##0.00;;-}"
},
new GridColumn()
{
DataField = "Total",
TextAlign = Aiska.Web.Jquery.TextAlign.Right,
DataFormatString = "{0:#,##0.00;;-}"
}
}
};
OrderGrid.ClientSideEvents.SubGridRowExpanded = "ShowSubGrid";
OrderGrid.HierarchySettings.HierarchyMode = HierarchyMode.Parent;
OrderGrid.ToolBarSettings.ShowRefreshButton = true;
OrderDetailGrid.HierarchySettings.HierarchyMode = HierarchyMode.Child;
OrderDetailGrid.ToolBarSettings.ShowRefreshButton = true;
OrderDetailGrid.AppearanceSettings.ShowFooter = true;
OrderDetailGrid.AppearanceSettings.FooterRow = 3;
Third, Create Controller for Order Grid
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Aiska.Web.Jquery;
public class OrderController : Controller
{
//
// GET: /Order/
public ActionResult Index()
{
OrderGridModel model = new OrderGridModel();
model.OrderGrid.DataUrl = Url.Action("GetData");
model.OrderDetailGrid.DataUrl = Url.Action("GetDetailData");
return View(model);
}
public JsonResult GetData()
{
OrderGridModel model = new OrderGridModel();
var context = new NORTHWNDEntities();
var data = from o in context.Orders
join c in context.Customers
on o.CustomerID equals c.CustomerID
select new {o.OrderID, o.RequiredDate, o.ShippedDate, c.CompanyName, o.ShipName};
return model.OrderGrid.DataBind(data);
}
public JsonResult GetDetailData(int parentRowId)
{
OrderGridModel model = new OrderGridModel();
model.OrderDetailGrid.DataResolved += new GridDataResolvedEventHandler(GrandTotal);
var context = new NORTHWNDEntities();
var data = from o in context.Order_Details
join p in context.Products
on o.ProductID equals p.ProductID
where o.OrderID == parentRowId
select new OrderDetailModel ()
{
Product = p.ProductName,
Price = (double)o.UnitPrice,
Quantity = o.Quantity,
Discount = (double)o.Discount * (double)o.UnitPrice,
Total = (double)o.Quantity * (double)o.UnitPrice
};
return model.OrderDetailGrid.DataBind(data);
}
void GrandTotal(object sender, GridDataResolvedEventArgs e)
{
GridColumn Price = e.GridModel.Columns.Find(c => c.DataField == "Price");
GridColumn SubTotal = e.GridModel.Columns.Find(c => c.DataField == "Total");
var context = new NORTHWNDEntities();
IQueryable<OrderDetailModel> data = (IQueryable<OrderDetailModel>)e.CurrentData;
double subtotal = data.Sum(c => c.Total);
double discount = data.Sum(c => c.Discount);
Price.FooterValue[0] = "Total: ";
Price.FooterValue[1] = "Discount: ";
Price.FooterValue[2] = "Grand Total: ";
SubTotal.FooterValue[0] = subtotal != 0 ? string.Format("{0:#,###.00;;-}", subtotal) : "-";
SubTotal.FooterValue[1] = discount != 0 ? string.Format("{0:#,###.00;;-}", discount) : "-";
SubTotal.FooterValue[2] = string.Format("{0:#,###.00;;-}", (subtotal - discount));
}
}
Then Create View for Grid
@using Aiska.Web.Mvc
@using Aiska.Web.Jquery
@model MvcMultiRowFooterJQGrid.Models.OrderGridModel
@{
ViewBag.Title = "Multiple Footer Row";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@Html.Aiska().Grid(Model.OrderGrid)
@Html.Aiska().Grid(Model.OrderDetailGrid)
<script type="text/javascript">
function ShowSubGrid(subgrid_id, row_id) {
showSubGrid_Orders(subgrid_id, row_id);
}
</script>
If Success and no error the display should be like this
The Full sample you can download here
please Don’t hesitate to ask in comment or send me mail at aiska_hendra@yahoo.com
I’m sorry for my bad English.
Thank you…
Best Regard,
Aiska Hendra
Senior Developer
Enerren Technologies
ASP .Net MVC : Routing untuk IIS Mode Classic dan Mode Integrated
Model-View-Controller
Didalam ASP.NET MVC, Routing merupakan fitur yang sangat familiar. Dengan menggunakan routing ini maka URL yang akan ditampilkan pada browser menjadi lebih bersih dan mudah. Untuk melakukan konfigurasi rute di dalam ASP.NET MVC sangatlah mudah, kita hanya perlu merubah file global.asax untuk membuat aplikasi dengan URL yang bersih. Namun dalam kebanyakan kasus, kita sering kali mendefinisikan rute ini di IIS 6, IIS 7 (atau IIS 7.5) baik menggunakan mode Classic maupun Integrated. Tapi dalam penerapannya terkadang kita hanya mendefinisikan rute tersebut yang hanya dapat bekerja di IIS 7 mode Integrated. Hal yang sering kali terlewatkan dalam kasus ini adalah penggunaan ekstensi pada IIS 6 tanpa pemetaan wildcardnya.
Masih bingung ya?
Ok, saya coba jabarkan sedikit masalahnya. Kita ingin membuat sebuah applikasi web dimana applikasi yang kita inginkan tersebut mampu berjalan di Server IIS versi manapun dan dengan mode apapun, namun yang terjadi saat ini adalah ASP .NET MVC hanya melakukan generate routing yang sebenarnya dikhususkan untuk IIS 7.0 dengan mode Integrated. Dan masalah yang sering timbul adalah ketika applikasi web tersebut kita tempatkan pada IIS 6.0 dengan mode Classic, namun kita seringkali lupa melakukan mapping untuk masing-masing page, sehingga pada saat applikasi tersebut dijalankan maka muncul Error 404 – File or directory not found.
Dan yang lebih parahnya lagi terkadang kita salah dalam melakukan analisa pesan error tersebut.
Sebenarnya permasalahannya adalah terletak pada IIS, dimana versi lama (IIS 6.0) hanya melakukan pemetaan tertentu pada kerangka ASP.NET. Halaman ini harus untuk URL yang memiliki ekstensi file kanan. Sebagai contoh, halaman untuk index.aspx.
Oleh karena itu, agar ASP.NET Routing bekerja dengan baik, kita harus memodifikasi rute Default sehingga termasuk ekstensi file yang dipetakan ke kerangka ASP.NET. Namun masalah baru yang timbul adalah jika kita memang benar-benar ingin menjalankannya di IIS 7.0 .
Dari kasus diatas saya akan coba membuat sebuah solusi dimana Applikasi Web yang kita buat tersebut dapat berjalan secara berdampingan, apapun versi IIS yang digunakan dan dengan mode apapun juga.
Langkah pertama yang harus dilakukan adalah kita harus membuat 2 route untuk melakukan routing.
' Route name
' URL with parameters
' Parameter defaults
' Constraints
routes.MapRoute("DefaultClassic", "{controller}.aspx/{action}/{id}", New With { _
Key .controller = "Home", _
Key .action = "Index", _
Key .id = UrlParameter.[Optional] _
}, New With { _
Key .mode = New ClassicModeConstraint() _
})
' Route name
' URL with parameters
' Parameter defaults
' Constraints
routes.MapRoute("DefaultIntegrated", "{controller}/{action}/{id}", New With { _
Key .controller = "Home", _
Key .action = "Index", _
Key .id = UrlParameter.[Optional] _
}, New With { _
Key .mode = New IntegratedModeConstraint() _
})
Rute pertama digunakan untuk mode Classic sedangkan yang kedua untuk mode Integrated. Selanjutnya Anda perlu menambahkan pelaksanaan routing tersebut didalam Class.
Public Class ClassicModeConstraint Implements IRouteConstraint Public Function Match(httpContext As HttpContextBase, route As Route, parameterName As String, values As RouteValueDictionary, routeDirection As RouteDirection) As Boolean Return Not HttpRuntime.UsingIntegratedPipeline End Function End Class Public Class IntegratedModeConstraint Implements IRouteConstraint Public Function Match(httpContext As HttpContextBase, route As Route, parameterName As String, values As RouteValueDictionary, routeDirection As RouteDirection) As Boolean Return HttpRuntime.UsingIntegratedPipeline End Function End Class
HttpRuntime.UsingIntegratedPipeline akan mengembalikan nilai true jika aplikasi berjalan pada mode Integrated, dan jika tidak, akan false. Jadi rute untuk mode Integrated hanya cocok saat aplikasi berjalan pada mode Integrated dan rute untuk mode Classic hanya cocok bila aplikasi tidak berjalan pada mode Integrated.
Ok, Selamat mencoba…
ASP .NET MVC
Model-View-Controller (MVC) merupakan pola arsitektur yang memisahkan aplikasi menjadi tiga komponen utama yaitu: model, view(tampilan), dan controller. Framework ASP.NET MVC menyediakan pola alternatif untuk ASP.NET Web Form dalam menciptakan aplikasi Web berbasis MVC. Framework ASP.NET MVC ini sangat ringan dan telah teruji dengan baik (seperti pada aplikasi berbasis Web Form) serta terintegrasi dengan fitur ASP.NET yang ada, seperti halaman induk(Master-Page) dan otentikasi berbasis keanggotaan(Membership). Kerangka MVC didefinisikan dengan nama System.Web.Mvc dan merupakan fundamental serta nerupakan bagian dari namespace System.Web.
MVC adalah pola desain standar yang banyak digunakan dan cukup dikenal dikalangan developer. Beberapa jenis aplikasi Web akan mendapatkan keuntungan dari Framework MVC ini. Orang lain akan terus menggunakan pola aplikasi ASP.NET tradisional yang didasarkan pada Web Form dan Postbacks. Dan jenis lain dari aplikasi Web akan menggabungkan dua pendekatan, pendekatan tidak mengecualikan yang lain.
Kerangka MVC mencakup komponen-komponen berikut:
Model-View-Controller
- Model. Model objek merupakan bagian dari aplikasi yang mengimplementasikan logika untuk aplikasi dan domain data. Sering kali, objek model ini merupakan struktur dari model yang terdapat dalam database. Sebagai contoh, sebuah objek Produk bisa mengambil informasi dari database, memanipulasinya, dan kemudian menulis informasi yang diperbarui kembali ke tabel Produk di SQL Server. Dalam aplikasi kecil, model sering merupakan pemisahan konseptual daripada sebuah fisik. Sebagai contoh, jika aplikasi hanya membaca data menetapkan dan mengirimkannya untuk melihat, aplikasi tidak memiliki lapisan model fisik dan kelas-kelas yang terkait. Dalam hal itu, himpunan data mengambil peran objek model.
- View. View(Tampilan) merupakan komponen yang menampilkan aplikasi antarmuka pengguna (UI). Biasanya, UI diciptakan dari model data. Sebuah contoh akan menjadi mengedit tampilan dari sebuah tabel Produk yang menampilkan kotak teks, drop-down daftar, dan kotak cek berdasarkan kondisi saat ini dari obyek Produk.
- Controllers. Controller merupakan komponen yang menangani interaksi pengguna, bekerja dengan model, dan akhirnya pilih tujuan untuk membuat yang menampilkan UI. Dalam aplikasi MVC, melihat hanya menampilkan informasi; controller menangani dan merespon input pengguna dan interaksi. Sebagai contoh, controller menangani query-string nilai-nilai, dan melewati nilai-nilai ke model, yang pada gilirannya query database dengan menggunakan nilai-nilai tersebut.
Pola MVC ini akan sangat membantu Anda dalam membuat aplikasi yang memisahkan berbagai aspek aplikasi meliputi(logika input, logika bisnis, dan logika UI), dan memberikan kopling longgar antara unsur-unsur tersebut. Pola ini menentukan di mana masing-masing jenis logika harus ditempatkan dalam aplikasi. Logika UI termasuk dalam view. Input logika termasuk dalam controller. Bisnis logika termasuk dalam model. Pemisahan ini akan membantu Anda dalam mengelola kompleksitas ketika Anda membangun aplikasi, karena memungkinkan Anda untuk tetap fokus pada satu aspek dari pelaksanaan pada satu waktu. Sebagai contoh, Anda dapat fokus pada tampilan tanpa tergantung pada logika bisnis.
Selain mengelola kompleksitas sebuah aplikasi, Framework MVC juga dapat membuat arsitektur applikasi dan pengujian applikasi menjadi lebih mudah dibandingkan dengan pola Web Form yang berbasis pada Web ASP.NET. Sebagai contoh, dalam aplikasi Web berbasis ASP.NET Web Form, sebuah kelas tunggal digunakan baik untuk menampilkan output maupun untuk merespon input pengguna. Menulis tes otomatis untuk aplikasi ASP.NET Web Form dapat menjadi kompleks, karena untuk menguji setiap halaman, Anda harus instantiate kelas halaman, semua kontrol anaknya, dan tergantung kelas tambahan dalam aplikasi. Karena begitu banyak kelas yang dipakai untuk menjalankan halaman, akan sulit untuk menulis tes yang secara eksklusif memfokuskan pada bagian-bagian individual aplikasi. Pengujian aplikasi ASP.NET Web Form dapat lebih sulit diterapkan daripada tes dalam aplikasi MVC. Selain itu, tes dalam aplikasi Web Form ASP.NET memerlukan server Web. Framework MVC memisahkan komponen dan memanfaatkan antarmuka dengan baik, yang memungkinkan untuk menguji komponen individu di isolasi dari sisa Framework.
Pemisahan antara tiga komponen utama aplikasi MVC juga mempromosikan pembangunan secara paralel. Misalnya, programmer pertama dapat bekerja pada sisi tampilan(View), dan programmer kedua dapat bekerja pada logika controller, dan programmer ketiga dapat fokus pada logika bisnis dalam model.
Memutuskan Kapan Buat Aplikasi MVC
Sebelum anda memutuskan membuat arsitektur Applikasi Web, Anda harus mempertimbangkannya dengan hati-hati apakah untuk mengimplementasikannya menggunakan Framework ASP.NET Web Form atau ASP.NET MVC. Framework MVC tidak menggantikan model Web Form, Anda dapat menggunakan salah satu framework untuk aplikasi Web. (Jika Anda memiliki aplikasi yang ada berbasis Web Form, sebaiknya teruskan menggunakan model Web Form.)
Sebelum Anda memutuskan untuk menggunakan Framework MVC atau model Web Form untuk Applikasi Web anda, sebaiknya anda mempertimbangkan keuntungan dan kelemahan dari pendekatan masing-masing.
Keuntungan dari sebuah Aplikasi Web-Based MVC
Kerangka ASP.NET MVC menawarkan keuntungan sebagai berikut:
- Mempermudah pengelolaan kompleksitas applikasi dengan membagi aplikasi ke dalam model, tampilan, dan controller.
- Tidak menggunakan tampilan bentuk state atau form berbasis server. Hal ini membuat Framework MVC sangat ideal untuk programmer yang ingin kontrol penuh atas perilaku aplikasi.
- Menggunakan pola Front Controller bahwa proses permintaan Web aplikasi melalui pengontrol tunggal. Hal ini memungkinkan Anda untuk merancang sebuah aplikasi yang mendukung infrastruktur routing.
- Menyediakan dukungan yang lebih baik untuk pengembangan ujicoba langsung (TDD).
- Bekerja dengan lebih baik untuk aplikasi Web yang didukung oleh tim besar pengembang dan desainer web yang membutuhkan tingkat kontrol yang tinggi terhadap perilaku aplikasi.
Keuntungan dari Aplikasi Web-Based ASP .NET Web Form
Framework berbasis Web Form menawarkan keuntungan sebagai berikut:
- Mendukung model berbasis event yang disediakan dalam state melalui HTTP, yang menguntungkan line-of-bussiness pengembangan aplikasi Web. Penggunaan Framework berbasis Web Form jug menyediakan banyak event dan didukung oleh ratusan kontrol server.
- Menggunakan pola Page Controller yang menambahkan fungsionalitas untuk setiap halaman.
- Menggunakan view state atau server berbasis Form, yang dapat membuat informasi lebih mudah mengelola state.
- Ia bekerja dengan baik untuk tim kecil dari pengembang dan perancang Web yang ingin mengambil keuntungan dari banyak komponen yang tersedia untuk pengembangan aplikasi yang cepat.
- Secara umum, kurang kompleks untuk pengembangan aplikasi, karena komponen (kelas Page, kontrol, dan sebagainya) yang terintegrasi dan biasanya membutuhkan kode kurang dari model MVC.
Fitur dari ASP.NET MVC Framework
Framework ASP.NET MVC menyediakan fitur berikut:
- Pemisahan tugas aplikasi secara default (logika input, logika bisnis, dan logika UI), testability, dan pengembangan ujicoba langsung (TDD). Semua core dalam Framework MVC adalah antarmuka terdesign dan dapat diuji dengan menggunakan objek tiruan, yang disimulasikan kedalam objek tiruan dari perilaku objek aktual dalam aplikasi. Anda dapat melakukan unit-test aplikasi tanpa harus menjalankan pengendali dalam suatu proses ASP.NET, yang membuat unit pengujian cepat dan fleksibel. Anda dapat menggunakan kerangka pengujian unit kerja yang kompatibel dengan .NET Framework.
- Sebuah kerangka extensible dan pluggable. Komponen kerangka ASP.NET MVC dirancang sedemikian rupa sehingga dapat dengan mudah diganti atau disesuaikan. Anda dapat melihat plug di mesin Anda sendiri, kebijakan routing URL, tindakan-metode serialisasi parameter, dan komponen lainnya. Kerangka ASP.NET MVC juga mendukung penggunaan Dependensi Injection (DI) dan Inversi dari Control (IOC) model kontainer. DI memungkinkan Anda untuk menyuntikkan objek ke dalam kelas, bukan mengandalkan kelas untuk membuat obyek itu sendiri. IOC menetapkan bahwa jika objek memerlukan objek lain, objek pertama-tama harus mendapatkan obyek kedua dari sumber luar seperti file konfigurasi. Hal ini membuat pengujian mudah.
- Sebuah komponen pemetaan URL yang kuat sehingga memungkinkan Anda membangun aplikasi yang mudah dipahami dan URL tidak perlu menyertakan ekstensi file-nama, dan dirancang untuk mendukung penamaan pola URL yang bekerja dengan baik untuk optimasi search engine (SEO) dan representational state transfer (REST) addressing.
- Dukungan untuk menggunakan markup yang ada halaman ASP.NET (. ASPX file), pengguna kontrol (.ascx file), dan halaman master (.master file). File markup sebagai tampilan template. Anda dapat menggunakan fitur yang ada dengan Framework ASP.NET MVC, seperti halaman master bersarang, ekspresi di-line (<%= %>), kontrol server deklaratif, template, data-mengikat, lokalisasi, dan sebagainya.
- Dukungan untuk fitur ASP.NET yang ada. ASP.NET MVC memungkinkan Anda menggunakan fitur seperti otentikasi bentuk dan otentikasi Windows, otorisasi URL, keanggotaan dan peran, output dan data caching, sesi dan manajemen negara profil, pemantauan kesehatan, sistem konfigurasi, dan arsitektur operator.
Aiska Hendra Blog 