Back in the days of ASP 2.0 and 3.0, developers generally had two choices when it came to building Web applications. One was to use Visual InterDev, which came with Visual Studio 6.0. Another was to code everything by hand using a text editor. I didn't really have much experience using the former, as it didn't give me a good impression. Moreover, I had heard a lot of developers complain about its shortcomings. My choice then was to use a text editor (NotePad was a favorite, since it was free, but if I needed to edit big files, I would use an enhanced editor like UltraEdit or EditPad) to write ASP applications. Students who attended my Web development classes often asked the reason for not using a visual tool like Visual InterDev. My usual response was that coding everything by hand allows you to fine-tune the Web pages you are creating. Moreover, it really forces you to have a good understanding of HTML and the underlying ASP object models.
During the early days of the .NET Framework (during the beta 1
era), I still insisted on creating my Web applications using a
text editor. If you were like me, you may remember that you
needed to add the
runat attribute to all of those
<asp:> tags. The
most popular example at that time was a demonstration of the
ability of ASP.NET to automatically maintain the state of a Web
application -- you chose something from a drop-down list box and
click on a submit button, and voila! The selected item still
remained selected! As you built more sophisticated applications,
you realized that you could no longer code that quickly using
just a text editor. How do you know whether a particular object
has this property or method and whether is the method
Fortunately, Microsoft realized this problem and built a very useful tool known as Visual Studio .NET. In fact, building solid development tools has always been Microsoft's forte. Visual Studio .NET presents an integrated approach to developing .NET applications. Unlike its predecessor, Visual Studio .NET integrates the entire development environment into one. You can now build Windows applications, Web applications, Web services, Windows services, etc., using C#, VB.NET, and all supported languages, in one development environment.
The most significant innovation made by Microsoft, in my opinion, is Intellisense. It greatly simplifies the development process and significantly reduces the memory needed to work with the huge class library in .NET. Can't be sure if a property belongs to a particular object? What is the return type of a method? Intellisense will tell you straight away. For those hardcore programmers who eat the class library for breakfast, I know you can survive without Intellisense (see Brian Jepson's article "You Can Hack .NET Without Buying Visual Studio .NET"). But for the rest of us, Intellisense is a great help! (See Jose Mojica's Article "The Role of the IDE in Programming Languages.")
Though VS.NET speeds the development process, not everyone can afford it (though I think any .NET developer worth their salt should get a copy nevertheless). This issue has been slowing the adopting of .NET, to a certain extent, and Microsoft is well aware of this problem. Hence, Microsoft recently announced the launch of a new tool for building ASP.NET Web applications: the ASP.NET Web Matrix -- a community-supported, easy-to-use development tool for building Web applications. The ASP.NET Web Matrix is positioned somewhere between Visual Studio .NET and plain text editors. It is targeted at developers who are currently hand-coding their ASP.NET Web applications, by providing them with a useful tool to accelerate the development process. It is also used as bait to get new developers to try out ASP.NET. In this article, I will take a look at the capabilities of ASP.NET Web Matrix.
You can download the ASP.NET Web Matrix from asp.net. This tool is very lightweight -- the download is a measly 1.1 MB, small enough to fit on a diskette and petite enough to run on your 128 MB (RAM) Pentium III. The package contains three main components:
When you first launch ASP.NET Web Matrix, you will see the Add New File window (Figure 2):
Under the Templates category, you have the following sections:
We will now run through some of the features of ASP.NET Web Matrix by building two sample Web applications.
Let's now build a Web application that consumes Amazon's Web service. For a more detailed discussion of Amazon's Web service, see Wei Meng Lee's "Using Amazon's New Web Services."
When the ASP.NET Web Matrix is launched, it will prompt you to
add a new file. My intention is to use a
DataGrid to bind the
results returned from the Amazon's Web service. Hence I selected
the Data Pages category and chose Data Report with Paging. Name
Amazon.aspx (Figure 3).
By default, the page will contain the
DataGrid control (and some
Like Visual Studio .NET, ASP.NET Web Matrix allows you to format
the layout of the
DataGrid control. To do so, simply click on the
control and select AutoFormat in the Properties window:
Select a scheme that you like. After this, you are going to modify
DataGrid control by editing the HTML (select the
DataGrid control and press Ctrl-T):
Insert the codes in bold:
<asp:datagrid id="DataGrid1" runat="server" DataKeyField="No" AllowPaging="True" PageSize="5" OnPageIndexChanged="DataGrid_Page" BackColor="#DEBA84" CellPadding="3" CellSpacing="2" width="80%" OnSelectedIndexChanged= "DataGrid1_SelectedIndexChanged" BorderStyle="None" BorderWidth="1px" BorderColor="#DEBA84"> <FooterStyle forecolor="#8C4510" backcolor="#F7DFB5"> </FooterStyle> <HeaderStyle font-bold="True" forecolor="White" backcolor="#A55129"> </HeaderStyle> <PagerStyle horizontalalign="Center" forecolor="#8C4510" mode="NumericPages"> </PagerStyle> <SelectedItemStyle font-bold="True" forecolor="White" backcolor="#738A9C"> </SelectedItemStyle> <ItemStyle forecolor="#8C4510" backcolor="#FFF7E7"> </ItemStyle> <Columns> <asp:buttoncolumn text="Show Details" commandname="Select" ItemStyle-Font-Bold="true" ItemStyle-Font-Size="smaller"> </asp:buttoncolumn> </Columns> </asp:datagrid>
Our aim is to add an additional column to our
DataGrid so that we
can select a particular title and view its author and book cover
image. Also, add in a
Button control so that users
can search for titles. The familiar
ToolBox (adding controls) is
available in ASP.NET Web Matrix.
Our page now looks like Figure 7.
Once the design of the page is done, you can now proceed to coding the application logic. At the bottom of the ASP.NET Web Matrix, you will find four tabs:
Since ASP.NET Web Matrix does not support code-behind, the four tabs present a useful view to the different aspects of a Web page. You can either double-click on a page in design view or click on the Code tab to display the codes.
Since you are consuming Amazon's Web service, you need to build a proxy class to access it. The ASP.NET Web Matrix provides a Web service proxy class generator (Tools- >WebService Proxy Generator):
What we have done is actually copy the WSDL document provided by
Amazon and save it into the local drive (accessed using the
You can also access the WSDL document at: http://soap.amazon.com/schemas/AmazonWebServices.wsdl. (If you are behind a proxy server, be sure to configure the proxy server in your IE settings; do not use automatic configuration settings.)
Also note that the proxy class must be generated and saved in the same directory as your ASP.NET page.
Let's now code the application logic for our application:
We first add two global variables:
Dim ds as dataset Dim productsInfo as ProductInfo
We will define a subroutine named
retrieve all of the titles from Amazon's Web service. First, access
the Web service:
Dim ws as new AmazonSearchService() Dim KeywordReq as New KeywordRequest() keywordReq.keyword = txtTitle.text keywordReq.type="heavy" keywordReq.devtag="D1M4DYSPL6TN9A" keywordReq.version="1.0" keywordReq.mode="books" keywordReq.tag="mytag" keywordReq.page= 1 productsInfo = ws.KeywordSearchRequest(keywordReq)
With the results stored in the
object, you will now
convert the result into a
Dataset object so that it can be bound
ds = new dataset() ds.Tables.Add(New DataTable("products")) ds.Tables("products").Columns.Add("No") ds.Tables("products").Columns.Add("Title") ds.Tables("products").Columns.Add("Publisher") ds.Tables("products").Columns.Add("ISBN") ds.Tables("products").Columns.Add("List Price") ds.Tables("products").Columns.Add("Our Price") Dim i as Integer for i=0 to productsInfo.Details.Length - 1 Dim row As DataRow = _ ds.Tables("products").NewRow row(0) = i + 1 ' to display # row(1) = productsInfo.Details(i).ProductName row(2) = productsInfo.Details(i).Manufacturer row(3) = productsInfo.Details(i).ASIN row(4) = productsInfo.Details(i).ListPrice row(5) = productsInfo.Details(i).OurPrice ds.Tables("products").Rows.Add(row) Next i
Once the dataset is created, data bind it to the DataGrid control:
DataGrid1.DataSource = ds DataGrid1.DataBind()
We also need to define an event
SelectedIndexChanged) for the
This event is fired when the user clicks on the
Show Details link.
Sub DataGrid1_SelectedIndexChanged(sender As Object, _ e As EventArgs)
A call is first made to get the titles again:
The title is then displayed on the page:
dim curr as Details curr = productsInfo.Details( _ datagrid1.datakeys(dataGrid1.SelectedIndex)-1) response.write ("<b>" & curr.ProductName & _ "</b><br>by: ")
Followed by the display of the authors:
dim i as integer for i = 0 to curr.authors.length-1 response.write (curr.authors(i).tostring) if i < curr.authors.length-1 then ' not the last author response.write (", ") else response.write ("<hr>") end if next i
And then, finally, write an <img> element to display the book cover image:
response.write ("<img src=" & curr.imageURLMedium & _ ">") End Sub
There are three more subroutines you need to modify:
Sub Page_Load(Sender As Object, E As EventArgs) '----do nothing---- End Sub Sub DataGrid_Page(Sender As Object, e As DataGridPageChangedEventArgs) '----when the user clicks on the next page---- DataGrid1.CurrentPageIndex = e.NewPageIndex getTitles() End Sub Sub Button1_Click(sender As Object, e As EventArgs) '----when the user clicks on the Search button---- getTitles() End Sub
That's it! When you press F5 to run your application for the first time, the accompanying Web server will prompt you:
You can now search for books from Amazon.com!
One of the cool features of ASP.NET Web Matrix is its ability to add new components online. To add an online component, simply right-click on the toolbox and select Add Online Toolbox Components.... The Component Gallery lets you browse for components and controls online, and download them to your local machine.
Online components are grouped into categories. Select the catagory you want and see if there are any controls available. Installing a component to your ASP.NET Web Matrix is then a matter of clicking on the Install button.
Besides adding online components from the Web, ASP.NET Web Matrix
also allows you to add commonly-used templates into the editor.
You customize the templates using the
WebMatrix.exe.config file. This file is found in
the installation directory of ASP.NET Web Matrix, typically in
c:\Program Files\Microsoft ASP.NET Web
Matrix\v0.5.464\. (v0.5.464 is the build number of ASP.NET
Web Matrix at the time of this writing, and it will change with
To add our Amazon Web application to the template, you need to add in the following elements (in bold) to the configuration file:
... <templateDocumentType extension="asmx" templateCategory="Web Services" name="Output Caching" createNewDescription="Output Cache Web Services."/> <!-- ** End Web Service Templates ** --> <!-- ** Start Consume Web Service Templates ** --> <templateDocumentType extension="aspx" templateCategory="Consume Web Services" name="Amazon Web service" createNewDescription= "Web app to consume Amazon's Web service."/> <!-- ** End Consume Web Service Templates ** --> <!-- ** Start Security Templates ** --> <templateDocumentType extension="aspx" templateCategory="Security" name="Login Page" createNewDescription= "Login page for Forms Based Authentication."/> ...
You also need to create the following subdirectories within the
As shown in Figure 14, you need to create the directory
Web Services/Amazon Web Service/Csharp (and VB). Copy the
Amazon.aspx file that we created earlier, paste it into
VB directory, and rename it as
Next, restart ASP.NET Web Matrix to cause it to reload the configuration file. You should now be able to see the updated template:
I quite liked ASP.NET Web Matrix, but the lack of Intellisense is really a big limitation. One day, I hope, someone will write an add-in to it. Besides the features discussed in this article, ASP.NET Web Matrix also includes links to online discussion forums and newgroups. What's more, you can also link to your contacts using your Windows Messenger's contact list. Overall, the ASP.NET Web Matrix provides a viable development environment for developing ASP.NET applications. The tight integration with the online community makes seeking help relatively easy.
Wei-Meng Lee (Microsoft MVP) http://weimenglee.blogspot.com is a technologist and founder of Developer Learning Solutions http://www.developerlearningsolutions.com, a technology company specializing in hands-on training on the latest Microsoft technologies.
Brian Jepson is an O'Reilly editor, programmer, and co-author of Mac OS X Panther for Unix Geeks and Learning Unix for Mac OS X Panther. He's also a volunteer system administrator and all-around geek for AS220, a non-profit arts center in Providence, Rhode Island. AS220 gives Rhode Island artists uncensored and unjuried forums for their work. These forums include galleries, performance space, and publications. Brian sees to it that technology, especially free software, supports that mission. You can follow Brian's blog here.
Copyright © 2009 O'Reilly Media, Inc.