In part 3 of this 5 part series I am going to show you how to make a Master-Detail View in ASP.NET. I you weren't able to see the two previous post you can check them out here:
This post is a continuation of what we started in the two previous post wherein i show you how to consume a webservice ins ASP.NET and present the values returned by the service to the user in a much more meaninful way.
To start off with this post lets look at how the application from our last article look-liked:
As you can see, we have a textbox that accepts a user-input asking for the symbol to lookup in our webservice, a button that triggers that query event and a DetailsView that displays the returned resultset. This works great.
But what if I have a list of symbols that I want the user to see information regarding them? The answer is to show them in a master-detail view so that the user can get a clearer view of the information on each symbol.
To start with this demo lets begin by deleting everything that we have on the page. Yup! we are starting from scratch so that we can get a clearer picture on how we can build a master-detail view screen. Once everything is cleared on the page let's begin by adding a DataList control on our page with a Label control inside its ItemTemplate:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Keith Rull's Consuming Web Services Sample</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="stockDataList"
runat="server">
<ItemTemplate>
<asp:Label ID="quoteLabel"
runat="server"
Text='<%# Container.DataItem %>'>
</asp:Label>
</ItemTemplate>
<SeparatorTemplate>
<br />
</SeparatorTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
The first thing that you would notice on the code above is that we have assigned a value to the Text property of our Label control. This value signifies that we are binding the Container.DataItem value to the Text property. This DataItem will come from the value that we are going to set in the codebehind file for this page which in this case is just going to be a List<string>.
Next, lets go the codebehind file and create the Page_Load event for our page:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//create a list of stock symbols
List<string> listOfSymbols = new List<string>();
//add some symbols to our list
listOfSymbols.Add("MSFT");
listOfSymbols.Add("GOOG");
listOfSymbols.Add("CSCO");
listOfSymbols.Add("MER");
listOfSymbols.Add("F");
//bind the list<string> to our datalist
stockDataList.DataSource = listOfSymbols;
stockDataList.DataBind();
}
}
}
All i did in the code above is create a list of strings, add some values to it and assign and bind that colletion of strings to our DataList. Running the application now would give us this result:
Nothing really impressive yet. Now let's add the cool part wherein we call a web service and show the information for each stock symbol.
To do that we need to add another DataList inside the ItemTemplate of our first DataList. The second DataList will serve as the list that shows the imformation about the specified execution symbol. We also need to add an event that is triggered each time a ListItem is binded to a data. Below is our modified HTML page:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Keith Rull's Consuming Web Services Sample</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="stockDataList"
runat="server"
OnItemDataBound="stockDataList_ItemDataBound">
<ItemTemplate>
<asp:Label ID="quoteLabel"
runat="server"
Text='<%# Container.DataItem %>'>
</asp:Label>
<asp:DataList ID="stockInformationDataList"
runat="server">
<ItemTemplate>
<table cellpadding="1"
cellspacing="1"
border="0"
width="600px">
<tr>
<td><b>Last:</b> <%# Eval("Last") %></td>
<td><b>Date:</b> <%# Eval("Date") %></td>
<td><b>Time:</b> <%# Eval("Time") %></td>
<td><b>Change:</b> <%# Eval("Change") %></td>
</tr>
<tr>
<td><b>Open:</b> <%# Eval("Open") %></td>
<td><b>Low:</b> <%# Eval("Low") %></td>
<td><b>High:</b> <%# Eval("High") %></td>
<td><b>Volume:</b> <%# Eval("Volume") %></td>
</tr>
<tr>
<td><b>MktCap:</b> <%# Eval("MktCap") %></td>
<td><b>PrvClose:</b> <%# Eval("PreviousClose") %></td>
<td><b>PerChange:</b> <%# Eval("PercentageChange") %></td>
<td><b>AnnRange:</b> <%# Eval("AnnRange") %></td>
</tr>
<tr>
<td><b>Earns:</b> <%# Eval("Earns") %></td>
<td><b>P-E:</b> <%# Eval("P-E") %></td>
<td> </td>
<td> </td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</ItemTemplate>
<SeparatorTemplate>
<br />
</SeparatorTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
I modified the ItemTemplate of our second DataList () and added an html table to hold the values that the web service returns. This way the view that we are presenting is much more readable.
Next stop is looking at the code behind where all these magic is going to be wired. All the work for the detail view will happen on the stockDataList_ItemDataBound event and no further modification to our Page_Load event is needed. Let me show you the code for that event before I start explaining every bits and pieces of that code:
protected void stockDataList_ItemDataBound(object sender, DataListItemEventArgs e)
{
//check whether the current listitem is an acceptable ListItemType
if (e.Item.ItemType == ListItemType.Item
|| e.Item.ItemType == ListItemType.AlternatingItem)
{
//get the binded symbol
string symbol = e.Item.DataItem.ToString();
//find the datalist in our itemtemplate
Control foundControl = e.Item.FindControl("stockInformationDataList");
//cast the control to a DataList
DataList stockInformationDataList = (DataList)foundControl;
//get the stock information for the specified symbol
DataSet stockInformationDataSet = StockQuoteHelper.GetStockQuoteDataSet(symbol);
//bind the dataset to our datalist
stockInformationDataList.DataSource = stockInformationDataSet;
stockInformationDataList.DataBind();
}
}
What we are doing on this blog of code is we are checking if the ItemType of the current item being binded-to is either a ListItemType.Item or ListItemType.AlternatingItem. If it passes this criteria we then read the DataItem that was binded to this ListItem which in this case is our executionSymbol. The next step is to find our stockInformationDataList control and assign the stockInformationDataSet to it. The stockInformationDataSet contains the values that is retrieved from our stock web service by passing the exection symbol to our StockQuoteHelper.GetStockQuoteDataSet method.
Running our completed application will result to this screen:
And that's it! We've accomplished a master-detail view in ASP.NET. Pretty easy right? I hope you learned something from this tutorial. Next up we'll update this project and implement some Asynchronous Web Service calls via ASP.NET AJAX and show you some fun ways to present a master-detail view in a much more interesting way.
As always, source code is available for download here: KeithRull.ConsumingWebServices.Part3.zip (6.9 KB)
As a side note, many thanks to John A. Miller from Trofholz Technologies, Inc. for reminding me about this series. I totally forgot about it already after being assigned to a large project the past few months. Thanks John!