ASP.NET MVC Hands On Labs (Part2 – Membuat Model dan Controller)

Tutorial ini adalah sambungan dari Hands On Labs ASP.NET MVC Part1

Membuat Product Repository

Pada small application tidak menjadi masalah jika kita mengakses LINQ to SQL DataContex class langsung dari Controller, namun jika aplikasinya bertambah kompleks maka akan sulit untuk di maintain dan melakukan tes terhadap kode-kode tersebut, akan terjadi duplikasi banyak code pada aplikasi kita (berlawanan dengan prinsip MVC yaitu DRY = Don’t Repeat Yourself).
Teknik yang dapat digunakan untuk membuat aplikasi kita lebih mudah di maintain adalah dengan menggunakan “repository pattern” yaitu membuat repository class yang mengenkapsulasi query dan persistance logic sehingga aplikasi kita menjadi lebih clean.
1.  Tambahkan class baru kedalam folder “Model”, beri nama “ProductRepository.cs”. kemudian tulis kode berikut:

   1: namespace ComputerStore.Models {

   2:     public class ProductRepository {

   3:         StoreDataContext db = new StoreDataContext();

   4:  

   5:         //menampilkan semua product, digunakan pada View Index

   6:         public IQueryable<Product> ShowAllProduct() {

   7:             var query = from p in db.Products

   8:                         orderby p.Id

   9:                         select p;

  10:             return query;

  11:         }

  12:  

  13:         //menambah product baru, digunakan pada View Create

  14:         public void CreateProduct(Product productToCreate) {

  15:             db.Products.InsertOnSubmit(productToCreate);

  16:         }

  17:  

  18:         //mengambil product berdasarkan id tertentu

  19:         public Product ShowProduct(int id) {

  20:             Product prod = db.Products.Where(p => p.Id == id).Single<Product>();

  21:             return prod;

  22:         }

  23:  

  24:         //mengedit product

  25:         public void EditProduct(Product productToEdit) {

  26:             Product prod = db.Products.Where(p => p.Id == productToEdit.Id).Single<Product>();

  27:             prod.Name = productToEdit.Name;

  28:             prod.Price = productToEdit.Price;

  29:             prod.Qty = productToEdit.Qty;

  30:             prod.BuyDate = productToEdit.BuyDate;

  31:         }

  32:  

  33:         //menghapus product

  34:         public void DeleteProduct(int id) {

  35:             Product prod = db.Products.Where(p => p.Id == id).Single<Product>();

  36:             db.Products.DeleteOnSubmit(prod);

  37:         }

  38:  

  39:         public void Save() {

  40:             db.SubmitChanges();

  41:         }

  42:     }

  43: }

2.  StoreDataContext adalah class yang digenerate oleh tools LINQ to SQL Classes, yang berisi object model dari table Products. Untuk mngakses data maka kita menggunakan standar query expression dari LINQ. Query expression tersebut akan diterjemahkan oleh LINQ to SQL menjadi T-SQL sintaks untuk dieksekusi oleh database.

Membuat Controller

Sesudah membuat Model, kemudian langkah selanjutnya adalam membuat Controller. Pada aplikasi MVC, Controller Berisi Control-flow logic. Controller berinteraksi dengan Model dan View untuk mengontrol jalannya aplikasi. 
1.  Pada solution explorer klik kanan folder “Controller”, pilih “Add” – “Controller”, beri nama “Home Controller”, kemudian check pada pilihan “Add action method  for create, update, and details scenario” untuk menambahkan secara otomatis ActionMethod yang akan kita buat untuk menghandle proses CRUD (create, read, update, dan delete) .

2.  Kemudian tambahkan kode berikut pada Controller:

   1: namespace ComputerStore.Controllers

   2: {

   3:     public class HomeController : Controller

   4:     {

   5:         private ProductRepository productRepo = new ProductRepository();

   6:         //

   7:         // GET: /Home/

   8:  

   9:        public ActionResult Index() {

  10:             return View(productRepo.ShowAllProduct());

  11:        }

  12:  

  13:         public ActionResult About() {

  14:             return View();

  15:         }

  16:  

  17:  

  18:         //

  19:         // GET: /Home/Details/5

  20:  

  21:         public ActionResult Details(int id)

  22:         {

  23:             return View();

  24:         }

  25:  

  26:         //

  27:         // GET: /Home/Create

  28:  

  29:         public ActionResult Create()

  30:         {

  31:             return View();

  32:         } 

  33:  

  34:         //

  35:         // POST: /Home/Create

  36:  

  37:         [AcceptVerbs(HttpVerbs.Post)]

  38:         public ActionResult Create([Bind(Exclude="Id")] Product productToCeate)

  39:         {

  40:             if (ModelState.IsValid) {

  41:                 try {

  42:                     // TODO: Add insert logic here

  43:                     productRepo.CreateProduct(productToCeate);

  44:                     productRepo.Save();

  45:                     return RedirectToAction("Index");

  46:                 }

  47:                 catch {}

  48:             }

  49:             return View(productToCeate);

  50:         }

  51:  

  52:         //

  53:         // GET: /Home/Edit/5

  54:  

  55:         public ActionResult Edit(int id)

  56:         {

  57:             return View(productRepo.ShowProduct(id));

  58:         }

  59:  

  60:         //

  61:         // POST: /Home/Edit/5

  62:  

  63:         [AcceptVerbs(HttpVerbs.Post)]

  64:         public ActionResult Edit(Product productToEdit)

  65:         {

  66:             if (ModelState.IsValid) {

  67:                 try {

  68:                     // TODO: Add update logic here

  69:                     productRepo.EditProduct(productToEdit);

  70:                     productRepo.Save();

  71:                     return RedirectToAction("Index");

  72:                 }

  73:                 catch {}

  74:             }

  75:             return View(productToEdit);

  76:         }

  77:  

  78:         public ActionResult Delete(int id) {

  79:             Product prod = productRepo.ShowProduct(id);

  80:             return View(prod);

  81:         }

  82:  

  83:         [AcceptVerbs(HttpVerbs.Post)]

  84:         public ActionResult Delete(int id,string confirmButton) {

  85:             try {

  86:                 productRepo.DeleteProduct(id);

  87:                 productRepo.Save();

  88:             }

  89:             catch {}

  90:             return View("Deleted");

  91:         }

  92:  

  93:     }

  94: }

Kemuadian langkah selanjutnya adalah pembuatan “View” yang akan dijelaskan di bagian selanjutnya ..

ASP.NET MVC Hands On Labs (Part1)

Pada tutorial kali ini saya akan mengajak anda mencoba framework terbaru untuk mengembangkan aplikasi berbasis web menggunakan Model View Controller Pattern yaitu ASP.NET MVC. Tutorial ini berisi langkah-langkah praktis yang disertai studi kasus untuk membangun aplikasi sederhana (katalog product) menggunakan ASP.NET MVC. Selain menggunakan fitur-fitur yang ada di ASP.NET MVC, tutorial ini juga membahas sedikit integrasi ASP.NET MVC dengan salah satu javascript framework yang banyak digunakan yaitu JQuery.

Adapun beberapa software yang harus diinstal untuk menjalankan HOL ini adalah:

  • Visual Studio 2008 SP1
  • ASP.NET MVC 1.0
  • SQL Server Express 2005
  • JQuery 1.3
  • JQuery UI 1.7.1

Topik yang akan dibahas pada contoh ini:

  • Membuat Model (LINQ to SQL)
  • Membuat Class Repository
  • Membuat Controller 
  • Membuat View (Helper, Validation) 
  • Simple JQuery Integration

 

Membuat Database dan Data Model

Pertama kita akan membat database yang akan kita gunakan dalam aplikasi ini, untuk itu ikuti
langkah-langkah dibawah ini:  

1.  Buka VS 2008, kemudian buat project ASP.NET MVC, beri nama “ComputerStore”

image

2.  Kemudian pada Solution Explorer, klik kanan folder “App_Data”

image

3.  Kemudian pada database tambahkan table dengan nama “Products”, dan tambahkan field-field berikut pada table “Products”. 

image

4.  Pada field “Id” ubah property “Identity Specification” menjadi “Yes” untuk menambahkan auto increment pada field tersebut.

image

 

Membuat Data Model (LINQ to SQL)

Setelah kita selesai membuat database, sekarang saatnya melakukan mapping table yang sudah kita buat menjadi object model dengan menggunakan LINQ to SQL. Object model ini akan kita simpan di dalam folder “Model”. Pada aplikasi MVC model berisi semua application logic (bussiness logic, data access logic).
1.  Pada Solution Explorer, klik kanan folder “Model”, kemudian pilih “Add” – “New Item” – pilih
“LINQ to SQL Classes” untuk membuat object model (mapping) secara otomatis. Anda dapat juga menggunakan “SQL Metal” atau melakukan mapping table secara manual.

image 

2.  Beri nama “Store.dbml”. Kemudian drag table “Products” dari server explorer kedalam LINQ to SQL Diagram. Kemudian save.

image

Setelah data model selesai kita buat, maka langkah selanjutnya adalah mendesain Product Repository yang adakan dijelaskan pada blog selanjutnya

Hands On Labs ASP.NET MVC

Hari sabtu kemaren, tanggal 18 april 2009, saya mengisi workshop di Universitas Atmajaya Jogjakarta, topiknya adalah “ASP.NET MVC”, workshop singkat ini berlangsung selama 2.5jam (sesi 1) dan di teruskan sesi 2 tentang “Enterprise Library” oleh Pak Ridi.

Jika anda berminat anda dapat mendownload HOL dan source code dari workshop singkat yang saya bawakan kemaren pada link dibawah ini:

Semoga bisa bermanfaat untuk teman-teman yang ingin mencoba menggunakan aplikasi ASP.NET MVC :)

regards,

Erick Kurniawan

LIstView dan Data Pager Control (bagian 2)

Posting ini adalah lanjutan dari posting sebelumnya di

Topik yang akan dibahas pada posting kali ini:

  • Sorting dengan ListView
  • Edit, Delete data dengan ListView
  • Insert data dengan ListView
  • Sekilas DataPager Control
  • Contoh menggunakan DataPager
  • Custom Paging

Source code untuk contoh-contoh aplikasi dapat anda download di

Sorting Dengan ListView

Anda juga dapat menambahkan sorting pada ListView control dengan cara merubah property ‘CommandName’ menjadi ‘Sort’ dan ‘CommandArgument’ berisi nama kolom untuk yg akan disorting.

Contoh sorting dengan ListView Control (ListSort.aspx)

   1: <form id="form1" runat="server">
   2: <div>
   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"
   4:     ConnectionString="<%$ 
   5:     ConnectionStrings:MhsConnectionString %>"
   6:     SelectCommand="SELECT * FROM 
   7:       Kategori"></asp:SqlDataSource>
   8:    <asp:ListView ID="lvBerita" runat="server"
   9:      DataSourceID="sdsKategori">
  10:      <LayoutTemplate>
  11:       <table border="1px" style="border-collapse:collapse;">
  12:         <thead>
  13:         <tr>
  14:           <th><asp:LinkButton ID="lnkId" Text="ID"
  15:             CommandName="Sort" CommandArgument="id_kat"
  16:             runat="server" /></th>
  17:           <th><asp:LinkButton ID="lnkNama" Text="Nama 
  18:             Kategori" CommandName="Sort"
  19:             CommandArgument="nama_kat"
  20:             runat="server" /></th>
  21:         </tr>
  22:         </thead>
  23:         <tbody>
  24:           <asp:PlaceHolder ID="itemPlaceHolder"
  25:             runat="server" />
  26:         </tbody>
  27:       </table>
  28:      </LayoutTemplate>
  29:      <ItemTemplate>
  30:        <tr>
  31:          <td><%# Eval("id_kat") %></td>
  32:          <td><%# Eval("nama_kat") %></td>
  33:        </tr>
  34:      </ItemTemplate>
  35:    </asp:ListView>
  36: </div>
  37: </form>

image

Edit, Delete, Insert Data dengan ListView

ListView menggunakan tag-tag <EditItemTemplate>, <DeleteItemTemplate>, <InsertItemTemplate> untuk inser, edit, delete data. Didalam tag tersebut anda dapat membuat tampilan ketika tombol edit, insert, atau delete ditekan.

Contoh Edit dan Delete data menggunakan ListView (EditList.aspx)

   1: <form id="form1" runat="server">
   2: <div>
   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"
   4:     ConnectionString="<%$ 
   5:     ConnectionStrings:MhsConnectionString %>"
   6:     SelectCommand="SELECT * FROM [Kategori]"
   7:     DeleteCommand="DELETE FROM [Kategori] 
   8:       WHERE [id_kat] = @id_kat"
   9:     UpdateCommand="UPDATE [Kategori] SET [nama_kat] = 
  10:       @nama_kat WHERE [id_kat] = @id_kat">
  11:     <DeleteParameters>
  12:       <asp:Parameter Name="id_kat" Type="Int32" />
  13:     </DeleteParameters>
  14:     <UpdateParameters>
  15:       <asp:Parameter Name="nama_kat" Type="String" />
  16:       <asp:Parameter Name="id_kat" Type="Int32" />
  17:     </UpdateParameters>
  18:   </asp:SqlDataSource>
  19:   <asp:ListView ID="lvKategori" runat="server"
  20:     DataKeyNames="id_kat" DataSourceID="sdsKategori">
  21:     <LayoutTemplate>
  22:      <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
  23:     </LayoutTemplate>
  24:     <ItemTemplate>
  25:       <div style="border:solid 1px black;width:250px">
  26:         <h3><%# Eval("nama_kat") %></h3>
  27:         <p>Id: <%# Eval("id_kat") %></p><hr />
  28:         <asp:LinkButton id="lnkEdit" Text="{Edit}"
  29:           CommandName="Edit" Runat="server" />
  30:         <asp:LinkButton id="lnkDelete" Text="{Delete}"
  31:           CommandName="Delete" Runat="server"
  32:           OnClientClick="return confirm('Anda yakin 
  33:           mendelete data?')" />
  34:       </div>
  35:     </ItemTemplate>
  36:     <EditItemTemplate>
  37:       <div style="border:solid 1px black;width:250px">
  38:         Nama Kategori :<asp:TextBox ID="txtKat" Text='<%# 
  39:           Bind("nama_kat") %>' runat="server" />
  40:         <asp:RequiredFieldValidator ID="rfvKat"
  41:           runat="server" ControlToValidate="txtKat"
  42:           ErrorMessage="{required}" /><hr />
  43:         <asp:LinkButton id="lnkUpdate" Text="{Update}"
  44:           CommandName="Update" Runat="server" />
  45:         <asp:LinkButton id="lnkCancel" Text="{Cancel}"
  46:           CommandName="Cancel" Runat="server" />
  47:       </div>
  48:       </EditItemTemplate>
  49:   </asp:ListView>
  50: </div>
  51: </form>

image

image

Contoh insert data menggunakan ListView (InsertList.aspx)

   1: <form id="form1" runat="server">
   2: <div>
   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"
   4:     ConnectionString="<%$ 
   5:     ConnectionStrings:MhsConnectionString %>"
   6:     InsertCommand="INSERT INTO [Kategori] ([nama_kat]) 
   7:       VALUES (@nama_kat)"
   8:     SelectCommand="SELECT * FROM [Kategori]">
   9:     <InsertParameters>
  10:       <asp:Parameter Name="nama_kat" Type="String" />
  11:     </InsertParameters>
  12:   </asp:SqlDataSource>
  13:   <asp:ListView ID="lvKategori" runat="server"
  14:     DataSourceID="sdsKategori"
  15:     InsertItemPosition="FirstItem">
  16:   <LayoutTemplate>
  17:     <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
  18:   </LayoutTemplate>
  19:   <ItemTemplate>
  20:    <div style="border:solid 1px black;width:250px">
  21:     <h3><%# Eval("nama_kat") %></h3>
  22:     <p>Id Kategori : <%# Eval("id_kat") %></p><hr />
  23:    </div>
  24:   </ItemTemplate>
  25:   <InsertItemTemplate>
  26:    <div style="border:solid 1px black;width:250px">
  27:      <h3>Tambah Kategori</h3>
  28:      Nama Kategori :<asp:TextBox ID="txtKat" Text='<%# 
  29:        Bind("nama_kat") %>' runat="server" /><hr />
  30:      <asp:LinkButton ID="lnkInsert" Text="{Insert}"
  31:        CommandName="Insert" runat="server" />
  32:    </div>
  33:   </InsertItemTemplate>
  34:   </asp:ListView>
  35: </div>
  36: </form>

image

DataPager Control

DataPager adalah pasangan dari ListView yang digunakan untuk paging halaman. DataPager dapat digunakan oleh semua control yang mengimplementasikan interface IPageableItemContainer. Di ASP.NET 3.5 baru ada satu control yang mengimplementasikan interface tersebut yaitu ListView ^_^

DataPager control mempunyai beberapa property yang penting yaitu:

  • PageSize: jumlah data yang akan ditampilkan.
  • PagedControlId: ambil atau set control pada halaman.
  • Fields: ambil fields yang ada pada DataPager.
  • StartRowIndex: ambil index dari item pertama yang ditampilkan.
  • MaximumRows: ambil maksimum row yang diambil dari data source.
  • TotalRowCount: ambil total number dari items yang ada pada data source.
  • NextPreviousPagerFields : untuk menampilkan link dalam bentuk next, previous, first dan last.
  • NumericPagerFileds: menampilkan link dalam bentuk numeric.
  • TemplatePagerField: membuat custom user interface pada paging.

Contoh menggunakan DataPager (ShowDataPager.aspx)

   1: <form id="form1" runat="server">
   2: <div>
   3:   <asp:SqlDataSource ID="sdsBerita" runat="server"
   4:     ConnectionString="<%$ 
   5:     ConnectionStrings:MhsConnectionString %>"
   6:     SelectCommand="SELECT * FROM 
   7:       [Berita]"></asp:SqlDataSource>
   8:     <asp:ListView ID="lvBerita" runat="server"
   9:       DataSourceID="sdsBerita">
  10:     <LayoutTemplate>
  11:     <table border="2">
  12:     <thead>
  13:       <th>Judul</th><th>Berita</th><th>Tanggal</th>
  14:     </thead>
  15:     <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
  16:     </table>
  17:     <asp:DataPager ID="dpBerita" PageSize="2"
  18:       runat="server">
  19:       <Fields>
  20:         <asp:NextPreviousPagerField
  21:           ShowFirstPageButton="true"
  22:           ShowPreviousPageButton="true"
  23:           ShowNextPageButton="false"
  24:           ShowLastPageButton="false" />
  25:         <asp:NumericPagerField />
  26:         <asp:NextPreviousPagerField
  27:           ShowFirstPageButton="false"
  28:           ShowPreviousPageButton="false"
  29:           ShowNextPageButton="true"
  30:           ShowLastPageButton="true" />
  31:       </Fields>
  32:     </asp:DataPager>
  33:     </LayoutTemplate>
  34:     <ItemTemplate>
  35:       <tr>
  36:         <td><%# Eval("judul_berita") %></td>
  37:         <td><%# Eval("detail_berita") %></td>
  38:         <td><%# Eval("tanggal") %></td>
  39:       </tr>
  40:     </ItemTemplate>
  41:   </asp:ListView>
  42: </div>
  43: </form>

image_thumb3

Membuat Custom Paging

Jika anda tidak puas dengan default paging yang disediakan, anda dapat menggunakan TemplatePagerField.

Contoh menggunakan DataPager TemplatePagerField (PagerTemplate.aspx)

   1: <form id="form1" runat="server">
   2: <div>
   3:   <asp:SqlDataSource ID="sdsBerita" runat="server"
   4:     ConnectionString="<%$ 
   5:     ConnectionStrings:MhsConnectionString %>"
   6:     SelectCommand="SELECT * FROM 
   7:       [Berita]"></asp:SqlDataSource>
   8:    <asp:ListView ID="lvBerita" runat="server"
   9:       DataSourceID="sdsBerita">
  10:     <LayoutTemplate>
  11:      <table border="1">
  12:      <thead>
  13:         <th>Judul</th><th>Berita</th><th>Tanggal</th>
  14:      </thead>
  15:      <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
  16:      </table>
  17:      <asp:DataPager ID="dpBerita" runat="server"
  18:        PageSize="2">
  19:        <Fields>
  20:          <asp:TemplatePagerField
  21:            OnPagerCommand="dpBerita_OnPagerCommand">
  22:          <PagerTemplate>
  23:            <asp:LinkButton ID="lnkPrev" Text="{Prev}"
  24:              CommandName="Previous" runat="server" />
  25:            <asp:LinkButton ID="lnkNext" Text="{Next}"
  26:              CommandName="Next" runat="server" />
  27:          </PagerTemplate>
  28:          </asp:TemplatePagerField>
  29:        </Fields>
  30:      </asp:DataPager>
  31:     </LayoutTemplate>
  32:     <ItemTemplate>
  33:       <tr>
  34:         <td><%# Eval("judul_berita") %></td>
  35:         <td><%# Eval("detail_berita") %></td>
  36:         <td><%# Eval("tanggal") %></td>
  37:       </tr>
  38:     </ItemTemplate>
  39:    </asp:ListView>
  40: </div>
  41: </form>

Kemudian tambahkan kode berikut pada event ‘OnPagerCommand’ pada TemplateFields.

   1: protected void dpBerita_OnPagerCommand(object sender,
   2: DataPagerCommandEventArgs e) {
   3:     e.NewMaximumRows = e.Item.Pager.MaximumRows;
   4:     switch (e.CommandName) {
   5:     case "Previous":
   6:       if (e.Item.Pager.StartRowIndex > 0)
   7:         e.NewStartRowIndex = e.Item.Pager.StartRowIndex - 2;
   8:       break;
   9:     case "Next":
  10:         e.NewStartRowIndex = e.Item.Pager.StartRowIndex + 2;
  11:       break;
  12:     }
  13: }

image_thumb5

Dibandingkan dengan GridView, Kombinasi ListView dan DataPager menawarkan fleksibilitas yang lebih besar kepada programmer untuk memodifikasi tampilan dan program. Secara pribadi saya menyarankan penggunaan dua control baru ini daripada control lama seperti GridView, DataList, atau Repeater.

selesai ^_^

LIstView dan Data Pager Control (bagian 1)

Pada posting kali ini saya ingin membahas fitur yang menurut saya sangat menarik pada ASP.NET 3.5 yaitu ListView dan Data Pager

ListView dan DataPager adalah control baru pada ASP.NET 3.5. ListView adalah control yang amat sangat fleksible, anda dapat menggunakan ListView untuk kasus yang sama seperti ketika anda menggunakan GridView, DataList, FormView, dan Repeater control. Sedangkan DataPager adalah pasangan dari ListView yang digunakan untuk paging data.

Topik yang akan dibahas:

  • Sekilas ListView Control
  • Penggunaan Layout Template dan Item Template
  • Menampilkan tabular data dengan ListView
  • Menggunakan Group Template
  • Membuat Master/Detail dengan ListView

Source code untuk contoh-contoh aplikasi dapat anda download di

ListView Control

Anda dapat membayangkan bahwa LisView adalah GridView control yang amat sangat fleksible. Sama seperti GridView, ListView juga dapat digunakan untuk display, edit, delete select, dan sorting data, bedanya dengan GridView, ListView merupakan control yang berbasis template secara keseluruhan, ListView juga dapat digunakan untuk insert data.

ListView juga mirip dengan DataList karena dapat digunakan untuk menampilkan data yang terdiri dari beberapa kolom. ListView juga mirip dengan Repeater karena semuanya berbasis template.

ListView mempunyai beberapa tempalate yang dapat digunakan diantaranya:

  • LayoutTemplate
  • ItemTemplate
  • GroupTemplate
  • EmptyItemTemplate
  • EmptyDataTemplate
  • SelectedItemTemplate
  • AlternatingItemTemplate
  • EditItemTemplate
  • InsertItemTemplate

Contoh Penggunaan Layout Template dan Item Template (SimpleListView.aspx)

   1: <form id="form1" runat="server">
   2: <div>
   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"
   4:     ConnectionString="<%$ 
   5:     ConnectionStrings:MhsConnectionString %>"
   6:     SelectCommand="SELECT * FROM 
   7:       [Kategori]"></asp:SqlDataSource>
   8:     <asp:ListView ID="lvKategori" runat="server"
   9:       DataSourceID="sdsKategori">
  10:       <LayoutTemplate>
  11:         <div style="border:dotted 1px black; width:200px;">
  12:           <asp:PlaceHolder ID="itemPlaceHolder"
  13:             runat="server" />
  14:         </div>
  15:       </LayoutTemplate>
  16:       <ItemTemplate>
  17:         <div style="border:solid 1px black;">
  18:           <%# Eval("nama_kat") %>
  19:         </div>
  20:         </ItemTemplate>
  21:       <AlternatingItemTemplate>
  22:         <div style="border:solid 1px black; background-
  23:           color:Silver;">
  24:           <%# Eval("nama_kat") %>
  25:         </div>
  26:       </AlternatingItemTemplate>
  27:       <EmptyDataTemplate>
  28:           No Record Found
  29:       </EmptyDataTemplate>
  30:     </asp:ListView>
  31: </div>
  32: </form>

Pada contoh diatas LayoutTemplate digunakan untuk membuat <div> paling luar yang akan berisi semua data yang ditampilkan oleh ListView. LayoutTemplate hanya dirender sekali saja ketika halaman dibuat. Di dalam LayoutTemplate anda perlu menambahkan itemPlaceHolder yang nanti akan diganti oleh tag-tag yang ada dalam ItemTemplate.

ItemTemplate digunakan untuk merender data semua data yang ada pada data source. Jadi bagian yang dijalankan berulang-ulang adalah ItemTemplate sesuai dengan jumlah data yang ada di data source.

AlternatingItemTemplate bersifat opsional, pada program diatas digunakan untuk menampilkan data yang background colornya silver. EmptyDataTemplate akan ditampilkan jika tidak ada data pada data source alias kosong.

image

Jika biasanya anda menampilkan data tabular menggunakan GridView, maka sekarang anda dapat membuat yang lebih fleksible menggunakan  ListView

Contoh menampilkan table pada ListView (TableList.aspx)

   1: <form id="form1" runat="server">
   2: <div>
   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"
   4:     ConnectionString="<%$ 
   5:     ConnectionStrings:MhsConnectionString %>"
   6:     SelectCommand="SELECT * FROM 
   7:      [Kategori]"></asp:SqlDataSource>
   8:     <asp:ListView ID="lvKategori" runat="server"
   9:       DataSourceID="sdsKategori">
  10:      <LayoutTemplate>
  11:       <table border="1px" style="border-collapse:collapse;">
  12:       <thead>
  13:         <tr><td>ID</td><td>Nama Kategori</td></tr>
  14:       </thead>
  15:       <tbody>
  16:         <asp:PlaceHolder ID="itemPlaceHolder"
  17:           runat="server" />
  18:       </tbody>
  19:       </table>
  20:      </LayoutTemplate>
  21:      <ItemTemplate>
  22:        <tr>
  23:          <td><%# Eval("id_kat") %></td>
  24:          <td><%# Eval("nama_kat") %></td>
  25:        </tr>
  26:      </ItemTemplate>
  27:      <EmptyDataTemplate>
  28:             No Record Found
  29:      </EmptyDataTemplate>
  30:     </asp:ListView>
  31: </div>
  32: </form>

image

Menggunakan GroupTemplate

Anda dapat menggunakan ListView GroupTemplate untuk mengelompokan beberapa item. GroupTemplate berguna ketika anda ingin menampilkan multiple column pada ListView.

Contoh menggunakan GroupTemplate (ListGroup.aspx’)

   1: <form id="form1" runat="server">
   2: <div>
   3:   <asp:SqlDataSource ID="sdsPhoto" runat="server"
   4:     ConnectionString="<%$ 
   5:     ConnectionStrings:MhsConnectionString %>"
   6:     SelectCommand="SELECT * FROM 
   7:       [Photo]"></asp:SqlDataSource>
   8:   <asp:ListView ID="lvPhoto" runat="server"
   9:     GroupItemCount="3" DataSourceID="sdsPhoto">
  10:    <LayoutTemplate>
  11:     <asp:PlaceHolder ID="groupPlaceHolder" runat="server" />
  12:    </LayoutTemplate>
  13:    <GroupTemplate>
  14:    <div>
  15:      <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
  16:    </div>
  17:    </GroupTemplate>
  18:    <ItemTemplate>
  19:      <asp:Image ID="imgPhoto" Width="200px" ImageUrl='<%# 
  20:        Eval("namafile","~/Photo/{0}") %>' runat="server" />
  21:    </ItemTemplate>
  22:   </asp:ListView>
  23: </div>
  24: </form>

image

Contoh Membuat Master Details dengan ListView (ListMasterDetail.aspx)

   1: <form id="form1" runat="server">
   2: <div>
   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"
   4:     ConnectionString="<%$    
   5:     ConnectionStrings:MhsConnectionString %>"
   6:     SelectCommand="SELECT * FROM 
   7:       [Kategori]"></asp:SqlDataSource>
   8:   <asp:SqlDataSource ID="sdsBerita" runat="server"
   9:     ConnectionString="<%$ 
  10:     ConnectionStrings:MhsConnectionString %>"
  11:     SelectCommand="SELECT * FROM [Berita] 
  12:       WHERE ([id_kat] = @id_kat)">
  13:     <SelectParameters>
  14:     <asp:ControlParameter ControlID="lvKategori"
  15:       Name="id_kat" />
  16:     </SelectParameters>
  17:   </asp:SqlDataSource>
  18:   <asp:ListView ID="lvKategori" runat="server"
  19:     DataSourceID="sdsKategori" DataKeyNames="id_kat">
  20:     <LayoutTemplate>
  21:      <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
  22:     </LayoutTemplate>
  23:     <ItemTemplate>
  24:       <div>
  25:       <asp:LinkButton ID="lnkSelect" Text='<%# 
  26:         Eval("nama_kat") %>' CommandName="Select"
  27:         runat="server" />
  28:       </div>
  29:     </ItemTemplate>
  30:     <SelectedItemTemplate>
  31:         <%# Eval("nama_kat") %>
  32:     </SelectedItemTemplate>
  33:     </asp:ListView><br /><br />
  34:     <asp:ListView ID="lstBerita" runat="server"
  35:       DataSourceID="sdsBerita"
  36:       onitemdatabound="lstBerita_ItemDataBound">
  37:     <LayoutTemplate>
  38:       <table border="1px" style="border-collapse:collapse;">
  39:         <thead>
  40:           <td>No</td><td>Judul</td>
  41:           <td>Berita</td><td>Tanggal</td>
  42:         </thead>
  43:         <tbody>
  44:           <asp:PlaceHolder ID="itemPlaceHolder"
  45:             runat="server" />
  46:         </tbody>
  47:       </table>
  48:       </LayoutTemplate>
  49:       <ItemTemplate>
  50:         <tr>
  51:           <td><asp:Label ID="lblNo" runat="server" /></td>
  52:           <td><%# Eval("judul_berita") %></td>
  53:           <td><%# Eval("detail_berita") %></td>
  54:           <td><%# Eval("tanggal") %></td>
  55:         </tr>
  56:       </ItemTemplate>
  57:     </asp:ListView>
  58: </div>
  59: </form>

Untuk menambahkan urutan pada kolom ‘No’, tambahkan kode pada event ‘ItemDataBound’.

   1: private int count = 0;
   2: protected void lstBerita_ItemDataBound(object sender,
   3:   ListViewItemEventArgs e) {
   4:         count++;
   5:         Label lblNo = (Label)e.Item.FindControl("lblNo");
   6:         lblNo.Text = count.ToString();
   7: }

Isi dari SelectItemTemplate akan ditampilkan ketika anda memilih salah satu link kategori. Anda dapat manampikan style berbeda pada SelectedItemTemplate.

Perhatikan bahwa linkButton pada ItemTemplate mempunyai property ‘CommandName’ yaitu ‘Select’, berarti jika link tersebut diklik maka perintah select dijalankan. Karena pada ‘lvKategori’ property ‘DataKeyNames’ berisi ‘id_kat’ maka jika user menekan select maka akan dikembalikan nilai ‘id_kat’ dari record yang dipilih.

image

bersambung next post ^_^

NEW ASP.NET Charting Control

Barusan baca blognya mbah scottgu nich..

Microsoft sudah merilis server control baru nan kereeen untuk membuat chart yang support ASP.NET 3.5, anda dapat mendownload komponennya disini :

image

image

image

Atau anda dapat baca artikel lengkapnya di blognya mbah scottgu

selamat mencoba ..

Menggunakan Cross-Page Post

Secara default ketika anda menekan tombol maka secara otomatis halaman akan dipostback atau di kirim ke server kemudian dikembalikan kehalaman itu lagi. Jika anda menginginkan agar setelah menekan tombol maka dikirimkan ke halaman lain maka anda harus mendefinisikan property PostBackUrl property.

Buat halaman dengan nama CrossPage.aspx

<form id="form1" runat="server">
    <div>
    <asp:Label id="lblSearch" Text="Search:" Runat="server" />
    <asp:TextBox id="txtSearch" Runat="server" />
    <asp:Button id="btnSearch" Text="Go!" PostBackUrl="CrossPage2.aspx" Runat="server" />
    </div>
</form>

 

Kemudian buat halaman baru lagi dengan nama CrossPage2.aspx

<form id="form1" runat="server">
    <div>
    <asp:Label id="lblSearch" Runat="server" />
    </div>
</form>

Untuk mengambil nilai dari server control yang ada di halaman sebelumnya tulis kode berikut

protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.PreviousPage != null) {
            TextBox txtSearch = (TextBox)PreviousPage.FindControl("txtSearch");
            lblSearch.Text = "Search For : " + txtSearch.Text;
        }
    }

untuk kode dari source diatas dapat di download disini

Mengambil Nilai dari GridView

Jika anda ingin mengambil nilai dari GridView pada saat anda mengklik link select, caranya adalah sebagai berikut:

image

cara untuk mengambil nilai pada gridview ketika anda menekan select adalah melalui event Row_Command

Protected Sub gvBuku_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles gvBuku.RowCommand
       If e.CommandName = "Select" Then
           Dim intIndex As Integer = CInt(e.CommandArgument)
           Dim row As GridViewRow = gvBuku.Rows(intIndex)
           'mengambil nilai cell ketiga karena index dimulai dari Nol 
           lblKeterangan.Text = String.Empty
           lblKeterangan.Text &= "Kode Buku : " & row.Cells(2).Text & "<br/>" & _
           "Judul Buku : " & row.Cells(3).Text & "<br/>" & _
           "Tahun Terbit : " & row.Cells(4).Text & "<br/>" & _
           "Pengarang : " & row.Cells(5).Text & "<br/>" & _
           "Penerbit : " & row.Cells(6).Text
       End If
   End Sub

intIndex digunakan untuk mendapatkan index dari row yang anda click

untuk contoh program diatas dapat di download pada link

semoga membantu :)