We are on era of the web development where more and more websites are loading lots of dynamic content on web pages. In this tutorial, I will show how to use web service and JSON to display dynamic contents on web page.
Create a new ASP.NET website in the visual studio and add following Product.cs class in App_Code folder of your project. I will be using this class from the web service to return the list of Product class objects to the clients.
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
}
Next, add an ASP.NET web service ProductWebService.asmx in the project by using Add New Item dialog box. The complete web service code is shown below:
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET
AJAX,uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class ProductWebService : System.Web.Services.WebService
{
List<Product> list = new List<Product>();
public ProductWebService ()
{
//Uncomment the following line if using designed components
//InitializeComponent();
list.Add(new Product { Id = 1, Name = "TV", Price = 22000 });
list.Add(new Product { Id = 2, Name = "Microwave", Price = 24000 });
list.Add(new Product { Id = 3, Name = "WashingMachine", Price = 28000 });
list.Add(new Product { Id = 4, Name = "Music Player", Price = 29000 });
list.Add(new Product { Id = 5, Name = "Food Processor", Price = 19000 });
}
[WebMethod]
public List<Product> GetAllProducts()
{
return list;
}
[WebMethod]
public Product GetProductDetails(string productId)
{
int prodId = Int32.Parse(productId);
Product product = list.Single(e => e.Id == prodId);
return product;
}
}
In start, the web service declares a list of Product objects which I will be using to store Product objects for this tutorial. I have added five Product objects to the list in the constructor of the web service. I am using this approach only for simplifying this tutorial as in a real world application these records are normally stored in the database.
List list = new List();
list.Add(new Product { Id = 1, Name = "TV", Price = 22000 });
list.Add(new Product { Id = 2, Name = "Microwave", Price = 24000 });
list.Add(new Product { Id = 3, Name = "WashingMachine", Price = 28000 });
list.Add(new Product { Id = 4, Name = "Music Player", Price = 29000 });
list.Add(new Product { Id = 5, Name = "Food Processor", Price = 19000 });
A web method GetAllProducts returns the list of products to the clients.
[WebMethod]
public List<Product> GetAllProducts()
{
return list;
}
Another simple web method GetProductDetails will filter and return a single Product object based on product id.
[WebMethod]
public Product GetProductDetails(string productId)
{
int prodId = Int32.Parse(productId);
Product product = list.Single(e => e.Id == prodId);
return product;
}
Next add the following code in your web page in HTML source. It has a DropDownList to display all products and an HTML table to display single product details.
<form id="form1" runat="server">
Select Product:
<asp:DropDownList ID="DropDownList1" runat="server" Width="150">
<asp:ListItem Text="Select" Value="-1" />
</asp:DropDownList>
<br />
<br />
<table style="border: solid 1px black; width: 300px; display: none;
background-color:#f3f3f3"
cellpadding="4" cellspacing="0" id="outputTable">
<tr>
<td>Product ID:</td>
<td><span id="spnProductId" /></td>
</tr>
<tr>
<td>Product Name:</td>
<td><span id="spnProductName" /></td>
</tr>
<tr>
<td>Price:</td>
<td><span id="spnPrice" /></td>
</tr>
</table>
</form>
Before staring JQuery AJAX code make sure you have JQuery file available in the scripts folder of your website, and you have added file reference in the page <head> element.
<script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
4:00 PM
Bhavik Shah
