Inline-Edit Control Using ASP.NET 2.0 AJAX 1.0 Extensions
page 4 of 7
by Bilal Haidar
Average Rating: 
Views (Total / Last 10 Days): 34754/ 86

How to use the Inline-Edit AJAX class

Now that the AJAX class has been created, it is time to test it on a Web Form. The first thing to do is add a new ScriptManager and load inside the Script Reference section the AJAX class created above. You will end up with something like this:

Listing 9

<asp:ScriptManager ID="ScriptManager1" runat="server">
<asp:ScriptReference Path="InlineEdit.js" />

Now to enable editable areas on the page, add the following span tag.

Listing 10

<span class="editText" id="txtName"><h1>Inline-Edit with AJAX 1.0 Extensions! </h1></span>

You will also need to attach to the pageLoad event of the Application class that is part of the AJAX Extensions Client Library.

In the pageLoad you will create a new instance of the inline-edit AJAX class so that all the editable spans are configured for editing.

The pageLoad function body is shown in Listing 8.

Listing 11

var inlineEdit = null;
function pageLoad(sender, args) {
    // Create a new instance of the class
    inlineEdit = new bhaidar.CodeSuite.AJAX.InlineEdit("txtName");
    // Initialize the InlineEdit

A new instance of the Inline-Edit AJAX class is created and the EditBoxInit() function is fired. Now you are ready to test your Web form in the browser and try to edit the text on the spot.

Figure 1 shows the Web form in its read-only original state.

Figure 1

Figure 2 shows the Web Form with a click is done on the editable span. As you can see, the text that was first inside the span is now displayed in a Textbox on the page. Once an Enter key is done, you will see how the Web form now shows the new edited text.

Figure 2

View Entire Article

User Comments

Title: Glo Vapor Electonic Cigarette   
Name: Chris Fontan
Date: 2010-06-20 12:42:14 PM
we used the inline edit in the admin section of our website! It works GREAT!

Electronic cigarettes, 510 ego, tornado, glo stick, ecigarettes, liquid nicotine, long battery life, smokeless cigarettes, healthy cigarette, water vapor, tobacco alternative, stop smoking, quit smoking
Title: thanks   
Name: gasby
Date: 2010-04-09 12:27:13 PM
the change does not reflect in the span when the page is refreshed
Title: Not Download   
Name: Adil
Date: 2009-06-11 2:53:58 AM
I want to download this arttical but not going to download .please ckeck it.
This is very good idea.
Title: using more than 1 region   
Name: Chris Fontan
Date: 2008-09-23 12:49:48 PM
is there a little more information on using multiple editable regions?
Title: Cool one   
Name: Habiburahman Khaled
Date: 2007-11-03 3:16:36 AM
Thanks great one.
Title: Updates   
Name: Mikhail
Date: 2007-10-18 5:26:01 PM
As far as I can see (correct me if I wrong) you can only update one field at a time.

I think it will be much better is to have autimatically generated button , which loops through all the controls on the form and check the class. if class is editText, if submit the ajax update request to the update page and when update is done, then refreshes all controls.
Title: Good Idea   
Name: Worawut Boontan
Date: 2007-10-18 8:14:57 AM
very nice idea.
Title: Re:   
Name: Bilal Haidar
Date: 2007-10-07 2:21:56 AM
Thanks guys, you are full of sense,
Hey check out another version of the above control. In fact this one was based on another script and adding it to a website requires some work, that is why I came up with a new control that is a server control and enables inline edit. I will soon have an article on it, check it out here:

Hope you enjoy it!
Title: Very Very Cool!   
Name: Mohammad Azam
Date: 2007-10-06 11:39:09 PM
Wow! thank is soooo awesome :)
Title: Nice   
Name: Steve
Date: 2007-10-05 4:39:07 PM
Very cool!

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2021  |  Page Processed at 2021-12-08 2:48:25 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search