Develop online RSS reader Based on ASP. NET Ajax technology (Part II)

V. logic layer design

(1) Add an RSS feed

Before developing a true logical layer design, let's simply browse sketch 4 under idea. Figure 4 shows my understanding of the two important ASP. NET Ajax client controls-listview and datasource, and the client data binding architecture recommended in MS Ajax official documents.

Figure 4: typical client data binding architecture recommended in the ASP. NET Ajax framework

In this example, we can draw the following conclusion: when a new RSS channel is added, we do not need to store the data to the SQL Server database on the server immediately, but temporarily store the data source control associated with the client control listview. Therefore, you can guess that the datasource control supports batch update operations-supports temporary storage of client-side data modification and finally updates the server-side database in batches. The two important methods in the preceding Sketch-"save" and "LOAD" play an important role in the implementation logic.

In this section, we only need to temporarily store the user's New RSS channel information on the client. Here, I encountered the first problem during operations on the listview control. Next let's take a look at the corresponding source code.

List 1

When you click the HTML input button "add the RSS Info" on the client, the above JavaScript function add_onclick (the Click Event processor) is called ). Here, g_rssnamelist is a global JavaScript variable that references listview "rssnamelist" (controls responsible for storing and displaying RSS channel information ). In this function, we first call the additem method of listview. This method can add an empty record to the end of the datatable control associated with the datasource control, it can also make the dataset dirty (this is important for the "save" operation we will discuss later ). Then, we get the record number of this empty record. Then, we call the getitem method (which is exactly the same as the getrow method) to retrieve the null record and call the setproperty method to fill in the corresponding database table fields. Note: here, we must use the global client method $ find instead of $ get. For the differences, see online framework documentation. In the end, a record is inserted ('add') in the client data source.

Note: Here I use the simplest ASP. Net Ajax client checker component-requiredfieldvalidator to prevent users from entering content in the text box. Below is the corresponding XML-scriptCodeStatement.

List 2

In the verification of the second text framework control, you can use regexvalidator (which can use regular expressions to verify the format of the URL here ). If you leave the two controls empty (for example, enter only a few space characters), the system will display a red "*"-indicating that you should enter some data. Debug thisProgramWhen I keep the two text boxes empty (without entering any content), the system does not seem to reflect it. This is suspected to be a small bug in the validator client. Interested readers can further analyze it.

[Note] in this demonstration program, I have not implemented the "Delete" and "modify" functions. Here, I strongly recommend that you try to add these two features. Through these operations, your ASP. NET Ajax client programming skills will be greatly improved.

Next, let's discuss how to display the RSS tunnel stored on the server.

(2) display RSS Channels

In this section, there are at least two situations for displaying RSS channels:

1) when the page is loaded for the first time, all RSS channels stored in the SQL Server database on the server will be displayed in the client control listview we mentioned earlier;

2) When you click "refresh", the RSS channel information stored in the SQL Server database on the server is displayed in the client control listview.

Now, let's analyze the first situation. The following list shows the declared XML-script code.

List 3

<SCRIPT type = "text/XML-script"> <Page xmlns: script = "http://schemas.microsoft.com/xml-script/2005"> <Components> <Datasource id = "rssinfodatasource" serviceurl = "mydataservice. asmx"> </Datasource> <Button id = "save"> <Click> <Invokemethodaction target = "rssinfodatasource" method = "save"/> </Click> <Bindings> <Binding datacontext = "rssinfodatasource" datapath = "isdirtyandready" Property = "element" propertykey = "disabled" transform = "invert"/> </Bindings> </Button> <Button id = "refresh"> <Click> <Invokemethodaction target = "rssinfodatasource" method = "LOAD"/> </Click> <Bindings> <Binding datacontext = "rssinfodatasource" datapath = "isready" Property = "element" propertykey = "disabled" transform = "invert"/> </Bindings> </Button> <Application> <Load> <Invokemethodaction target = "rssinfodatasource" method = "LOAD"/> </Load> </Application> </Components> </Page> </SCRIPT>

Here, we first specify the datasource control "rssinfodatasource ". This control will be asynchronously bound to the dataservice "mydataservice" on the server side by the ASP. NET Ajax framework ". Second, in the last <Application> section, when the web application starts, its load event method is called. Then, in the subsection <invokemethodaction>, the load method of the data source "rssinfodatasource" is called, which triggers an asynchronous return-call the data service "mydataservice" web method getallrecords. The following list shows the implementation code of this method.

List 4

[Webmethod] [Dataobjectmethod (dataobjectmethodtype. Select)] Public list <rssinfo> getallrecords () { Return new sqltaskprovider (). getallrecords (); }

For more information about modifying attributes before this method, see ASP. NET Ajax online documentation. Now, once this method is executed, the client listview control "rssnamelist" is filled in with records stored in the server SQL Server database table rssstore.

Note: here we have implemented some tips: to achieve a better user experience, we have hidden two fields rss_id and rss_url (the content in these two fields does not need to be displayed ). The following shows the corresponding HTML code snippet.

List 5

<Div id = "searchresults_itemtemplate"> <Span id = "searchresults_rss_id" style = "display: none; visibility: hidden;"> </span> <Span id = "searchresults_rss_name"> </span> <Span id = "searchresults_rss_url" style = "display: none; visibility: hidden;"> </span> </Div>

There is no need to worry that the ASP. Net Ajax framework will automatically differentiate this situation and can still fill the listview control with database record data, but only hide the display of the two fields.

Now let's analyze the second scenario-when the user clicks "refresh. Although literally, we use "refresh", this button is used to load the database data on the server to the current listview control. This process is directly related to the Data Control datasource of the client. The following XML-script code shows you the corresponding programming.

LIST 6

<Button id = "refresh"> <Click> <Invokemethodaction target = "rssinfodatasource" method = "LOAD"/> </Click> <Bindings> <Binding datacontext = "rssinfodatasource" datapath = "isready" Property = "element" propertykey = "disabled" transform = "invert"/> </Bindings> </Button>

The code above shows that when you click "refresh", the load method of the client datasource control "rssinfodatasource" is called. Then, the web method getallrecords will be called asynchronously, and the data returned by the web method will be filled in the listview control.

For the sake of completeness, in this example, we also introduce a "save" button, which is opposite to the "refresh" button. When you click "save", all the newest RSS channel data in the listview control will be Ajax (that is, "Asynchronous) permanently stored in the SQL Server database on the server. To further explore the function of this button, please refer to another article I posted on 51ctoArticle""; In this article, I have comprehensively analyzed the interaction between the ASP. Net Ajax client listview and itemlist controls and the server SQL Server database packaged with Web Services.

(3) display the corresponding content of the specified RSS Channel

Now the problem is getting more and more interesting. To display the content of an RSS feed, just click an item in the listview control and then let the accordion control on the right display the corresponding details? Yes, but this is only the conclusion from the user's perspective. But as a developer, it took me a lot of time to find an implementation solution to solve this problem. Next, let me introduce you one by one.

Obtain RSS feed content through the network

1. About the listview Control

For the "advanced" client listview control provided by the ASP. NET Ajax framework, I would like to briefly discuss a few words. Previewscript from the source code file of the Research Framework. JS, we found that the descriptor block definition in this control (Note: Only content in this block can be used in XML-script Declarative Programming) only a small number of objective attributes, methods, and event definitions are provided. The following describes the definition of the descriptor block of the control.

List 7

sys. preview. UI. data. listview. descriptor = { properties: [{Name: 'alternatingitemcssclass ', type: string}, {Name: 'layouttemplate', type: SYS. preview. UI. itemplate },< br> {Name: 'itemcssclass ', type: string}, {Name: 'itemtemplate', type: SYS. preview. UI. itemplate },< br> {Name: 'itemtemplateparentelementid', type: string}, {Name: 'selecteditemcssclass ', type: string }, {Name: 'separatorcssclass ', type: string}, {Name: 'separatortemplate', type: SYS. preview. UI. itemplate },< br> {Name: 'emptytemplate', type: SYS. preview. UI. itemplate}], events: [{Name: 'rendercomplete'}] }

In the preceding descriptor block definition, there are only a few limited attributes and an event. The method we will use later will also turn to the control's parent class datacontrol. Therefore, to control each item (corresponding to a record data) in the user-clicked listview Control, we have to further study the prototype block in the listview control definition and turn to JavaScript programming.

2. Add events for listview through JavaScript programming

First, let's list all the corresponding source code.

List 8

Here, we first use the global method $ addhandler to turn the event processor clickrowhandler off and smell the Click Event of the listview control rssnamelist. Next, we will analyze the programming of this event processor function. At the beginning, ev.tar get points to listview rssnamelist. When the program executes the if Condition Statement, the variable s points to searchresults_itemtemplate (where the database records are displayed ). Now, we can use the idx variable to retrieve the current value of the record index and obtain any field values we want to retrieve (here, we are only interested in the last field rss_url ).

The situation has become increasingly complex-how can we dynamically specify RSS URLs for the rssdatasource control (note that this is a third-party server-side Data Control? Here, my solution is to turn to the method "_ dopostback ". According to the analysis in this article, we generally cannot dynamically bind rssdatasource to the acccordion control in a web service method. In this way, we can only find another way-codefile file ajaxrssreader. aspx. CS. Experiments show that in this background file, we can achieve the above goal-dynamically bind rssdatasource to acccordion (note that we cannot implement this binding in the client Javascript script, because this is a server-side data source control ). This is exactly why we resort to the _ dopostback method. With this method, we can indirectly implement communication between client controls and server controls.

To achieve the above goal, we need to create two "dummy ASP. NET controls (this is just my idea)-one button control and one Textbox Control. Since they must not be displayed at runtime, we set their dimensions to the minimum value (the width and height are all 1 pixel X ), set the background to light gray (which corresponds to the background color of "buttonarea" in the button area ).

[Note] in the experiment, I found that we could not set the visible attribute of the two "Dummy" controls to false; otherwise, a runtime error would occur.

Next, through the call method "_ dopostback", we indirectly call the server-side Click Event processor-dummysrvbtn_click (Object sender, eventargs E) (this function is located in the codefile file ajaxrssreader. aspx. in CS ). The following is the source code of the function.

List 9

Protected void dummysrvbtn_click (Object sender, eventargs E) { Rssdatasource1.url = txtrssurl2.text. Trim (); Accordion1.performanceid = "rssperformance1 "; Accordion1.databind (); }

Now, let's skip the analysis of this Code.

Then, the value of the field rss_url is assigned to the associated HTML input element txtrssurl2.clientid (corresponding to ASP. net server-side Id-txtRssUrl2) attribute value (corresponding to the corresponding server-side text attribute), we have successfully achieved the data from the client to the server side.

Finally, calling the method "_ dopostback" will inevitably lead to a refresh of the entire page-which is fundamentally contrary to the basic idea of Ajax. This is why we introduced the ASP. NET Ajax Server Control updatepanel, which surrounded the corresponding zone of the accordion control. Note: here we use the asyncpostbacktrigger trigger of updatepanel to trigger the updatepanel refresh operation by making the Click Event of the "dummysrvbtn" button. The following section describes the relevant HTML code.

List 10

<Asp: updatepanel id = "updatepanel1" runat = "server"> <Triggers> <Asp: asyncpostbacktrigger controlid = "dummysrvbtn" eventname = "click"/> </Triggers> <Contenttemplate> <Ajaxtoolkit: accordion id = "accordion1" cssclass = "myaccordion" headercssclass = "Header" ............ (Omitted)

Therefore, we introduced the Server Control updateprogress to work with the updatepanel control for a more friendly user experience.

Maybe the above solution is too ugly. Therefore, I hope that readers can further improve it.

Show Channel content

So far, this step has become quite simple. In fact, we have achieved this goal in source code 9 above. By dynamically assigning values to the property URL of the control rssdatasource1, binding it to the control accordion1, and then calling the method databind of accordion1, we finally display the webpage content of the channel based on the channel title information clicked by the user.

[Note] First, I did not find any examples to realize the dynamic assignment of the rssdatasource control through Google searching the Internet. Second, because some RSS contents may not contain the author field, I simply comment out this field in the <contenttemplate> block of the accordion control.

Finally, let's take a look at our final results, as shown in Figure 5.

Figure 5: Sample runtime snapshot after the user clicks "Scott Guthrie" on the RSS Channel

Vi. Summary

In this article, we developed a simple RSS reader program using the Microsoft ASP. NET Ajax framework. As a demo program, we only want to explore the basic usage of this framework; therefore, there are still many areas to be improved:

1) only use ASP. NET Ajax Client technology for development

2) Further explore other methods for communication between the client and the server

3) use the terminal tview control to replace the ASP. NET Ajax Control Toolkit control accordion used in this article to display the RSS channel content.

4) use the client control validator-regexvalidator to verify the RSS feed address entered by the user more strictly.

5) further supports deletion/modification of RSS channel information at runtime

6) add additional types of RSS and provide users with classification management

.........

If you are interested, you can follow these tips to further improve the example in this article.

Address: http://developer.51cto.com/art/200708/53158_3.htm