Click here to Skip to main content
11,481,404 members (57,938 online)
Click here to Skip to main content

Dynamic label editor web control on ASP.NET

, 19 Sep 2012 CPOL 3.7K 1
Rate this:
Please Sign up or sign in to vote.
How to create a dynamic label editor web control on ASP.NET (textbox and label).

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:

Basic control:

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

sohaib patel

Pakistan Pakistan
No Biography provided

Comments and Discussions

 
QuestionControls_EditText editableControl = (Controls_EditText)EditableTextBox1; // "Controls_EditText" Shows me an error Pin
Member 1116561319-Oct-14 20:11
memberMember 1116561319-Oct-14 20:11 
QuestionHow to add a default Text while adding on the page?? Pin
VICK16-Jan-14 20:24
member VICK16-Jan-14 20:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 20 Sep 2012
Article Copyright 2012 by sohaib patel
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid