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

Adding a New Web Tag

The adding a new web tag in this section and the followed modifying a web tag are a bit complex because they are all connected with a special area for handling the tag. In this case and under normal conditions, the tag handling area is hidden. It is not until you select the menu item "Adding a new web tag" that thr mark area for the tag can be seen.

It is in page AddNote.aspx that the stored procedure AddNote is invoked to add a new tag. The following lists the total code for AddNote.aspx.cs.

Listing 19

public partial class AddNote : System.Web.UI.Page
{
      protected void Page_Load(object sender, EventArgs e)
      {
            if ((Request.Params["sid"] != null) &&
                        (Request.Params["title"] != null) &&
                        (Request.Params["link"] != null) &&
                        (Request.Params["desc"] != null) &&
                        (Request.Params["html"] != null) &&
                        (Request.Params["order"] != null))
            {
                  // tag category id
                  int iSectionId = Convert.ToInt32(Request.Params["sid"]);
 
                  // tag title
                  string strTitle = Request.Params["title"];
 
            // tag link URL
                  string strLink = Request.Params["link"];
 
                  //tag description
                  string strDesc = Request.Params["desc"];
 
                  // the tag HTML code
                  string strHtml = Request.Params["html"];
 
                  // tag order
                  int iOrder = Convert.ToInt32(Request.Params["order"]);
 
                  // set up the database access object
                  Database db = DatabaseFactory.CreateDatabase
                    ("DatabaseConnectionString");
 
                  // define the SP AddNote related object
                  string sqlCommand = "AddNote";
                  DbCommand dbCommand = db.GetStoredProcCommand(sqlCommand);
 
            // provide the input parameters for the SP
            db.AddInParameter(dbCommand, "title", DbType.String, strTitle);
            db.AddInParameter(dbCommand, "link", DbType.String, strLink);
            db.AddInParameter(dbCommand, "description", DbType.String, strDesc);
            db.AddInParameter(dbCommand, "html", DbType.String, strHtml);
            db.AddInParameter(dbCommand, "section_id", DbType.Int32, iSectionId);
            db.AddInParameter(dbCommand, "order", DbType.Int32, iOrder);
 
                  // execute the stored procedure
                  db.ExecuteNonQuery(dbCommand);
            }
      }
}

Here, let us give more explanations concerning the six arguments passed to page AddNote.aspx.

·         Sid - the id property of the to-be-added tag

·         Title - the title property of the to-be-added tag

·         Link - the link property of the to-be-added tag

·         Desc - the desc property of the to-be-added tag

·         Html - the html property of the to-be-added tag

·         Order - the order property of the to-be-added tag

In the client-side JavaScript script, we, as usual, use the "Ajax.Request" class to asynchronously send requests to page AddNote.aspx to add a new web tag. And also, if the request succeeds the tag list will be updated, and after that, the corresponding <div/> mark area will be hidden. Here lists the relevant JavaScript script.

Listing 20

function AddNote(id) {
            //prepare the arguments
            var paras = "order=1&sid=" + $F("selSection") +
                  "&title=" + escape($("addTitle").value) +
                  "&link=" + escape($("addLink").value) +
                  "&desc=" + escape($("addDesc").value) +
                  "&html=" + escape($("addHtml").value);
            //make request and achieve the adding function behind
            new Ajax.Request("AddNote.aspx", {
                  mothed: "GET",
                  parameters: paras,
                  onComplete: function (xmlhttp) 
 {
                  //the id of the current tag category
                  var section_id = $("selSection").value;
                  //update the tag list
                  new Ajax.Request(
                        "ListNotes.aspx", {
                              parameters: "sid=" + section_id,
                              onComplete: function (xmlhttp) {
            //hide the adding mark area
                                    Element.hide("addArea");
            //update the tag info related to current tag category
                                    ShowNotes(xmlhttp);
                              }
                        }
                  );
                  }
            });
}

To gain a more convenient mode for the user to enter the title and the hyperlink of the tags, we have provided the automatic completion support when adding a new tag, so that when the user is entering the title and URL info, the page will give related prompt based upon the info in the title and URL set, which is carried out using the "Autocompleter.Local" class provided by the script.aculo.us framework. Listing 21 gives the automatic completion related programming.

Listing 21

function EnableAutoCompleter() {
        // title
        var titles = [];
        $$(".module .moduleFrame .moduleHeader .title").each( function (element) {
            titles.push(element.innerHTML);
        });             
        new Autocompleter.Local("addTitle", "titleList", titles);
        // website's url
        var links = [];
        $$(".moduleContent div span a").each( function (element) {
            links.push(element.href);
        new Autocompleter.Local("addLink", "linkList", links, {fullSearch: true});
}

The basic idea here is when displaying all the tag info belonging to a special category, we have used  two Array objects, titles and links, to persist all the title and URL info of this category, and then by using the "Autocompleter.Local" class to append the automatic completion function. By the way, we have used the CSS selector function $$ to grab all the tag and URL info, and then save it into the related Array objects. Figure 7 illustrates the automatic hint support when entering the tag title.

Figure 7—the automatic completing support in the running time

In the last section, we will turn to delve into how to edit the special tag info.


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-03-29 6:27:17 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search