October 22, 2016
Hot Topics:

Creating a Weblog using JScript .NET and ASP.NET

  • February 8, 2002
  • By Essam Ahmed
  • Send Email »
  • More Articles »

The focus of this series to date is to get you familiar with JScript .NET and the .NET Framework from an overview perspective. The focus of this article is to guide you through a functioning ASP.NET application that uses XML. You can view and work with a live demonstration of the application here


A Web Log is a Web page that represents a personal journal - a web log is informally referred to as a "blog". Blogs have frequent updates and individual updates are usually short. Some web blogs, like Slashdot, have a number of people working on them and provide a degree of interactivity by allowing readers to post comments about blog entries.

Blogs have become so popular that services, like Blogger.com, make it easy to create and update your own web log. Developers like to do things their own way and have the ability to create their own blog - this article discusses how to create your own blog using JScript .NET and using ASP.NET

Some features of the sample Web log include:

  • Uses XML to store blog comments
  • Uses the DataSet and FileStream objects to interact with the XML database
  • Uses XSL to display the blog
  • Combines XSL and CSS for advanced formatting

The blog is made up of two pages: one that displays the contents of the blog (the application's default page), and one that allows you create a new blog entry. You can view and work with a live demonstration of the application here.

Designing the XML Database

Using an XML file to store the details of blog entries makes it easy to manage the data since you can directly edit the file using an application like notepad. If you're not familiar with XML, you can get a really quick overview in a great article called XML in 10 Points - the link is in the links section at the end of this article.

The XML database is made up of a single file that has a relatively flat structure. Here's a fragment of the XML database file:

  <headline>Something to prove...</headline>
  <blogText>All I want is the chance to prove that
      money cannot make me happy. </blogText>

The file describes a blogEntry element that is made up of a number of other elements that describe the details of the blog entry. The date is made up of five elements to make it easier to sort the blog and to make it possible to allow another application or Web site to, perhaps, easily extract a single blog entry from the XML database. The remaining elements represent the blog entry itself.

If you're more comfortable working with a database, think of the blogEntry element as the name of a table, having fields represented by the blogEntry's child elements. In fact, I designed the XML database this way to make it easy to work with through an ADO.NET DataSet object, which is similar to an in-memory representation of a relational database.

Designing the New Blog Entry Page

Figure 1 is a partial screen shot of the ASP.NET page that allows users to add new entries to the blog.

Click here for larger image

Figure 1 - New Blog Entry Form

The page is referred to as a Web Form, since it incorporates some of ASP.NET server controls that make it easy to collect and validate the information the user enters. The page also uses Cascading Style Sheets (CSS) along with some inline formatting to achieve some of its visual effects.

Introducing ASP.NET Server Controls

An ASP.NET server control's declaration looks a lit like a regular HTML tag; however, when the control executes, it emits plain HTML that any browser can easily render. The benefit server controls offer over plain HTML controls (like an <input...> element) is that they offer programming model that abstracts the fact that some code executes in a user's browser and some code executes on the server.

For example, consider the text boxes in Figure 1. Each text box is a server control - the declaration for the large text box that represents the Entry field looks like this:

<asp:Textbox textmode="multiline" 
    id="blogEntry" columns="40" rows="8" runat="server" />

The declaration looks like an HTML tag apart from the fact that there's a runat attribute. When a user requests a page with the above control on it, ASP.NET renders the control in plain HTML as shown:

<textarea name="blogEntry" rows="8" cols="40"

The runat attribute tells ASP.NET that you want the control to behave as if it executes on the server, but renders on the client. When a user enters text into the field, and submits it by clicking on the Save button, you can access the contents of the server control like this:

someVariable = blogEntry.Text;

If you wanted to access the same field in ASP, you'd have to write code that looks something like this:

someVariable = Request.Form("blogEntry");

The key difference between using an ASP.NET server control and an HTML control is that the ASP.NET server control appears, to the developer, to reside and execute on the server making developing Web based applications as easy as creating traditional applications that execute on the desktop.

ASP.NET server controls aren't limited to rendering their HTML counterparts. You can use special validator controls to validate the values a user enters. For example, the Name field is a required entrys for the form in Figure 1. The field is actually made up of two server controls: a textbox control and a RequiredFieldValidator control, as shown:

<asp:textbox text="" id="Name" runat="server" />

<asp:RequiredFieldValidator ControlToValidate="Name" 
    display="static" runat="server">*</asp:RequiredFieldValidator>

As the name suggests, the RequiredFieldValidator allows developers to easily specify that a user must provide a value for the control. The RequiredFieldValidator simply checks that there's something in the field - it does not confirm that the value is valid (you could use a RegularExpressionValidator control to validate the value a user enters - there's a link at the end of this article that provides the location of ASP.NET's validation controls). When ASP.NET renders the control, it generates some HTML and JScript client side code. Here's what the HTML looks like:

<input name="Name" type="text" id="Name" />
<span id="ctrl1" controltovalidate="Name" 
    initialvalue="" style="color:Red;visibility:hidden;">*</span>

If the user does not enter a value into the field that the RequiredFieldValidator validates, then it displays an asterisk symbol next to the field when the user attempts to submit the form. The client side JScript code does not allow the user to submit the form until all of the required fields are filled in; in addition, the code executes on the client thereby reducing the processing load on the server.

When the all of the fields on a form are valid, they get submitted to the server, where processing takes place in the button's click event handler. Here's the declaration for the button control:

<asp:Button class="btn" id="submitBlog" Text="Save" 
    onClick="Submit_Click" runat="server" />

The Submit_Click function gets called when a user clicks on the button - you write the function inline with the rest of the ASP.NET page, and ASP.NET handles the details of when and how to call it. This is what the function's declaration looks like:

public function Submit_Click( sender:Object,  e:EventArgs)

This function is the workhorse of the application since it handles the details of interacting with the XML database file using the ADO.NET DataSet object, all of which I cover in the following section.

Page 1 of 2

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date
Rocket Fuel