Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Monday, 29 December 2014

How to call javascript and jquery function from code behind in ASP.net and c#

Introduction: Here I will tell you how you can call javascript and jquery function 
from codebehind.
Descirption:
Here I will tell you how you can call javascript and jquery function from codebehind.
If you are using scriptmanager on page then you can call
ScriptManager instance.
If you are not using script manager then you can call 
Page.ClientScript instance

Implementation:
In Code Behind 
protected void MyButton_Click(object sender, EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "myScript", 
 "MyFunction();", true);
} 

protected void MyButton_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this.GetType(), "myScript", 
  "MyFunction();", true);
} 

Thursday, 4 December 2014

Call web method from page using jquery and ajax without postback

Introduction: In this article I will show you how to call webmethod from aspx page using jquery
and ajax without postback.

Description:  Call webmethod from aspx page using jquery and ajax without postback.



In Aspx Page:

<head runat="server">
    <title></title>
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type = "text/javascript">
function ShowTime() {
    $.ajax({
        type: "POST",
        url: "CS.aspx/GetTime",
        data: '{name: "' + $("#<%=txtName.ClientID%>")[0].value + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function(response) {
            alert(response.d);
        }
    });
}
function OnSuccess(response) {
    alert(response.d);
}
</script>
</head>

<body style = "font-family:Arial; font-size:10pt">
<form id="form1" runat="server">
<div>
Your Name :
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<input id="btnGetTime" type="button" value="Show Current Time"
    onclick = "ShowCurrentTime()" />
</div>
</form>
</body>


In Code Behind:

[System.Web.Services.WebMethod]
public static string GetCurrentTime(string name)
{
    return "Hello " + name + Environment.NewLine + "The Current Time is: "
        + DateTime.Now.ToString();
}


Sunday, 19 October 2014

Dialog Boxes in JavaScript(Alert, Prompt, Confirm)

Alert Dialog Box:
Alert dialog box is used to give alert on validation or other condition.
<head>
<script type="text/javascript">
<!--
   alert("Please enter value");
//-->
</script>
</head>
 
Confirm Dialog box:
This box is used to confirm for any condition 
<head>
<script type="text/javascript">
<!--
   var result= confirm("Are you sure to delete?");
   if( result== true ){
      alert("User wants to delete!");
   return true;
   }else{
      alert("User does not want to delete!");
   return false;
   }
//-->
</script>
</head>
Prompt Dialog Box:
This prompt dialog box is used to get user input on text box.
<head>
<script type="text/javascript">
<!--
   var result= prompt("please enter your name : ", "enter your name here");
   alert("You have entered : " +  result);
//-->
</script>
</head>  
 

Page Redirection in JavaScript

How Page Redirection Works?
<head>
<script type="text/javascript">
<!--
   window.location="http://www.yourlocation.com";
//-->
</script>
</head> 
 
In this examples you can set the time after that you can redirect to your location 
<head>
<script type="text/javascript">
<!--
function RedirectToPage()
{
    window.location="http://www.yourlocation.com";
}

document.write("You will be redirected to yourlocation in 10 sec.");
setTimeout('RedirectToPage()', 10000);
//-->
</script>
</head> 

In this example you can get the browser and redirect to perticular url based on 
browser type
<head>
<script type="text/javascript">
<!--
var browser=navigator.appName; 
if( browser== "Netscape" )
{ 
   window.location="http://www.yourlocation.com/ns.htm";
}
else if ( browser=="Microsoft Internet Explorer")
{
   window.location="http://www.yourlocation.com/ie.htm";
}
else
{
  window.location="http://www.yourlocation.com/other.htm";
}
//-->
</script>
</head>

Saturday, 18 October 2014

Call JavaScript Function on Button Click Event

Create a function Named HelloWorld and call that function on button click event
 <html>
<head>
<script type="text/javascript">
<!--
function HelloWorld() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="HelloWorld()" value="Click Here" />
</body>
</html>

JavaScript Functions

Function Example 
<script type="text/javascript">
<!--
function Hello()
{
   alert("Hello");
}
//-->
</script> 
Parameterized Function Examples 
<script type="text/javascript">
<!--
function FullName(FirstName,LastName)
{
   alert(FirstName + " " + LastName);
}
//-->
</script> 
Function Return 
<script type="text/javascript">
<!--
function FullName(FirstName,LastName)
{
   return (FirstName + " " + LastName);
}
//-->
</script>

Friday, 17 October 2014

For loop in JavaScript

For Loop: 
<script type="text/javascript">
<!--
var counter;
document.write("Loop Starts" + "<br />");
for(counter= 0; counter< 10; counter++){
  document.write("Current counter: " + counter);
  document.write("<br />");
}
document.write("Loop stopped!");
//-->
</script>
 
This script will produce the below result 
Loop Starts
Current counter: 0
Current counter: 1
Current counter: 2
Current counter: 3
Current counter: 4
Current counter: 5
Current counter: 6
Current counter: 7
Current counter: 8
Current counter: 9
Loop stopped! 

While loop in JavaScript

While loop works until the condition is true 

<script type="text/javascript">
<!--
var counter = 0;
document.write("Loop Starts" + "<br />");
while (count < 5){
  document.write("Counter : " + counter + "<br />");
  count++;
}
document.write("Loop Ends!");
//-->
</script>

Thursday, 16 October 2014

Switch Case in JavaScript

<script type="text/javascript">
<!--
var result='A';
document.write("I am entering in switch block<br />");
switch (grade)
{
  case 'A': document.write("Good<br />");
            break;
  case 'B': document.write("Pretty<br />");
            break;
  case 'C': document.write("Passed<br />");
            break;
  case 'D': document.write("Not so<br />");
            break;
  case 'F': document.write("Failed<br />");
            break;
  default:  document.write("NA<br />")
}
document.write("I am Exiting from switch block");
//-->
</script>
 
This will produce the following result:
 
I am entering in switch block
Good
I am Exiting from switch block
 
if you do not use Break 

<script type="text/javascript">
<!--
var result='A';
document.write("I am entering in switch block<br />");
switch (grade)
{
  case 'A': document.write("Good<br />");            
  case 'B': document.write("Pretty<br />");            
  case 'C': document.write("Passed<br />");            
  case 'D': document.write("Not so<br />");            
  case 'F': document.write("Failed<br />");            
  default:  document.write("NA<br />")
}
document.write("I am Exiting from switch block");
//-->
</script>
 
This will produce the following Result:
 
I am entering in switch block
Good 
Pretty
Passed 
Not so
Failed 
NA
I am Exiting from switch block 
 

JavaScript If ...... else Statements

Syntax for IF Statement 
<script type="text/javascript">
<!--
var result= 20;
if( result> 18 ){
   document.write("<b>Result is greater than 18</b>");
}
//-->
</script>
 
Syntax for IF Else Statement 
<script type="text/javascript">
var result= 20;
if( result> 18 ){
   document.write("<b>Result is greater than 18</b>");
}
else 
{ 
   document.write("<b>Result is less than 18</b>");
} 
</script>
 
Syntax for IF...Else..IF Statement 
<script type="text/javascript">
var result= 20;
if( result> 18 ){
   document.write("<b>Result is greater than 18</b>");
} 
else if(result==18)
{ 
  document.write("<b>Result is equal to 18</b>"); 
} 
else
{
  document.write("<b>Result is less than 18</b>");

</script>

Friday, 10 October 2014

Comments in Java Script

 There are single line comment and multiline comment in JavaScript

 <script type="text/javascript">
    // This is a single line comment in Javascript.

    /*
     This is a multiline comment in JavaScript    
     */

        var result = 10;
        document.write(result)
    </script>

Declare Variables in Javascript

Here you can see that we have declare a variable result and assign value to that.
 
<script type="text/javascript">
        var result = 10;
        document.write(result)
    </script>

Friday, 26 September 2014

Javascript function to select all checkboxes from gridview header checkbox

 function SelectheaderItemCheckbox(checkboxall) {
  
    if (checkboxall.checked) {
        var inputs = document.getElementById(dataGrid).getElementsByTagName('input');
     
        for (var i = 1; i < inputs.length; i++) {
            if (inputs[i].type == "checkbox") {
                inputs[i].checked = true;
            }
        }
    }
    else {
        var inputs = document.getElementById(dataGrid).getElementsByTagName('input');
        for (var i = 1; i < inputs.length; i++) {
            if (inputs[i].type == "checkbox") {
                inputs[i].checked = false;
            }
        }
    }

}

 function SelectchildCheckboxes(header) {

    var inputs = document.getElementById(dataGrid).getElementsByTagName('input');
    var countCheckboxItem = 0;
    var countCheckboxSelected = 0;
    for (var i = 1; i < inputs.length; i++) {
        if (inputs[i].type == "checkbox") {
            countCheckboxItem++;
            if (inputs[i].checked) {
                countCheckboxSelected++;
            }
        }
    }
    if (countCheckboxSelected == countCheckboxItem) {
        inputs[0].checked = true;
    }
    else {
        inputs[0].checked = false;
    }
}

<asp:GridView ID="GridViewItems" runat="server" AutoGenerateColumns="false" DataKeyNames="ItemId"
                    AllowPaging="true" PageSize="10" OnRowCommand="GridViewItems_RowCommand" OnPageIndexChanging="GridViewItems_PageIndexChanging">
                    <Columns>
                        <asp:TemplateField>
                            <HeaderTemplate>
                                <div class="TblChk">
                                    <asp:CheckBox ID="CheckBoxSelectAll" onclick="javascript:SelectheaderItemCheckbox(this)"
                                        class="FloatLeft" runat="server" />
                                </div>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:CheckBox ID="CheckBoxItem" onclick="javascript:SelectchildCheckboxes(this)"
                                    runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>
                                           </Columns>
                    <EmptyDataTemplate>
                        No Records Found....
                    </EmptyDataTemplate>
                </asp:GridView>

Javascript to validate Textbox and Dropdownlist on submit in ASP .Net

<script type="text/javascript">
        var TextBoxItemName = '<%=TextBoxItemName.ClientID %>';
        var TextBoxPurchasePrice = '<%=TextBoxPurchasePrice.ClientID%>';
        var TextBoxSalePrice = '<%=TextBoxSalePrice.ClientID%>';
        var DropDownListUnit = '<%=DropDownListUnit.ClientID%>';
        var TextBoxDescription = '<%=TextBoxDescription.ClientID%>';   


        function Save() {
           
            if (document.getElementById(TextBoxItemName).value == "") {
                alert('Please enter item name.');
                document.getElementById(TextBoxItemName).focus();
                return false;
            }
            if (document.getElementById(DropDownListUnit).value == 0) {
                alert('Please select unit.');
                document.getElementById(DropDownListUnit).focus();
                return false;
            }           
            if (document.getElementById(TextBoxPurchasePrice).value == "") {
                alert('Please enter purchase price.');
                return false;
            }
            if (ex.test(document.getElementById(TextBoxPurchasePrice).value) == false) {
                alert('Incorrect purchase price');
                document.getElementById(TextBoxPurchasePrice).focus();
                return false;
            }
            if (document.getElementById(TextBoxSalePrice).value == "") {
                alert('Please enter sale price.');
                return false;
            }
            if (ex.test(document.getElementById(TextBoxSalePrice).value) == false) {
                alert('Incorrect sale price');
                document.getElementById(TextBoxSalePrice).focus();
                return false;
            }
        }     
      
    </script>