The modifying function resembles the adding operation. In
this case, we have also provided a special <tag/> area to edit the tag
info. When clicking the "edit" button at the upper right part of the
tag info block the special area becomes visible inside which the modification
operation will be performed. The related server page is EditNotes.aspx, whose
behind code is listed below.
Listing 22
protected void Page_Load(object sender,
EventArgs e)
{
if ((Request.Params["id"] != null) &&
(Request.Params["title"] != null) &&
(Request.Params["link"] != null) &&
(Request.Params["desc"] != null) &&
(Request.Params["html"] != null))
{
// tag id
int iNoteId = Convert.ToInt32(Request.Params["id"]);
// tag title
string strTitle = Request.Params["title"];
// tag URL
string strLink = Request.Params["link"];
// the description of the tag
string strDesc = Request.Params["desc"];
// the HTML code of the tag
string strHtml = Request.Params["html"];
// set up the database access object
Database db = DatabaseFactory.CreateDatabase
("DatabaseConnectionString");
// the object to manipulate the SP EditNote
string sqlCommand = "EditNote";
DbCommand dbCommand = db.GetStoredProcCommand(sqlCommand);
// provide the input parameters for the SP
db.AddInParameter(dbCommand, "id", DbType.Int32, iNoteId);
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);
// execute the stored procedure
db.ExecuteNonQuery(dbCommand);
}
}The meanings of the five passed arguments are below.
·
Id - the id property of the to-be-modified
tag
·
Title - the title property of the to-be-modified
tag
·
Link - the link property of the to-be-modified
tag
·
Desc - the desc property of the to-be-modified
tag
·
Html - the html property of the to-be-modified
tag
·
Order - the order property of the to-be-modified
tag
In the client-side JavaScript script, we have also used the "Ajax.Request"
class to asynchronously send requests to page EditNote.aspx to edit a specified
web tag. And also, if the request succeeds, the tag list will be updated, and
after that, the corresponding <div/> mark area will again become hidden.
Here is the relevant JavaScript script.
Listing 23
function UpdateNote() {
var paras = "id=" + $("editNoteId").value +
"&title=" + escape($("editTitle").value) +
"&link=" + escape($("editLink").value) +
"&desc=" + escape($("editDesc").value) +
"&html=" + escape($("editHtml").value);
new Ajax.Request("EditNote.aspx", {
mothed: "GET",
parameters: paras,
onComplete: function (xmlhttp)
{
var section_id = $("selSection").value;
new Ajax.Request(
"ListNotes.aspx", {
parameters: "sid=" + section_id,
onComplete: function (xmlhttp) {
Element.hide("editArea");
ShowNotes(xmlhttp);
}
}
);
}
});
}Finally, let us look at one of the running-time snapshots of
the tag editing scene.
Figure 8—the running-time snapshots of the tag
editing scene
Note for a poor CSS+DIV layout foundation, I have not
elegantly controlled the position of the tag editing area. So, you can recreate
it yourself.
