This demo shows on how to create an "Editable" Label in the page. As we all know, a Label control is intended for displaying read-only data information in the page and thus we cannot make it editable just like the TextBox control. As a workaround we can create a floating Div/Panel with a TextBox. Clicking on the Label will display a Div with a TextBox on it and a Button for updating the Text in the Label. In this demo, i used JavaScript for manipulating the elements in the page and apply a little bit of CSS for setting up the styles.
Note that I did not include here on how we are going to save the value in the database.
Here are the code blocks below:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Editable TextBox Demo</title>
<script type="text/javascript">
function ShowEditBox()
{
document.getElementById('EditContainerDiv').style.display = "block";
document.getElementById('Label1').style.display = "none";
document.getElementById('TextBox1').value = document.getElementById('Label1').innerHTML;
return false;
}
function HideEditBox()
{
document.getElementById('EditContainerDiv').style.display = "none";
document.getElementById('Label1').style.display = "block";
document.getElementById('Label1').innerHTML = document.getElementById('TextBox1').value;
return false;
}
</script>
<style type="text/css">
.ContainerStyle
{
float:left;
position: absolute;
z-index:2;
display:none;
background-color:Gray;
top: 20px;
left: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Input Something Here" style="display:block;" onclick="return ShowEditBox();"/>
<div id="EditContainerDiv" class="ContainerStyle">
<asp:TextBox ID="TextBox1" runat="server"/> <br />
<asp:Button ID="Button1" runat="server" Text="Update" OnClientClick="return HideEditBox();"/>
<asp:Button ID="Button2" runat="server" Text="Close" OnClientClick="return HideEditBox();" />
</div>
</div>
</form>
</body>
</html>
|
Running the page will give us this output below:
Clicking on that Label will display a Div as shown below:
As you can see, the TextBox automatically fills the Text that was displayed from the Label Control. From there, we can now edit a new value to the TextBox and clicking on the Update Button will automatically hide the Div and show the edited value in the Label.
That's Simple! Hope you will find this example useful!