Call JavaScript function from Code Behind in ASP.Net using C#

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to call JavaScript function  on Client Side from Server-Side with ASP.Net by using C#

The Client Side function of JavaScript will be called from Server Side by using ClientScript.RegisterStartupScript technique.

 

Code for HTML Page

On the HTML page i will be place the two controls. First one control will be TextBox with the id named txt_name that will be use for capturing input from the user. Second one control will be Button with the id named btn_submit for submitting the Form. The Button has been assigned with an OnClick event handler.

<asp:TextBox ID="txt_name" runat="server"></asp:TextBox>

<asp:Button ID="btn_submit" runat="server" Text="Submit" OnClick="OnSubmit" /> 

 

JavaScript functions on Client Side

There will be  two JavaScript functions which will be called from Server-Side (Code-Behind):

ShowGreetings

The ShowGreetings JavaScript function accepts TextBox value as parameter which finally displayed in JavaScript Alert Message Box.

 

ShowServerDateTime

The ShowServerDateTime JavaScript function accepts DateTime string as parameter which finally displayed in JavaScript Alert Message Box.

<script type="text/javascript">

    function ShowGreetings(name) {

        alert("Name: " + name);

    };

    function ShowServerDateTime(dt) {

        alert("Server Time: " + dt);

    };

</script> 

 

 

Calling JavaScript function from Server-Side (Code-Behind) in ASP.Net

When user will be click on the Submit button, a string variable will be  initialized and the value of TextBox will be checked for empty or NULL, if found NULL or empty then the TextBox value is passed as parameter to ShowGreetings JavaScript function (discussed earlier).

And if found empty or NULL, then the Current DateTime is passed as parameter to ShowServerDateTime JavaScript function (discussed earlier) and set to a string variable.

After that, the string is passed to the ClientScript.RegisterStartupScript method, which then registers it and call the JavaScript function

C#

protected void OnSubmit(object sender, EventArgs e)

{

    string script;

    if (!string.IsNullOrEmpty(txtName.Text.Trim()))

    {

         script = string.Format("ShowGreetings('{0}');", txtName.Text.Trim());

    }

    else

    {

         script = string.Format("ShowServerDateTime('{0}');", DateTime.Now.ToString());

    }

    ClientScript.RegisterStartupScript(this.GetType(), "alert", script, true);

} 

 

Conclusion: In above code, I explained that how to call JavaScript function  on Client Side from Server-Side with ASP.Net by using C#. This code is very helpful for every developer. Bye Bye and take care of yourself Developers. We will come back shortly with the new article.

Regards

Programming Hub

Pass value from child popup window to parent page window using JavaScript

Introduction: Hello Guys, “Welcome back” Today, i am here with another one new great article. In this article I explained the implementation about how to pass value from one child popup window to another parent page window using JavaScript.

When the child popup window is opened using the JavaScript window.open function, the reference object of the parent window is obtained from  JavaScript  window.opener  instance.

The instanceof the  JavaScript window.opener  will be used as  reference and access their elements of the parent page by using  JavaScript.

 Code for Parent Page

On the HTML Parent Page I will use HTML TextBox and a Button controls. To the TextBox I will be assigned ReadOnly attribute. To the Button I will be assigned an OnClick event handler. When user will be click on the Button, the SelectName  JavaScript gets called which will open the Popup window using the window.open function.

<table border="0" cellpadding="0" cellspacing="0">

    <tr>

        <td>

            Name:&nbsp;

        </td>

        <td>

            <input type="text" id="txtName" readonly="readonly" />

        </td>

        <td>

            <input type="button" value="Select Name" onclick="SelectName()" />

        </td>

    </tr>

</table>

<script type="text/javascript">

    var popup;

    function SelectName() {

        popup = window.open("Popup.htm", "Popup", "width=300,height=100");

        popup.focus();

        return false

    }

</script>

 

 

Code for Popup Child Window Page

On the HTML page of the Child Popup Window I will consists HTML the controls that will be a  DropDownList and a Button. The HTML DropDownList will be used to choose the name of the person. The Button has been assigned with an OnClick event handler. When the Button is clicked, the SetName  JavaScriptt gets called.

Inside the SetName  JavaScript function, the reference of the parent window txtName TextBox is obtained from window.opener instance using document.getElementById method of JavaScript.

Finally, the DropDownList selected value is set into the TextBox value property.

 <select name="ddlNames" id="ddlNames">

    <option value="Mudassar Khan">Mudassar Khan</option>

    <option value="John Hammond">John Hammond</option>

    <option value="Mike Stanley">Mike Stanley</option>

</select>

<br />

<br />

<input type="button" value="Select" onclick="SetName();" />

<script type="text/javascript">

    function SetName() {

        if (window.opener != null && !window.opener.closed) {

            var txtName = window.opener.document.getElementById("txtName");

            txtName.value = document.getElementById("ddlNames").value;

        }

        window.close();

    }

</script>

 

Conclusion: In above code, I explained the implementation about how to pass value from one child popup window to another parent page window using  JavaScript. This code is very helpful for every developer. Bye bye and take care of yourself Developers. We will come back shortly with the new article.

 

Regards

Programming HUB

 

Server Side Yes No Confirmation Box using JavaScript in Asp.Net

Introduction: Hello Guys, “Welcome back” Today, i am here with another one new great article. In this article I explained the implementation that how we can build a server side Yes/No confirmation box by using JavaScript in ASP.Net in C#. The JavaScript confirm function allows PostBack when OK will be clicked by the user but does nothing when Cancel will be clicked by the user and on too much conditions we need to do Server-Side operations on both OK and Cancel with click events in ASP.Net using C#.

 

Code for HTML Page

I will be use the following HTML controls to build a server side Yes/No confirmation box.

Button – For displaying the confirmation box.

The Button has been assigned with an OnClick and JavaScript OnClientClick event handlers.

<asp:Button ID="btnConfirm" runat="server" Text="Raise Confirm" OnClientClick="Confirm()" OnClick="OnConfirm" />

 

 

Displaying Confirmation Box using JavaScript

When the Button will be clicked by the user then Confirm JavaScript function will be called.

Inside the Confirm JavaScript function, a dynamic HTML INPUT HiddenField element is created using JavaScript. Then, JavaScript confirm function will be called and it will be response (Yes or No) is set into the Hidden Field.

Finally, the HiddenField element is added to the Form and the PostBack is occurred which triggers the OnClick event.

<script type="text/javascript">

    function Confirm() {

        var confirm_value = document.createElement("INPUT");

        confirm_value.type = "hidden";

        confirm_value.name = "confirm_value";

        if (confirm("Do you want to save data?")) {

            confirm_value.value = "Yes";

         }else {

            confirm_value.value = "No";

        }

        document.forms[0].appendChild(confirm_value);

    }

</script>

 

Displaying Message based on the User input in Server-Side

When the Raise Confirm button will be clicked by the user, then value of the HiddenField is fetched using Request.Form collection.

Finally, based on the HiddenFiled value an appropriate message is displayed in JavaScript Alert Message Box using RegisterStartupScript method.

Code for C# Page

protected void OnConfirm(object sender, EventArgs e)

{

    string confirmValue = Request.Form["confirm_value"];

    if (confirmValue  == "Yes")

    {

        ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('You clicked YES!')", true);

    }

    else

    {

        ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('You clicked NO!')", true);

    }

}

 

 

Conclusion: In above code, I have been explained implementation about implementation that how we can build a server side Yes/No confirmation box by using JavaScript in ASP.Net in C#. This code is very helpful for every developer. Bye bye and take care of yourself Developers. We will come back shortly with the new article.

 

Regards

Programming HUB