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.
