Developing an ASP.NET AJAX Client-Centric Wiki Application - Web Service Design
(Page 4 of 4 )
From the point of view of MS AJAX client-centric architecture, a web service plays the role of a broker agent to connect the client side with the database, and the client-side JavaScript programming can directly invoke the web service via the ready "Client Side Script Proxy." In this application, we'll write two parallel web services, MyDataService and ArtInfoDataService, which are both derived from the DataService class and to be consumed from the browser side in the MS AJAX way.
Now, right click the project, choose "Add new item," and create two new web services named "MyDataService.asmx" and "ArtInfoDataService.aspx," respectively. Next, open the "MyDataService.cs" file and add all of our required web methods: DeleteRecord, GetAllRecords, InsertRecord, and UpdateRecord. These four web methods will respectively invoke the four corresponding stored procedures -- DeleteRecord, GetAllRecords, InsertRecord, and UpdateRecord --within the WikiDatabase database to perform the basic CRUD operations.
Also, take MyDataService for example. The above four web methods will be invoked from the client side, in this case mainly by the means of xml-script. Since things are quite similar to the web service ArtInfoDataService, we choose to omit the related enumeration. For the associated details, please further examine the downloaded source code.
Next we will focus on the user interface design phase.
Visualize the finish lineWhen you run this article-related wiki application, you will see a homepage screen as in Figure 4.
Figure 4— the runtime snapshot of the homepage of the wiki application.
Here we use an ordinary <table> HTML element to lay out the homepage while borrowing a bit from the famous codeproject.com website. On the left side of the page, there are a few layer-based categories—when you click the Sections or Manage items the associated sub items will unfold or collapse. Clicking Login in the upper left corner will lead you into another common login page—login.aspx. By clicking items under Sections, for example "Vista," the user will be navigated to the MsgList.aspx page (Figure 5) to view the article titles that belong to the selected category.
Figure 5—a runtime snapshot of page MsgList.aspx.
However, only a user with the Admin role can own the ability to open and edit article categories in the editcategory.aspx page (Figure 6), while a common user or a passing guest will be redirected to the login.aspx page. As you see, the right and larger part of the homepage shows directly the rather detailed article category information. Note here, to be honest, that I have purposefully not achieved the functionality of clicking the interested hyperlink from the right part to see the articles. However, you can easily supplement this with the help of the implementation of the hyperlinks added to the sub sections under Sections.
Figure 6—a runtime snapshot of page editcategory.aspx.
Rather simple? Yes, it is. But since the sample is mainly built up upon MS AJAX client-centric techniques, there are still some interesting things and knots with it. Let’s dissect them one by one.
Please check back tomorrow for the continuation of this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
