In-line Text Editing Without ASP.NET AJAX
8/24/2007 12:04:56 PM
I've seen a lot of posts lately on my usual aggregate blog sites dealing with "using ASP.NET AJAX to accomplish in-line text editing." After reading about 5 of these posts and realizing that they are all pretty much the same in that they rely on utilizing the ASP.NET AJAX library I thought that there must be a less-convoluted method of accomplishing this functionality. I understand that there are a lot of people like me out there that prefer to the roll-their-own for reasons such as personal preference mixed with the fact that they haven't fully crossed over to ASP.NET AJAX.
My initial reaction to these posts was about the same as my reaction to the Mutually-Exclusive Checkbox(List) Extender: <sarcasm>Really? That's all it takes?</sarcasm> I told myself that I could accomplish the same functionality with less code and effort (in my opinion). Last night at about 1:00am I decided to do just that and even timed myself.
The following code is 100% functional and works in both Firefox and IE. It took me 6 minutes to finish. The CSS isn't as pretty (i.e. doesn't exist) as some of the examples but again; 6 minutes.
I will update this with database support in the next couple of days. I plan on moving over to ASP.NET AJAX (or at least the AJAX.NET library) pretty soon.
JavaScript
<
script type="text/javascript" language="javascript">
function
swap(show, hide)
{
document.getElementById(show).style.visibility = "visible";
document.getElementById(hide).style.visibility = "hidden";
var controlId = show + "Text";
var controlValue = document.getElementById(hide).innerHTML;
document.getElementById(controlId).value = controlValue;
document.getElementById(controlId).focus();
document.getElementById(controlId).select();
}
function
blurEvent(item)
{
document.getElementById(item + "Edit").style.visibility = "hidden";
var newValue = document.getElementById(item + "EditText").value;
document.getElementById(item).innerHTML = newValue;
document.getElementById(item).style.visibility = "visible";
}
</
script>
.aspx
<
body>
<form id="form1" runat="server">
<
div id="divFavoriteColor">
<div id="colorEdit" style="visibility: hidden;">
<input type="text" id="colorEditText" onblur="javascript:blurEvent('color')" />
</div>
<label id="color" onclick="javascript:swap('colorEdit', 'color')">Green</label>
</div>
</form>
</body>
Maybe using ASP.NET AJAX Library is easier but I am still content writing my own JavaScript. Personally I think it's fun. If I had someone breathing down my neck about a deadline then maybe I would use an out-of-the-box'ish solution but until then I'll keep it old-school. Remember, this only took 6 minutes. No references, web.config handler configurations, etc.. Also, none of the samples that I have seen include code for updating the database which without, would really render in-line text-editing pretty useless.
Easy.
Update
Notice the naming conventions that I am using for this example. Keeping this in mind, it would be very easy to dynamically generate these controls, div's, and labels while enumerating some List<T> returned from ... Don't forget to override CreateChildControls. Maybe I'll post something later.
AJAX,
JavaScript
