Skip to content

Menampilkan data dengan menggunakan “ASP.NET AJAX Library Beta 0911”, ADO.NET Entity Data Model dan ADO.NET Data Service

Saturday, November 28, 2009

0

Pada artikel sebelumnya telah dijelaskan mengenai bagaimana cara menampilkan data dengan menggunakan “ASP.NET AJAX Library Beta 0911″, LINQ, dan WCF. Pada artikel ini akan dibahas cara menampilkan data dengan menggunakan “ASP.NET AJAX Library Beta 0911″, ADO.NET Entity Model dan ADO.NET Data Service. Adanya ADO.NET Data Service mempercepat kita dalam pembuatan web karena kode kelas pembungkus data sudah di generate.

  • Pertama-tama download “AspNet Ajax Library Beta 0911“.
  • Extractlah file tersebut dan bukalah folder scripts. Folder scripts ini lah yang akan kita masukkan ke visual studio project.
  • Buatlah project ASP.NET dengan menggunakan Microsoft Visual Studio, beri nama “AJAXADONETDATASERVICES”.
  • Pada Solution Explorer klik kanan pada AJAXADONETDATASERVICES kemudian Add – New Folder. Beri nama folder tersebut “scripts”.
  • Pada Solution Explorer klik kanan folder scripts kemudian Add – Existing Item.
  • Pilihlah semua file yang ada (kecuali folder “extended”) di folder scripts (hasil download “AspNet Ajax Library Beta 0911″ ) kemudian klik Add.
  • Pada Solution Explorer klik kanan pada AJAXADONETDATASERVICES kemudian Add – New Item.
  • Klik “ADO.NET Entity Data Model”. Isi Name : “Northwind.edmx” kemudian klik Add.
  • Klik Next untuk Generate Model from Database.
  • Buat koneksi ke database Northwind dan kemudian klik Next.
  • Pilih table Categories kemudian klik Finish.
  • Pada Solution Explorer klik kanan pada AJAXADONETDATASERVICES kemudian Add – New Item.
  • Klik “ADO.NET Data Service”. Isi Name : “Northwind.svc” kemudian klik Add.
  • Pada Northwind.svc.cs ketik code :

 
 

using System;

using System.Collections.Generic;

using System.Data.Services;

using System.Linq;

using System.ServiceModel.Web;

using System.Web;

namespace AJAXADONETDATASERVICES

{

public class Northwind : DataService< NorthwindEntities >

{

public static void InitializeService(IDataServiceConfiguration config)

{

    config.SetEntitySetAccessRule(“Categories”, EntitySetRights.AllRead);

}

}

}

 
 

 
 

  • Pada Solution Explorer buka Default.aspx kemudian klik Source.
  • Ketik code :

 
 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” >

<head runat=”server”>

<title></title>

<script type=”text/javascript” src=”/scripts/Start.js”></script>

<script type=”text/javascript”>

Sys.require([Sys.components.dataView, Sys.components.dataContext], function ()

{

var dataContext = Sys.create.adoNetDataContext

({

serviceUri: “Northwind.svc”

});

Sys.create.dataView(“#CategoriesView”,

{

dataProvider: dataContext,

fetchOperation: “Categories”,

autoFetch: true

});

});

</script>

</head>

<body>

<Table border=”1″ cellspacing=”1″ cellpadding=”1″>

<thead>

<tr ><td>Category ID</td> <td>Category Name</td><td>Description</td></tr>

</thead>

<tbody id=”CategoriesView” class=”sys-template” >

<tr ><td>{{CategoryID}}</td><td>{{CategoryName}}</td><td>{{Description}}</td></tr>

</tbody>

</Table>

</body>

</html>

Filed in ADO.NET Data Service, ADO.NET Entity Data Model, AJAX, Microsoft ASP.NET | | Comments (0)

Menampilkan data dengan menggunakan “ASP.NET AJAX Library Beta 0911”, LINQ, dan WCF

Saturday, November 28, 2009

0

Perkembangan teknik AJAX semakin lama semakin canggih dan sangat membantu web developer. Pada artikel ini akan dijelaskan mengenai cara menampilkan data dengan menggunakan “ASP.Net AJAX Library Beta 0911“, LINQ dan WCF.

  • Pertama-tama download “AspNet Ajax Library Beta 0911“.
  • Extractlah file tersebut dan bukalah folder scripts. Folder scripts ini lah yang akan kita masukkan ke visual studio project.
  • Buatlah project ASP.NET dengan menggunakan Microsoft Visual Studio, beri nama “AJAXWCFData”.
  • Pada Solution Explorer klik kanan pada AJAXWCFData kemudian Add – New Folder. Beri nama folder tersebut “scripts”.
  • Pada Solution Explorer klik kanan folder scripts kemudian Add – Existing Item.
  • Pilihlah semua file yang ada (kecuali folder “extended”) di folder scripts (hasil download “AspNet Ajax Library Beta 0911″ ) kemudian klik Add.
  • Pada Solution Explorer klik kanan pada AJAXWCFData kemudian Add – New Item.
  • Klik “LINQ to SQL Classes”. Isi Name : “Northwind.dbml” kemudian klik Add.
  • Buka Server Explorer kemudian buka koneksi ke database Northwind.
  • Drag dan Drop table “Customers” dari Server Explorer ke Northwind.dbml .
  • Pada Solution Explorer klik kanan pada AJAXWCFData kemudian Add – New Item.
  • Klik AJAX-enabled WCF Service. Isi Name : “Northwind.svc” kemudian klik Add.
  • Di dalam Northwind.svc.cs ketiklah code :

using System;

using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.ServiceModel.Activation;

using System.ServiceModel.Web;

using System.Collections.Generic;

namespace AJAXWCFData

{

[ServiceContract(Namespace = "")]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class Northwind

{

[OperationContract]

public List<Customer> GetCustomers(int numberToFetch)

{

using (NorthwindDataContext context = new NorthwindDataContext())

{

return context.Customers.Take(numberToFetch).ToList();

}

}

}

}

  • Pada Solution Explorer bukalah Default.aspx dan kemudian klik Source.
  • Ketiklah code :

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”AJAXWCFData._Default” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” >

<head runat=”server”>

<title></title>

<script type=”text/javascript” src=”/scripts/Start.js”></script>

<script type=”text/javascript”>

Sys.require([Sys.components.dataView, Sys.scripts.WebServices]);

</script>

</head>

<body xmlns:sys=”javascript:Sys”

xmlns:dataview=”javascript:Sys.UI.DataView”>

<table border=”1″ cellpadding=”1″ cellspacing=”1″>

<thead>

<tr><td>Customer ID</td><td>Company Name</td><td>Contact Name</td></tr>

</thead>

<tbody id=”CustomerView”

class=”sys-template”

sys:attach=”dataview”

dataview:autofetch=”true”

dataview:dataprovider=”Northwind.svc”

dataview:fetchParameters=”{{ {numberToFetch: 10} }}”

dataview:fetchoperation=”GetCustomers” >

<tr><td>{{CustomerID}}</td><td>{{CompanyName}}</td><td>{{ContactName}}</td></tr>

</tbody>

</table>

</body>

</html>

Filed in AJAX, LINQ, Microsoft ASP.NET, WCF | Tagged , , , , | Comments (0)