[VS2005] Textbox Auto Expand

Here is an example of auto expand a textbox.

1. Control declaration:

<asp:TextBox ID=”txtMsg” runat=”server”  TextMode=”MultiLine” style=”overflow:hidden” onkeyup=”AutoExpand(this, event)” Rows=”2″ />

2. JavaScript function:

function AutoExpand(txtBox, event)
{
if (event.keyCode == “13” || event.keyCode == “8”) {
var therows = 0
var thetext = document.getElementById(txtBox.id).value;
var newtext = thetext.split(“\n”);
therows += newtext.length

document.getElementById(txtBox.id).rows = therows;
return false;
}
}

[JS] Display Textbox When RadioButton Is Clicked

This source code is using the javascript to display the textbox when a radiobutton is clicked. This applies when a user clicks the other specify radio button and the javascript is called to display the textbox. Then, the textbox will be validated if empty.

//Javascript
function InterfaceControl1(id)
{
var radioQ1 = document.getElementsByName(id);
for (var ii = 0; ii < (radioQ1ii++)
{
if (radioQ1[ii].checked){
if (radioQ1[ii].value == “O”){
document.getElementById(“txtQ1”).style.display = ‘inline’; //to show
}
else
{
document.getElementById(“txtQ1”).style.display = ‘none’; //to hide
}
}
}
}

The design code is as below:

<asp:RadioButtonList ID=”rbtnQ1″ runat=”server” RepeatColumns=”2″ RepeatDirection=”Horizontal” CssClass=”chkBoxList” OnClick=”javascript:InterfaceControl1(‘rbtnQ1’);”>
<asp:ListItem Text=”SteelSeries” Value=”SteelSeries”></asp:ListItem>
<asp:ListItem Text=”Razer” Value=”Razer”></asp:ListItem>
<asp:ListItem Text=”Logitech” Value=”Logitech”></asp:ListItem>
<asp:ListItem Text=”Microsoft” Value=”Microsoft”></asp:ListItem>
<asp:ListItem Text=”Others (Please specify)” Value=”O”></asp:ListItem>
</asp:RadioButtonList>

<asp:TextBox ID=”txtQ1″ runat=”server” style=”display:none;” MaxLength=”50″ ValidationGroup=”vdgSubmit”></asp:TextBox>

<asp:RequiredFieldValidator ID=”rfvQ1″ runat=”server” ControlToValidate=”txtQ1″ ErrorMessage=”Please fill in” ForeColor=”Red” ></asp:RequiredFieldValidator>

<br /><br />

[AJAX] ModalPopUp Extender

My first attempt to go back into .Net was trying to do the ModalPopUp. It is an AJAX component and is being used widely in some of the website, including this website too. Do you notice, when you change and choose your new theme, the background of the current page turns black and let you preview the selected theme before activating it. That’s one of the examples.

I tried this feature when I do the login page for my 1st tutorial.  It needs a panel and ModalPopUp extender to do it. The panel contains the username and password textboxes and 2 buttons for login and cancel. The ModalPopUp extender works when the login or cancel button is clicked. I can use CSS for this part to make it more interesting. I need a function to make it works.

Here, is the screenshot.

ModalPopUp

It is using javascript to run. I wanted to try using C# code to display the welcome note instead of using the javascript to display the message.

Sample coding:
1) Insert a scriptmanager control on to the page.

2) To have the modal popup, you have to put the text that you want to display inside a panel and use the AJAX modalpopup extender to display it.
<asp:Panel ID=”Panel1″ runat=”server” CssClass=”modalPopup” style=”display:none;”> 
This is basic modal popup. 
<br /><br /> 
<asp:Button ID=”btnOk” runat=”server” Text=”Ok” /> 
<asp:Button ID=”btnClose” runat=”server” Text=”Close Me” /> 
</asp:Panel> 

<ajaxToolkit:ModalPopupExtender 
BackgroundCssClass=”modalBackground” 
DropShadow=”true” 
OkControlID=”btnOk” 
CancelControlID=”btnClose” 
runat=”server” 
PopupControlID=”Panel1″ 
id=”ModalPopupExtender1″ 
TargetControlID=”Button1″ /> 

3) In order to call this AJAX modalpopup extender, you can add a button to call it.
<asp:Button ID=”Button1″ runat=”server” Text=”First Modal Popup” /> 

4) For styling the  AJAX modalpopup extender, you can do a simple like this,
.modalBackground { 
background-color:#fff; 
filter:alpha(opacity=70); 
opacity:0.7px; 
}  

5) If you want to use the javascript to close the button,
OnCancelScript=”CloseScript()” 

Examples:
http://www.chrismanciero.com/modalpopupextender.aspx
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/modalpopup/modalpopup.aspx
http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-modalpopup-extender-control