Hi ..suppose i have created a function say abc() in codebehind(aspx.cs) file. I want to use that function inside the javascript function say xyz() which i define in my aspx page. is there any procedure to call it ?
Is there any way to access the asp controls in javascripts ??. Suppose i want to change the the text of Label1 by using javascript. can we do so ?
Finally, i want to store the values of javascript variables in session variables. can we do it ??
You can call code-behind function by using
PageMethod
You can access your asp controls by its ID. But you can't change Text of label control instead you may use Textbox ()can change text of Textbox by using Javascript.
You cant start session by javascript,because javascript is client side one but Session will run on server side. so you may use anyother like cookie to achieve it.
Mani
Please Mark as Answer If this is helpful.
Marked as answer by cmsrana on Aug 10, 2010 01:11 PM
Asp controls are no different from html controls when rendered in the browser. <asp:Button ... /> is rendered as <input type="submit" ... />. So you can use normal javascript and find the element by ID (the asp ID you supply...most of the time). Then you
can just set its value with ".value = blah blah". (but asp:Labels are rendered as a span, so you need to use .innerHTML or .innerText to change the "value")
As for accessing the codebehind function, there are a few ways. You can use an AJAX UpdatePanel, but would call the codebehind function on some html event (button click) - so it wouldn't called directly from javascript, but it technically is.
But if you want to store values of javascript variables in session variables, you need to access the server in the same way, but you need to set the values of hidden fields according to your javascript variables so the server can access them.
Pagemethods is another way for all of this.
You can use <%# YourFunctionName() %> inside of javascript code to call the YourFunctionName() codebehind function ... but the <%# %> evalutes on window load. So it's not like you can create conditions for when to have the <%# %> code execute.
Finally, on some javascript event (like button's onclick), you can set a hidden field before the page posts back. Then in codebehind page_load you can check to see if the hidden field's value is set. If it is, then you can call the YourFunctionName() function.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function ChangeLabel()
{
document.getElementById("Label1").innerHTML = "Label1 Changed";
// otherwise, use .value for most other controls
return false; // disallow postback
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" ></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return ChangeLabel();" />
</form>
</body>
</html>
You can see that in the browser's page source, the label "turns into" a <span> and its ID is "Label1" - what we specify the asp:Label as. .innerHTML is used for spans, .value is used for most other controls/elements :)
<!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>Untitled Page</title>
<script type="text/javascript">
function SetHiddenSession()
{
var hdn = document.getElementById("HiddenSessionField");
var txt = document.getElementById("UsernameTextBox");
hdn.value = txt.value; // set the hidden field as the text from the textbox (username)
return true; // allow postback
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="UsernameTextBox" runat="server"></asp:TextBox>
<asp:Button ID="SubmitButton" runat="server" OnClientClick="return SetHiddenSession();" Text="Submit" />
<asp:HiddenField ID="HiddenSessionField" runat="server" />
</form>
</body>
</html>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If IsPostBack Then ' will only execute if page is posted back
If Request.Form("HiddenSessionField").ToString() <> "" Then ' if hidden session field has a value
Session("UserName") = Request.Form("HiddenSessionField").ToString() ' set the session variable
HiddenSessionField.Value = "" ' reset the hidden session field
End If
End If
End Sub
This is like a login system - the username is stored in the session.
You don't need to take the text from a textbox and set the hiddenfield's value. You can just the hiddenfield's value equal to a javascript variable. But remember you have you to use Request.Form to get the value of the HiddenField :)
Marked as answer by cmsrana on Aug 12, 2010 05:44 AM
cmsrana
Member
88 Points
31 Posts
How to call code behind function in javascript and vice-versa ?
Aug 09, 2010 12:31 PM|LINK
Hi ..suppose i have created a function say abc() in codebehind(aspx.cs) file. I want to use that function inside the javascript function say xyz() which i define in my aspx page. is there any procedure to call it ?
Is there any way to access the asp controls in javascripts ??. Suppose i want to change the the text of Label1 by using javascript. can we do so ?
Finally, i want to store the values of javascript variables in session variables. can we do it ??
plz clear my doubts !!
javascipt
MCTS - ASP.NET 4.0
g_mani
Contributor
2055 Points
586 Posts
Re: How to call code behind function in javascript and vice-versa ?
Aug 09, 2010 01:34 PM|LINK
Hi,
You can call code-behind function by using PageMethod
You can access your asp controls by its ID. But you can't change Text of label control instead you may use Textbox ()can change text of Textbox by using Javascript.
You cant start session by javascript,because javascript is client side one but Session will run on server side. so you may use anyother like cookie to achieve it.
Please Mark as Answer If this is helpful.
hoodedperson...
Star
12950 Points
3196 Posts
Re: How to call code behind function in javascript and vice-versa ?
Aug 09, 2010 02:14 PM|LINK
Asp controls are no different from html controls when rendered in the browser. <asp:Button ... /> is rendered as <input type="submit" ... />. So you can use normal javascript and find the element by ID (the asp ID you supply...most of the time). Then you can just set its value with ".value = blah blah". (but asp:Labels are rendered as a span, so you need to use .innerHTML or .innerText to change the "value")
As for accessing the codebehind function, there are a few ways. You can use an AJAX UpdatePanel, but would call the codebehind function on some html event (button click) - so it wouldn't called directly from javascript, but it technically is.
But if you want to store values of javascript variables in session variables, you need to access the server in the same way, but you need to set the values of hidden fields according to your javascript variables so the server can access them.
Pagemethods is another way for all of this.
You can use <%# YourFunctionName() %> inside of javascript code to call the YourFunctionName() codebehind function ... but the <%# %> evalutes on window load. So it's not like you can create conditions for when to have the <%# %> code execute.
Finally, on some javascript event (like button's onclick), you can set a hidden field before the page posts back. Then in codebehind page_load you can check to see if the hidden field's value is set. If it is, then you can call the YourFunctionName() function.
Does this all make sense?
hoodedperson...
Star
12950 Points
3196 Posts
Re: How to call code behind function in javascript and vice-versa ?
Aug 09, 2010 05:27 PM|LINK
As an example for changing "asp" controls:
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function ChangeLabel() { document.getElementById("Label1").innerHTML = "Label1 Changed"; // otherwise, use .value for most other controls return false; // disallow postback } </script> </head> <body> <form id="form1" runat="server"> <asp:Label ID="Label1" runat="server" ></asp:Label> <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return ChangeLabel();" /> </form> </body> </html>You can see that in the browser's page source, the label "turns into" a <span> and its ID is "Label1" - what we specify the asp:Label as. .innerHTML is used for spans, .value is used for most other controls/elements :)
cmsrana
Member
88 Points
31 Posts
Re: How to call code behind function in javascript and vice-versa ?
Aug 10, 2010 01:10 PM|LINK
Thanks hoodedperson70 !!!
That really help me a lot to clear my doubts !!!
Can you give me a short example of storing javascript variables value in Session variables using Hidden fields ??
MCTS - ASP.NET 4.0
hoodedperson...
Star
12950 Points
3196 Posts
Re: How to call code behind function in javascript and vice-versa ?
Aug 10, 2010 03:21 PM|LINK
No problem, here's a short example:
<!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>Untitled Page</title> <script type="text/javascript"> function SetHiddenSession() { var hdn = document.getElementById("HiddenSessionField"); var txt = document.getElementById("UsernameTextBox"); hdn.value = txt.value; // set the hidden field as the text from the textbox (username) return true; // allow postback } </script> </head> <body> <form id="form1" runat="server"> <asp:TextBox ID="UsernameTextBox" runat="server"></asp:TextBox> <asp:Button ID="SubmitButton" runat="server" OnClientClick="return SetHiddenSession();" Text="Submit" /> <asp:HiddenField ID="HiddenSessionField" runat="server" /> </form> </body> </html>Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If IsPostBack Then ' will only execute if page is posted back If Request.Form("HiddenSessionField").ToString() <> "" Then ' if hidden session field has a value Session("UserName") = Request.Form("HiddenSessionField").ToString() ' set the session variable HiddenSessionField.Value = "" ' reset the hidden session field End If End If End SubThis is like a login system - the username is stored in the session.
You don't need to take the text from a textbox and set the hiddenfield's value. You can just the hiddenfield's value equal to a javascript variable. But remember you have you to use Request.Form to get the value of the HiddenField :)