Editable Label Convert a Label to TextBox when clicked using jQuery in ASPNet

In this article I will explain how to make a Label editable i.e. when the Label is clicked it will be converted into a TextBox using jQuery in ASP.Net, C# and VB.Net.

Once the edit is done and user clicks anywhere outside the TextBox, it will get converted back to a Label using jQuery.

HTML Markup

The following HTML Markup consists of an ASP.Net Label and a Button.

For the Label control, I have set a CssClass named editable. This CssClass will be used with jQuery to make the Labels editable.

<tr>

<td>

Name: 

</td>

<td>

<asp:Label ID="lblName" runat="server" Text="Mudassar" CssClass="editable" />

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

<asp:Button Text="Submit" runat="server" OnClick="Submit" />

</td>

</tr>

</table>

Convert a Label to TextBox when clicked using jQuery

Inside the jQuery document ready event handler, a loop is executed over each Label with CssClass editable.

Inside the loop, a dynamic hidden TextBox element is created and attached next to the Label control.

An OnClick event handler is assigned to the Label control and when the Label is clicked, the Label is made invisible and its associated TextBox control is shown with the value of the Label.

Note: The TextBox is assigned a name similar to the ID of the Label control, the name property of the TextBox will be used to fetch the values of the TextBox on Server Side.

An OnFocusOut event handler is assigned to the dynamic TextBox control so that when the edit is completed and user leaves focus from the TextBox it can be again converted back to a Label control with the updated value.

$(function () {

//Loop through all Labels with class 'editable'.

$(".editable").each(function () {

//Reference the Label.

var label = $(this);

//Add a TextBox next to the Label.

label.after("<input type = 'text' style = 'display:none' />");

//Reference the TextBox.

var textbox = $(this).next();

//Set the name attribute of the TextBox.

var id = this.id.split('_')[this.id.split('_').length - 1];

textbox[0].name = id.replace("lbl", "txt");

//Assign the value of Label to TextBox.

textbox.val(label.html());

//When Label is clicked, hide Label and show TextBox.

label.click(function () {

$(this).hide();

$(this).next().show();

});

//When focus is lost from TextBox, hide TextBox and show Label.

textbox.focusout(function () {

$(this).hide();

$(this).prev().html($(this).val());

$(this).prev().show();

});

</script>

Fetching the value of the Editable Label on Server Side in ASP.Net

On Server Side, the value of the dynamic TextBox is fetched using its name attribute from the Request.Form collection.

The fetched value is assigned to the Label control as Label controls does not retain values across PostBacks when modified using Client Side scripts such as JavaScript or jQuery.

The fetched value is also displayed using JavaScript alert.

protected void Submit(object sender, EventArgs e)

{

string name = Request.Form["txtName"];

lblName.Text = name;

ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('Name: " + name + "');", true);

}

VB.Net

Protected Sub Submit(sender As Object, e As EventArgs)

Dim name As String = Request.Form("txtName")

lblName.Text = name

ClientScript.RegisterClientScriptBlock(Me.GetType(), "alert", "alert('Name: " & name & "');", True)