Category: AJAX

How To: Make A Master-Detail View In ASP.NET

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:


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:


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:


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:


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!

How To: Build a better ASP.NET AJAX UpdateProgress notification


I’ve been working on ASP.NET AJAX eversince it’s beta days and the UpdateProgress and UpdatePanel has been my bestfriend since day one. I’ve learned a few tricks while using ASP.NET and today I’d like to share with you several ways to customize the look and feel of you UpdateProgress control with this sample solution. I have created a sample application that would demonstrate different ways to position your UpdateProgress control in the web browser. 


The samples included in the solution is as follows:




  • Sample 1

    The usual ASP.NET AJAX UpdateProgress control usage. This demonstrates the typical use of the UpdateProgress control in an application


  • Sample 2

    An ASP.NET AJAX UpdateProgress control positioned in the top right of the browser. (GMAIL like behavior)


  • Sample 3

    An ASP.NET AJAX UpdateProgress control positioned in the top right of the browser with a transparent gray background. (GMAIL like behavior)


  • Sample 4

    An ASP.NET AJAX UpdateProgress control positioned in the top right of the browser with a transparent gray background and the notification following the scrollbar position (fixed position).


  • Sample 5

    An ASP.NET AJAX UpdateProgress control positioned in the middle of the browser with a transparent gray background.


  • Sample 6

    An ASP.NET AJAX UpdateProgress control positioned in the middle of the browser with a transparent gray background and the notification following the scrollbar position (fixed position).


  • Sample 7

    An ASP.NET AJAX UpdateProgress control that uses the AlwaysVisibleControlExtender trick to place the progress notification at the top right of the browser.


  • Sample 8

    An ASP.NET AJAX UpdateProgress control that uses the AlwaysVisibleControlExtender trick to place the progress notification at the middle of the browser.



The project includes all aspx files, images and stylesheets that demonstrates effective UpdateProgress notifications. You can checkout the running sample of this ASP.NET AJAX project at the DevPinoy.org demo site


I hope what I shared with you can be useful in your daily life as a .NET developer. If you are interested you can download the source code for the whole project here: KeithRull.BuildingABetterAJAXLoadingNotification.zip (191.48 KB)