Javascript in ASP.NET

Write
Javascript in HTML file & call it from server side control

private void Page_Load(object sender, System.EventArgs e)
{

btnSave.attribute.add("onclick"," return checkInput();");
}

now in the aspx page

<script language=javascript>
function checkInput()
{

if (document.getElementById("txtboxname")=="")
{
alert ("Enter a valid text");
return false;
}
else
{
return true;
}
}
</script>

1.     First you need to write a Java script function which will be called on clicking a button in your web page. copy this code in the body tag in the .aspx file.

<script language="javascript">
        function onSave()
        {
               alert('buton is Clicked');
        }
</script>

3. Now in the codebehind page_load even write the following code;this code will ensure that the javascript function is called when the button is clicked.
btnSave.Attributes.Add("onclick","return onSave()");

• To print the form use the following code

btnPrint.Attributes.Add("onclick","javascript:window.print()");

• To close the form use

btnClose.Attributes.Add("onclick","javascript:self.close()");

Get the value of the control

<script language="javascript">
function FillTextField()
{
         obj1=document.getElementById("DropDownList1") 
         obj2=document.getElementById("DropDownList2")
         obj3=document.getElementById("DropDownList3")

         alert(document.getElementById("TextBox1").value); //Get the value of the textbox

}
</script>

ASP.NET is a server-based platform, which means the code you write executes on the web server instead of in the client's browser. This approach ensures that your code is kept secure from prying eyes, and it sidesteps most browser-compatibility issues. However, it also introduces some unavoidable limitations.
For example, the ASP.NET web page model doesn't provide any way to react to events, such as a user's mouse movements. In this case, the overhead of sending the page back to the server after every mouse movement would make the web page unworkably slow. Similarly, because your code can't interact directly with the browser, it can't display pop-up windows or manage multiple frames in a frameset in the same way a snippet of client-side JavaScript could.
To compensate for these limitations, ASP.NET developers often need to mix a little JavaScript code into their ASP.NET web pages. This is most commonly the case with custom controls. For example, many menu controls allow the user to browse through multiple menu levels without forcing the page to be posted back to the server every time a new level is shown. (You can find sample menu controls at Microsoft's community site.) Similar techniques are used to ensure that other controls remain rich and responsive, without requiring any work from the web server.

1.    Showing a Pop-Up Window

Pop-up windows, often used for advertisements and promotions, are a hallmark of the Internet. But ASP.NET doesn't provide any mechanism for showing pop-up windows, because your code can't interact directly with the client's browser. The only solution is to use JavaScript, which provides the useful window.open() function.

The window.open() function requires three parameters:

o    The link for the new page.

o    The frame name of the window.

o    A comma-separated string of attributes that will configure the style and size of the pop-up window. These can include the height and width attributes (with pixel values); the toolbar, menuBar, and scrollbar attributes (set to yes or no, depending on whether you want to display these elements); and the resizable attribute (set to yes or no, depending on whether you want a fixed or resizable window border).

1.  string popupScript = "<script language='javascript'>" +

2.    "window.open('PopUp.aspx', 'CustomPopUp', " +

3.    "'width=200, height=200, menubar=yes, resizable=no')" +

4.    "</script>";

5.   

6.  Page.RegisterStartupScript("PopupScript", popupScript);

2.    Changing Control Focus

The ASP.NET web controls provide a TabIndex property, but this property only applies to Internet Explorer and can't be used to programmatically set the focus to a control of your choice. To perform this task, you'll need the help of some JavaScript code. In this case, you need to find the JavaScript object that corresponds to the control, and call its focus() method.

The easiest way to handle this task is to create a function that accepts a control, extracts its client-side ID, and uses it to generate the JavaScript function required to set the focus to that control. You can then register this function so it will set the focus the next time the next time the page is sent to the user.

Here's the function you will need in C#:

private void SetFocus(Control ctrl)

{

    // Define the JavaScript function for the specified control.

    string focusScript = "<script language='javascript'>" +

        "document.getElementById('" + ctrl.ClientID +

        "').focus();</script>";

    // Add the JavaScript code to the page.

    Page.RegisterStartupScript("FocusScript", focusScript);

}

Complete Javascript file

Paste the following HTML code in aspx file

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title>Untitled Page</title>         <script type="text/javascript" language="javascript">         // Get TextBox value         function GetTextBoxValue()         {             alert(document.getElementById(id).value);         }                 // Get DropDown value         function GetDropDownValue(id)         {             alert(document.getElementById(id).value);         }                 // Get radio button list value         function GetRadioButtonListValue()         {             var radio = document.getElementsByName('RadioButtonList1');             for (var ii = 0; ii < radio.length; ii++)             {                 if (radio[ii].checked)                     alert(radio[ii].value);             }         }                 // Get Checkbox checked status         function GetCheckBoxValue()         {             alert(document.getElementById('CheckBox1').checked);         }         // Get RadioButton checked status         function GetRadioButtonValue()         {             alert(document.getElementById('RadioButton1').checked);         }         function TestFunc()     {                 var objTextBox1 = document.getElementById('<%=TextBox1.ClientID%>');                     if(objTextBox1.value=="")             {                               alert('textbox can not be blank.')                               objTextBox1.select()                               objTextBox1.focus()                               return (false)             }             else             {                 alert(objTextBox1.value);                 var objTextBox =document.getElementById('TextBox1');             alert(objTextBox.value);             }             return true;         }     </script> </head> <body>     <form id="form1" runat="server">     <div>         &nbsp;         <br />         <table>             <tr>                 <td style="width: 100px">         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>                 <td style="width: 100px">                     <asp:Button ID="Button1" runat="server" Text="Button" /></td>                 <td style="width: 100px">                 </td>             </tr>             <tr>                 <td style="width: 100px">         <asp:CheckBox ID="CheckBox1" runat="server" /></td>                 <td style="width: 100px">                     <asp:Button ID="Button2" runat="server" Text="Button" /></td>                 <td style="width: 100px">                 </td>             </tr>             <tr>                 <td style="width: 100px">                     <asp:RadioButton ID="RadioButton1" runat="server" /></td>                 <td style="width: 100px">                     <asp:Button ID="Button3" runat="server" Text="Button" /></td>                 <td style="width: 100px">                 </td>             </tr>             <tr>                 <td style="width: 100px">                     <asp:DropDownList ID="DropDownList1" runat="server">                         <asp:ListItem Value="1">A</asp:ListItem>                         <asp:ListItem Value="2">B</asp:ListItem>                         <asp:ListItem>C</asp:ListItem>                         <asp:ListItem Selected="True" Value="0">---------select---------</asp:ListItem>                     </asp:DropDownList></td>                 <td style="width: 100px">                     <asp:Button ID="Button4" runat="server" Text="Button" /></td>                 <td style="width: 100px">                 </td>             </tr>             <tr>                 <td style="width: 100px">                     <asp:ListBox ID="ListBox1" runat="server" Height="92px">                         <asp:ListItem>One</asp:ListItem>                         <asp:ListItem>Two</asp:ListItem>                         <asp:ListItem>Three</asp:ListItem>                         <asp:ListItem>Four</asp:ListItem>                         <asp:ListItem Selected="True" Value="0">------Select--------</asp:ListItem>                     </asp:ListBox></td>                 <td style="width: 100px">                     <asp:Button ID="Button5" runat="server" Text="Button" /></td>                 <td style="width: 100px">                 </td>             </tr>             <tr>                 <td style="width: 100px">                     <asp:RadioButtonList ID="RadioButtonList1" runat="server">                         <asp:ListItem Value="1">Item 1</asp:ListItem>                         <asp:ListItem Value="2">Item 2</asp:ListItem>                         <asp:ListItem Value="3">Item 3</asp:ListItem>                     </asp:RadioButtonList></td>                 <td style="width: 100px"><asp:Button ID="Button6" runat="server" Text="Button" /></td>                 <td style="width: 100px">                 </td>             </tr>             <tr>                 <td style="width: 100px">                 </td>                 <td style="width: 100px">                 </td>                 <td style="width: 100px">                 </td>             </tr>         </table>     </div>     </form> </body> </html>

Paste the following code in cs file

protected void Page_Load(object sender, EventArgs e)     {         Button1.Attributes.Add("onclick", "return TestFunc();");         Button2.Attributes.Add("onclick", "return GetCheckBoxValue();");         Button3.Attributes.Add("onclick", "return GetRadioButtonValue();");         Button4.Attributes.Add("onclick", "return GetDropDownValue('DropDownList1');");         Button5.Attributes.Add("onclick", "return GetDropDownValue('ListBox1');");         Button6.Attributes.Add("onclick", "return GetRadioButtonListValue();");     }