Dynamic label editor web control on ASP.NET

Introduction

How to create a web control on ASP.NET which is editable (includes textbox and label).

This includes easy working around for example once created you can use it in a website which dynamically handles editing of labels.

Using the code

First add a "WebUserControl.ascx" in your .NET project.

I renamed the Web User Control to "EditText.ascx". Then add the following HTML to "WebUserControl.ascx".

<script type="text/javascript" language="javascript">
    function OnEditText(tbox, pa, textBox, Ddiv, aEdit, aSave, aCancel) {
        if (textBox != null && Ddiv != null && 
                  aEdit != null && aSave != null & aCancel != null) {

//            $("#AllowEdit").show();
            textBox.style.display = "block";
            Ddiv.style.display = "none";
            aEdit.style.display = "none";
            aSave.style.display = "block";
            aCancel.style.display = "block";
            tbox.value = pa.innerHTML;
        }
        return false;
    }
    function OnSaveText(tbox, pa, textBox, Ddiv, aEdit, aSave, aCancel) {
        if (textBox != null && Ddiv != null && 
                   aEdit != null && aSave != null & aCancel != null) {
            textBox.style.display = "none";
            Ddiv.style.display = "block";
            aEdit.style.display = "block";
            aSave.style.display = "none";
            aCancel.style.display = "none";
            pa.innerHTML = tbox.value;
        }
        return false;
    }
    function OnCancelText(textBox, Ddiv, aEdit, aSave, aCancel) {
        if (textBox != null && Ddiv != null && 
                  aEdit != null && aSave != null & aCancel != null) {
            textBox.style.display = "none";
            Ddiv.style.display = "block";
            aEdit.style.display = "block";
            aSave.style.display = "none";
            aCancel.style.display = "none";
        }
        return false;
    }
</script>

<tr >
    <th>                        
    <div id="divTitle" runat="server" >EditText</div>
    </th>                        
    <td style="width: 440px;">
    <div id="DdivEditText">                    
    <p id="divEditText" runat="server" ></p></div>
    <div id="textBoxEditText"  style="display: none;" >
        <asp:TextBox ID="aspTextBoxEditText" 
                    runat="server"></asp:TextBox>
    </div>
    </td>
    <td>
    <a id='aEditTextEdit' href="#" 
        onclick="return OnEditText(document.getElementById(
          '<%=  aspTextBoxEditText.ClientID %>'), 
          document.getElementById('<%= divEditText.ClientID %>') , 
          document.getElementById('textBoxEditText'),document.getElementById('DdivEditText') , 
          document.getElementById('aEditTextEdit'),
          document.getElementById('aEditTextSave'),
          document.getElementById('aEditTextCancel'));">EDIT</a>
    <a id='aEditTextSave' style="display: none" href="#" 
    onclick="return OnSaveText(document.getElementById('<%=  aspTextBoxEditText.ClientID %>'), 
      document.getElementById('<%= divEditText.ClientID %>') , 
      document.getElementById('textBoxEditText'),document.getElementById('DdivEditText') , 
      document.getElementById('aEditTextEdit'),
      document.getElementById('aEditTextSave'),
      document.getElementById('aEditTextCancel'));"> SAVE</a>
    <a id='aEditTextCancel' style="display: none" 
       href="#" onclick="return OnCancelText(document.getElementById('textBoxEditText'),
             document.getElementById('DdivEditText') , 
             document.getElementById('aEditTextEdit'),
             document.getElementById('aEditTextSave'),
             document.getElementById('aEditTextCancel'));">CANCEL</a>
    </td>
</tr>

This includes the HTML and JavaScript of the control.

Use

To use this control just create a Web form. Include this control in the web form like this:

<%@ Register Src="~/EditText.ascx" TagName="EditableTextBox" TagPrefix="etb" %> 

Use it any where you want like this :

<etb:EditableTextBox ID="EditableTextBox1" runat="server" />

Run the application and you may see the control working. 

Points of Interest

To the get or set the label value you need to have an understanding of how to get to that label.

First get the control and in that control do the following to get or set text:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //get the control
        Controls_EditText editableControl = (Controls_EditText)EditableTextBox1;
        // Set Title value from server side.
        HtmlGenericControl Title = (HtmlGenericControl)editableControl.FindControl("divTitle");
        Title.InnerText = "USERNAME";
        //Set label value from server side.
        HtmlGenericControl label = (HtmlGenericControl)editableControl.FindControl("divEditText");
        label.InnerText = "Sohaib Patel";
    }
    else
    {
        //get the control
        Controls_EditText editableControl = (Controls_EditText)EditableTextBox1;
        TextBox txtBox = (TextBox)editableControl.FindControl("aspTextBoxEditText");
        string value = txtBox.Text;
    }
}

Screenshots:

After pressing the Edit button, the label changes to an editable textbox.

I hope you like the article. Write comments if you need to ask some questions.