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

Moving a Web Tag

As with the tag category, the orders of the tags within a special category are also in some sequence. In this case, we display all the tags according to the order field defined in table note. In this section, we are to add the mouse drag & drop functionality to the tag list, so that users can use a simpler and more intuitive mode to adjust the order of the tag info.

In this sample, we use page MoteNote.aspx to achieve the moving tag function on the server side.

Listing 10

protected void Page_Load(object sender, 
 EventArgs e)
{
      if ((Request.Params["id"] != null) &&
            (Request.Params["noid"] != null))
      {
            // tag id
            int iNoteId = Convert.ToInt32(Request.Params["id"]);
 
            //tag order
            int iNewOrderId = Convert.ToInt32(Request.Params["noid"]);
 
            // set up the database access object
            Database db = DatabaseFactory.CreateDatabase
              ("DatabaseConnectionString");
 
            //the stored procedure MoveNote
            string sqlCommand = "MoveNote";
            DbCommand dbCommand = db.GetStoredProcCommand(sqlCommand);
 
            // provide the input parameters for the SP
            db.AddInParameter(dbCommand, "id", DbType.Int32, iNoteId);
            db.AddInParameter(dbCommand, "new_order", DbType.Int32, iNewOrderId);
 
            // execute the stored procedure
            db.ExecuteNonQuery(dbCommand);
      }
}

There are two input arguments required by page MoveNote.aspx, id and order, which represent the id and order properties of the to-be-moved tag respectively.

In this case, we used the "Sortable.create" method to achieve the drag & drop functionality. However, the idea here is a bit different from that in moving the tag category. Because the parameter id passed to page MoveNote.aspx can be obtained by using the id property of the dragged object, herein we do not need the starteffect callback function any more. While in another callback function - endeffect send out the asychronous request to page MoveNote.aspx to finish the backend database related operations. The relevant script code is as follows.

Listing 11

function ShowNotes(xmlhttp) {
            
      //make the automatically added tag own automatic completing functionality
      EnableAutoCompleter();
            
      //mark the start and  end order during
       the course of the dragging
      var end_order;
  
      Sortable.create("notes", {
                  //ghosting: true,
                  constraint: false,
                  endeffect: function(element) {
            // mark the result order after dragging
            end_order = Element.FindIndexOf("notes", element);
                        end_order = parseInt(end_order) + 1;
      
            // invoke the page MoveNote.aspx in 
            // the Ajax mode to move the tag section
            var pars = "id=" + element.id.getId() + "&noid=" + end_order;
            new Ajax.Request("MoveNote.aspx", {mothed: "GET", parameters: pars});
    }
  });

With enough comments between the lines, we do not dwell upon the explanation. Next, let us take a glimpse at one of the running-time snapshots, as shown in Figure 5 below.

Figure 5 - Dragging any tag info area to adjust the tag sequence

On the right part of the figure, you can drag any rectangle tag info area to adjust the tag sequence at discretion.


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