Completing an ASP.NET AJAX Server-Centric Based Online Shopping Website

(Page 1 of 5 )

After a long trip, we finally come to the last article of our eleven-part series on building an online shopping website. Now let’s examine the controlling modules of the sample, specifically the foreground management modules of the shopping city.

---

A downloadable .rar file is available for this article.

---

The Foreground Management of the Shopping City

In fact, all the modules related to this part are created entirely through use of ASP.NET UserControls.

Now, let’s first delve into the news module.

News Module

The news module is handled by using the "NewsUC.ascx" UserControl which is mainly responsible for showing the first ten pieces of news about the shopping city in animating rolling form. Figure 39 gives the run-time snapshot of the foreground control panel before any user logs in. In Figure 39, the bottom part marked by red bold lines is just the news module to be discussed here.

Figure 39—the run-time snapshot for the foreground news modules

In the respect of design there is only a control DataList named "NewsList" with each of its records used to display the news title of each piece of news. Note that to gain the better effect of user vision, the HTML element <marquee> is leveraged to roll the news titles, as is shown in the following list:

<marquee id="ScrollNews" scrollamount="1" scrolldelay="50" direction="up"
behavior="scroll"

height="182" onmousemove="stop()" onmouseout="start()">

<asp:DataList ID="NewsList" runat="server" Width="100%" CssClass="Text">

<ItemTemplate>

<a href='../Admin/Information/NewsInfo.aspx?NewsID=<%#DataBinder.Eval
(Container.DataItem,"NewsID") %>' target="_blank"><%# DataBinder.Eval
(Container.DataItem,"Desn") %></a>

</ItemTemplate>

<ItemStyle HorizontalAlign="Center" />

</asp:DataList>

</marquee>

Next, let’ take a short look at the initialization of this module.

protected void Page_Load(object sender, EventArgs e){

if(!Page.IsPostBack) {

BindNewsData();

}

}

private void BindNewsData(){

///Define the class that gets the data

News news = new News();

SqlDataReader dr = news.GetNewss();

///Set the control's data source

NewsList.DataSource = dr;

///bind data to the control

NewsList.DataBind();

///Close the database connection

dr.Close();

}

Here the crucial programming is related to the BindNewsData helper functionwhich performs the task of getting the first ten pieces of news-related data and typically uses a SqlDataReaderobject to hold the result. At last, the data is bound to the  DataListcontrol named "NewsList."

In the next section, let’s discuss the general operation module.

Next: Ajaxifying the Operation Module >>
 

More ASP.NET Articles
More By Xianzhong Zhu

Comments On: Completing an ASP.NET AJAX Server-Centric Based Online Shopping Website

>>> Be the FIRST to comment on this article!