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

Modifying a Web Tag

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.


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 11:35:11 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search