DevLog

Today, I will have a new article on inline-edit control using ASP.NET 2.0 AJAX Extensions published on www.aspalliance.com. That script I wrote was based on a script written by native AJAX. It was simply an ASP.NET 2.0 AJAX Component and not a real control.

I have created lately a new ASP.NET 2.0 AJAX Control called InlineEditLabel control. This is simply an ASP.NET 2.0 AJAX Custom Server Control that you can add to your toolbox and drag it to the ASPX page whenever you need to provide an inline-edit area(s) on your pages.

The idea of this control is that, initially the control displays normal text. When you click on the text, then the text displayed will be now placed inside a textarea  with two buttons: Update and Cancel buttons.

Clicking on the update button, fires a client side event handler that allows developer to handle processing the entered text and the cancel button will put the control back to its original state.

All what you need is download this sample application which contains the InlineEditLabel.dll and a sample page that shows how to use the control. This control runs under .NET 3.5 and VS 2008 Beta 2.

To explain a bit about the control, let us check this sample:

<cc1:InlineEditLabel
    ID="InlineEditLabel1"
    runat="server"
    Text="This is a default text to be changed during the demo!!"
    ToolTip="Click here to edit"
    CssClass=""
    CssHoverClass="hover"
    UpdateButtonText="Update"
    CancelButtonText="Cancel"
    UpdateEvent="OnUpdate"
/>

As you can see, the custom control is called InlineEditLabel. It has the following properties:

ID: ID of the control

Text: This is the text to be shown when the control is to be rendered.

Tooltip: This is the text that is displayed when the mouse gets over the editable text.

CssClass: This is a css class to apply to the editable label represented by "div" element.

CsshoverClass: This is a css class that is applied to the control when the mouse gets over its content.

UpdateButtonText: This is the text shown on the update button that is called to update the entered text.

CancelButtonText: This is the text shown on the cancel button that is used to cancel an update.

In addition, there is one client side event that you need to implement which is UpdateEvent. This event handler is fired when you press the update button to process the entered text.

Now let us add some implementation on the UpdateEvent:

<script language="javascript">
    function OnUpdate(sender, args)
    {
        alert(args.get_data());
        $find('<%= InlineEditLabel1.ClientID %>').set_originalText(args.get_data() + " -- ");
        $find('<%= InlineEditLabel1.ClientID %>')._renderOriginalContents();
    }
</script>

As you can see in the handler above, the args parameters holds the text entered into the textarea. You can grab that text, either perform:

. WebRequest
. Call page method
. Call Webservice method

to reflect the changes on the server.

When the control is in the processing state, it shows a message "saving ...". So it is recommended that you reset the text you want in the control after processing the text entered on the server. This can be easily done by setting the originalText property and calling the _renderOriginalContents() method.

Hope you enjoyed this new control, if you have any questions, please let me know.

Regards

Tags: AJAX-ATLAS

I was surprised to read a post on Scott Guthrie's blog that the .NET Framework Libraries have been released for public!!! You can now debug code and enter directly to the .NET Framework code, that is so cool from Microsoft!!!

 

Can we call the Microsoft .NET Framework now, Microsoft Open Source .NET Framework :)

 

Have a look at this post by Scott: http://weblogs.asp.net/scottgu/archive/2007/10/03/releasing-the-source-code-for-the-net-framework-libraries.aspx

 

Hope this helps,
Regards

Tags:

I will be publishing my first version of the Inline-Edit control on October 4, 2007 on www.aspalliance.com. That control is based on another non-ASP.NET AJAX control. So two days ago I started working on a new version of the Inline-Edit control that is purely an ASP.NET AJAX Control.

I noticed something very nice to share:

When you define private fields in AJAX inside the class constructor and add to it the set/get methods, as properties, then if you don't provide values for these two properties when you use the $create method to create a new instance of that control, the set methods are never called.

 

However, sometimes you might need to give some initialization values for those private fields, so where is the best place to do so? I thought of using the getters and setters but as I explained above, it doesn't help.

What you can do is simply provide the initialization data inside the constructor as the following:

Bhaidar.AJAX.Controls.InlineEditLabel = function(element) {
    Bhaidar.AJAX.Controls.InlineEditLabel.initializeBase(this, [element]);
    this._toolTip= '';
    this._updateButtonText = 'Update';
}

The above sample code is part of the new inline-edit control I am developing. So now, even if the developer didn't provide some text to the updateButonText, she will be able to show the default text specified in the constructor.

 

Hope this helps,

Regards

Tags: