How to return multiple value from Javascript ?


Hi

If you are working with java-script then you might be get scenario to return multiple value from function. Then we can return the multiple value like this code snippet as given below.

 


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MultipleValueReturn.aspx.cs" Inherits="JavaScriptTest.MultipleValueReturn" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function test() {
            var no1 = 10;
            var no2 = 20;
            return {
                no1: no1,
                no2: no2
            };
        }

        function showAlertMsg() {
            var no3 = test().no1;
            alert(no3);
            var no4 = test().no2;
            alert(no4);
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="showAlertMsg();" />
    </div>
    </form>
</body>
</html>




How to get the checkboxlist text using Javacsript in asp.net


Hi

So many time we will get scenario to read the checkbox list using JavaScript, we can do this task like this

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="Test_Default3" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!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></title>
<script type="text/javascript">

function getCheckBoxListItemsChecked(elementId) {
var elementRef = document.getElementById(elementId);
var checkBoxArray = elementRef.getElementsByTagName('input');
var checkedValues = '';

for (var i = 0; i < checkBoxArray.length; i++) {
var checkBoxRef = checkBoxArray[i];

if (checkBoxRef.checked == true) {
// for getting the value
var value1 = checkBoxArray[i].value;
alert(value1)
// For getting the text value

var labelArray = checkBoxRef.parentNode.getElementsByTagName('label');
if (labelArray.length > 0) {
if (checkedValues.length > 0)
checkedValues += ', ';
checkedValues += labelArray[0].innerHTML;

}
}
}

return checkedValues;
}

function readCheckBoxList() {
var checkedItems = getCheckBoxListItemsChecked('<%= CheckBoxList2.ClientID %>');
alert(checkedItems);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:CheckBoxList ID="CheckBoxList2"  runat="server">
<asp:ListItem>C1</asp:ListItem>
<asp:ListItem>C2</asp:ListItem>
</asp:CheckBoxList>
</div>
<input type="button" onclick="readCheckBoxList();" value="Read CheckBoxList" />

</form>
</body>
</html>

How to find the duplicate value in array using Javascript ?


Hi

While working on asp.net project, So many time we will get scenario to check the duplicate input value like on textbox value. We can do like this.


<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <script type="text/javascript">

    function testValues() {
        var no1 = document.getElementById('<%= TextBox1.ClientID %>').value;
        var no2 = document.getElementById('<%= TextBox2.ClientID %>').value;
        var no3 = document.getElementById('<%= TextBox3.ClientID %>').value;
        var no4 = document.getElementById('<%= TextBox4.ClientID %>').value;
        var arrInput = [no1,no2,no3,no4];
        var sorted_arr = arrInput.sort(); 
        var results = [];
        for (var i = 0; i < arrInput.length - 1; i++) {
            if (sorted_arr[i + 1] == sorted_arr[i]) {
                results.push(sorted_arr[i]);
            }
        }

        alert("duplicate Value:  " + results);
    }

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <asp:TextBox ID="TextBox1" runat="server" />
    <br />
    <asp:TextBox ID="TextBox2" runat="server" />
    <br />
    <asp:TextBox ID="TextBox3" runat="server" />
    <br />
    <asp:TextBox ID="TextBox4" runat="server" />
    <br />
    <br />
    <asp:Button ID="Button1" Text="Submit" OnClientClick="testValues();" runat="server" />
</asp:Content>


How to hide and display panel in asp.net using Javascript ?


PanelHide
Hi

While working on asp.net we will get scenario to hide and display panel or Div or any asp.net control. So many person used to fire event on that asp.net control and write code in code behind file.

But this process is not a good one. It will decrease the performance so much. We can do this task using Javascript or Jquery on client side only. It will give very good user experience.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!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></title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>
    <script type="text/javascript">

        function ChangePanel() {
            var dll = document.getElementById('<%=DropDownList1.ClientID %>');
            var panelCountry = document.getElementById('<%=PanelCountry.ClientID %>');
            var val = dll.options[dll.selectedIndex].value;
            if (val == 1) {
                panelCountry.style.visibility = "visible";
            }
            else {
                panelCountry.style.visibility = "hidden";
            }
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    <table class="style1">
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
            <br />
            <br />

                <asp:DropDownList ID="DropDownList1" onchange="return ChangePanel()" runat="server">
                    <asp:ListItem Value="0">Select</asp:ListItem>
                    <asp:ListItem Value="1">India</asp:ListItem>
                    <asp:ListItem Value="2">Nepal</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                <asp:Panel ID="PanelCountry" runat="server">
                 <fieldset>
                <legend> This is the design part for India Registration Form</legend>
                    <asp:Label ID="lblmsg" runat="server" Font-Bold="true" Text="This design for Country"></asp:Label>
                    <br />
                    <br />
                    <br />
                 </fieldset>
               </asp:Panel>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>


How to display alert message from code behind file in asp.net ?


Hi

There are so many approaches to display alert message from code behind file i.e by vb.net and C#. But one of the easiest ways to display alert message using Ajax ScriptManager like this

Write code on buttonclick event like this


 protected void Button1_Click(object sender, EventArgs e)
    {
        // Here will be your some conditional code
        ScriptManager.RegisterStartupScript(this, GetType(), "showalert", "alert('Data has been added Sucessfully');", true);
    }

How to do basis validation using Javascript in asp.net ?


Hi

So many time, we will get scenario to do validation work or some other stuff using JavaScript in asp.net. Here is the basic validation syntax using JavaScript in asp.net.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
                function doValidation() {
                    var name = document.getElementById("<%=txtEmpName.ClientID%>").value;
                    var empSal = document.getElementById("<%=txtEmpSal.ClientID%>").value;
                    var empAddress = document.getElementById("<%=txtEmpAddress.ClientID%>").value;
                    if (name == "") {
                        alert("Please enter the EmpName");
                    }
                    else if (empSal == "") {
                        alert("Please enter the EmpSal");
                    }
                    else if (isNaN(empSal)) {
                        alert("Invalid EmpSal");
                    }
                    else if (empAddress == "") {
                        alert("Please enter the EmpAddress");
                    }

                }
                
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        EmpName:
        <asp:TextBox ID="txtEmpName" runat="server" />
        <br />
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp; EmpSal
        <asp:TextBox ID="txtEmpSal" runat="server" />
        <br />
        <br />
        EmpAddress
        <asp:TextBox ID="txtEmpAddress" runat="server" />
        <br />
        <br />
        <asp:Button ID="btnClick" runat="server" OnClientClick="doValidation();return false;"
            Text="Submit" />
    </div>
    </form>
</body>
</html>

How to return value from Javascript Function ?


JSFunction
Hi

Function is the heart of java script. If you will do anythings in java script then you have to write function.

While working on asp.net project so many time we get scenario to retun value from some function and display somewhere.

But here we can do like C# method. We have to include retun at end of function like this


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Function.aspx.cs" Inherits="Javascript_Test_Function" %>

<!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></title>
    <script type="text/javascript">
        function sayHello() {
            var msg = "I m from Javacript";
            return msg;
        }

        function doSomething() {
            var msg1 = sayHello();
            document.getElementById('<%=txtMsg.ClientID %>').value = msg1;
            
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button ID="btnclick" runat="server" OnClientClick="doSomething();return false;" Text="Click Here" />
    <br />
    <br />
    <asp:TextBox ID="txtMsg" runat="server" />
    </div>
    </form>
</body>
</html>