Build an AJAX Based ASP.NET Web Tag Application - Part 2
page 3 of 12
by Xianzhong Zhu
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 45381/ 111

Displaying the Web Tag List

When you click the tag category name on the left part, the tag's info belonging to the related category will be displayed on the right side. The right part is the rather complex part in the tag system, where we cannot use the simple connecting string to meet the requirement of rendering the page. In this case, we will fall back upon the XSLT technique to transform the XML structured data into the HTML code form.

This above task is performed with page ListNotes.aspx, where the SQL Server's special FOR XML clause is used to help finish the database query. As you maybe have already known, a SQL query with a FOR XML sub clause will return the XML formatted data, which in combination with the XmlReader class in .NET platform will easily achieve the aim of outputting data in the XML format. Listing 6 indicates the behind-code of page ListNotes.aspx.

Listing 6

protected void Page_Load(object sender, EventArgs e)
{
      if (Request.Params["sid"] != null)
      {
            // Get the tag category id
            int iSectionId = Convert.ToInt32(Request.Params["sid"]);
 
            //create the database access object
            SqlDatabase db = DatabaseFactory.CreateDatabase
               ("DatabaseConnectionString"as SqlDatabase;
 
            // SQL clause: note the use of the FOR XML sub clause
            string sqlCommand = 
                  "SELECT id, title, link, description, html, [order] " +
                  "FROM note WHERE section_id = " + iSectionId.ToString() +
                  " ORDER BY [order] FOR XML AUTO, ELEMENTS";
 
            //create the SQL Command object according to the above sql clause
            DbCommand dbCommand = db.GetSqlStringCommand(sqlCommand);
 
            XmlReader reader = null;
            StringBuilder sb = new StringBuilder();
 
            try
            {
                  //obtain the XML styled data reader
                  reader = db.ExecuteXmlReader(dbCommand);
            }
            finally
            {
                  if (dbCommand.Connection != null)
                  {
                        dbCommand.Connection.Close();
                  }
            }
            
            // xslt transformation
            XslCompiledTransform xslt = new XslCompiledTransform();
            xslt.Load(Server.MapPath("~/xsl/notes.xsl"));
 
            // render the result via xslt transformation
            XmlWriter writer = new XmlTextWriter(Response.Output);
            xslt.Transform(reader, writer);
      }
}

Note that accessing page ListNotes.aspx requires an input parameter sid, which just corresponds to the tag category id. Another point you should take notice of is that file notes.xsl here is the XSLT transformation style file, which plays the role of transforming the XML data returned from the database query into the HTML code and render it onto the page. However, for brevity, we will not list the long content of file notes.xsl.

Next, in the client side JavaScript code two tasks need to be finished: one is add the onclick event handler for the items inside the tag category list, the other is put the output HTML code from page ListNotes.aspx inside the corresponding <div/> element on the main page.

To achieve the target of adding the onclick event handler for the items inside the tag category list, we can recur to the "Event.observe" method provided by Prototype. This is done using the code in Listing 7.

Listing 7

function InitSection(xmlhttp) {
  // Show tag category list
  $("sections").innerHTML = xmlhttp.responseText;
  
  // mark the start and  end orders during the course of the dragging respectively
  var start_order, end_order;
  
    var sort = Sortable.create("section_list", 
 {
              //ghosting: true,
              constraint: false,
              starteffect: function(element) {
                    // mark the initial order before dragging
                    start_order = Element.FindIndexOf("section_list", element);
                    start_order = parseInt(start_order) + 1;
              },
              endeffect: function(element) {
                    // mark the result order after dragging
                    end_order = Element.FindIndexOf("section_list", element);
                    end_order = parseInt(end_order) + 1;
      
                    //invoke the page MoveSection.aspx in the Ajax 
                    //mode to move the tag section
                    var pars = "oid=" + start_order + "&noid=" + end_order;
                    new Ajax.Request("MoveSection.aspx", 
                      {mothed: "GET", parameters: pars});
    }
  });
  
  // add onclick response
            $A($("sections").childNodes).each(
                  function(element, index) {
                        Event.observe(element, "click", ListNotes, false);
                  }
            );
}
function ListNotes(event) {
            // remove  "li_" before each id,can convert it to section id
      var section_id = Event.element(event).id.getId();
      $("selSection").value = section_id;
      new Ajax.Request(
            "ListNotes.aspx", {
                  parameters: "sid=" + section_id,
                  onComplete: ShowNotes
            }
      );
}
 
function ShowNotes(xmlhttp) {
          $("rightArea").innerHTML = 
             xmlhttp.responseText;
…… (omitted)

In the above code, we again used the iterate-through function of the enumerable objects to loop through all the sub nodes within the <div/> element representing the tag category list to attach the onclick event handler to them.

By examining further, you may find that the onclick event handler function is specified as ListNotes. Inside the function ListNotes, we use the "Ajax.Request" class to send asynchronous request to page ListNotes.aspx.

However, before sending out the request to page ListNotes.aspx, one question should be tackled out: how to grab the id of the current tag category? In essence, during the previous course of displaying the tag category and tag info, we have already made preparation for this. Acute readers may have found out that in the tag category and tag lists related HTML code, the naming of the element ids are in well regularity: they are all ended with the symbol underscore plus the id number. Therefore, if we obtain the id of the onclick event source, we can easily get the id's of the tag categories and tags. For this, we should fall back on the extension function getid of the String object, which can acquire the sub string after the last symbol underscore. Here is the related code.

Listing 8

String.prototype.getId=function(){
      Return this.substr( this.lastIndexOf("_")+1);
}

Up to now, we have nearly finished the task of displaying the tag info. The last small function that requires adding to this part is the unfold/collapse support to each tag info block. You may have already noticed that at the upper left corner of each tag rectangle there are small triangle icons through which we wish to add the tag info unfold/collapse function. Please look at the following script code.

Listing 9

function ShowNotes(xmlhttp) {
  …… (omitted)
            $$(".showHide").each(
                  function(item) {
                        Event.observe(item, "click",
                              function(event) {
                                    var target = 
                                     event.target ? event.target : event.srcElement;
                                    var id = target.id.getId();
                                    Effect.toggle("content_" + id, "appear", 
 {
                                          transition: Effect.Transitions.full,
                                          duration: 0.2,
                                          afterFinish: function (effect) {
                                                $("img_" + id).src = 
                                                      effect.element.visible() ?
                                                      "images/hideMod.gif" : 
                                                      "images/showMod.gif";
                                          }
                                    });
                              }, false
                        );
                  }
            );
…… (omitted)
}

Here, we again used the Event.observe method to attach the onclick event handler to the <img> elements. Morever, we rested on the special effect (in this case the Effect.toggle method) provided by the script.aculo.us framework to achieve the aim of displaying and hiding the tag info.

The last detail you need to notice is that we used the CSS selector support of Prototype to grab all the sets with the CSS class named "showHide," and then attached the corresponding onclick event handlers to each of the items. The following two figures show the unfolding and collapsing effect of the tag info blocks, respectively.

Figure 3 - Hiding the tag info block

Figure 4 - Displaying the tag info block


View Entire Article

User Comments

Title: Thanks   
Name: Cong Doan
Date: 2009-04-13 11:17:25 AM
Comment:
Thanks for your Article! It's wonderful!






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-05-28 6:42:42 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search