Javascript function call to ASP.NET - c#

My Javascript function calling a sever side callback function.
This is working fine when I give alert(). If I comment alert() then the browser throw a warning ..
My function is
function callMe(){
var input = 'input parameter list';
var val= <%=gridCtrlUsers.ClientID%>.callbackControl.Callback(input);
// If I comment this alert ,it would throw a browser warning.
alert(val) // This prints true or false
}
Could anyone please help me ?


I agree with José this doesnt look standard.
If its a custom control that has a client side API then have you tried just typing out its identifier rather than using the <% %> tags...
You havnt mentioned what 3rd party toolkit your using but I know with DevExpress their components (such as the grid) have a property that allows you to set the client side instance name. You can get the grid to then call back from your client code by doing something like gridClientName.PerformCallback().
If it is ComponentArt's grid you are using then I think you can set the grids client name with the ClientObjectId property and then use gridClientName.callback() in your Javascript.
If you just want to call an ASP.NET function from your Javascript code you could use an ASP.NET Script Manager AJAX control. I will give you an example below...
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
</asp:ScriptManager>
<script runat="server">
[System.Web.Services.WebMethod]
public static String Msg()
{
String userName = "Chalkey";
return userName;
}
</script>
<script type="text/javascript">
PageMethods.Msg(OnSucceed);
function OnSucceed(result)
{
alert(result);
}
</script>
Hope some of this is useful! :)

Related

Iframe doesn't show onload, but it does after manual reload

I'm using an Asp.net/C# environment and Visual Studio 2013 to create a web application.
I have a page (aspx) with only a single iframe in it, and a javascript method that uses jquery to put html into that frame.
<asp:Content runat="server" ID="MainSectionContent" ContentPlaceHolderID="MainSectionContentPlaceHolder">
<section runat="server" id="FrameSection" clientidmode="Static">
<asp:ContentPlaceHolder runat="server" ID="FrameSectionContentPlaceHolder" />
<iframe id="FrameContentFrame" name="FrameContentFrame" src="about:blank" seamless="seamless" onload=" loadFrameContent(); "></iframe>
</section>
<script type="text/javascript">
//<![CDATA[
function loadFrameContent() {
jQuery('#FrameContentFrame').contents().find('html').html('<%= FrameContent %>'); //FrameContent is a c# property which holds a syntactically correct html string
}
//]]>
</script>
</asp:Content>
In my code behind I fetch a long string from a server and store it in the property FrameContent. This long strings is syntactically correct html.
The result should be:
onload, the javascript method runs. The iframe is populated with html and thus the html string is shown to the user.
but what really happens:
nothing is shown. a Javascript error occurs saying "the function loadFrameContent is undefined". But its clearly there if I view the page source in my web browser. If I right click on the blank page where the frame should be, and choose "reload frame" (Google Chrome), the frame does show the Html.
So: the Html string is correct. the frame is correct. the frame can display the html correctly. However, the frame cannot display the Html onload, it needs an additional manual reload to actually show anything! I checked the page source on my browser and the Javascript function IS present, and the FrameContent property is populated with the correct html string.

As I see it, it looks like a timing issue. A blank iframe will be finished loading before your parent page, so it will call loadFrameContent before the parent page has finished parsing its dom (thus the method won't be registered). Get rid of the iframe onload and add this:
<script type="text/javascript">
//<![CDATA[
function loadFrameContent() {
jQuery('#FrameContentFrame').contents().find('html').html('<%= FrameContent %>'); //FrameContent is a c# property which holds a syntactically correct html string
}
$(loadFrameContent);
// Or if you're using an older version of jQuery
//$(document).ready(loadFrameContent);
//]]>
</script>

Is it possible to call a page method using jquery in SharePoint 2007?

We have a custom aspx page with codebehind class deployed in a DLL in GAC. I am trying to call a method in the codebehind using jquery to get the autocomplete behavior for a textbox. The method has the [WebMethod] attribute. The code works well in a test asp.net application but when deployed to the SharePoint server, I am getting a "httpexception - Directory C:\Inetpub\wwwroot...\catalogs\masterpage does not exist. Failed to start monitoring file changes" error. There is no scriptmanager tag in the page.

In Your code behind add his attribute above Your function [WebMethod] and then You should be able to call it through Jquery
for more info look here
http://msdn.microsoft.com/en-us/library/byxd99hx%28v=vs.71%29.aspx
add this under your asp.net form tag
<asp:ScriptManager ID="scriptManager" EnablePageMethods="true" runat="server"/>
in Your code behind file add this function
[System.Web.Services.WebMethod]
public static string SayHi()
{
return "Hi";
}
and add this in Your aspx file
<script>
function GetHi() {
PageMethods.SayHi(onComplete);
}
function onComplete(result) {
alert(result);
}
GetHi();
</script>
and try not to place your codebehind in yr GAC

<script> tag get disappeared from rendered HTML after ajax postback action

I have a webpage with one <asp:updatePanel>. In the end of the webpage, some javascript method is added and called such as :-
The updatePanel code used is as follows:-
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Some controls like repeater etc..
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
alert('hi');
MethodCall();
</script>
After some ajax postback action happened on the page, when i see the webpage html using the "View Source". The script tag code area gets disappeared from the webpage html. And this causes the problem at the place where js method is called.
I don't understand why this is happening? Why it is removing the JS code block after the ajax postback action.
Pls suggest some workaround or any solution to my problem.
Thx

You can also add the following js function, that is called by the ASP.Net AJAX client script library.
function pageLoad(sender, args)
{
if (args.get_isPartialLoad())
{
get_isPartialLoad is true when a partial postback has occurred.
}
}

Calling JavaScript Function From CodeBehind

Can someone provide good examples of calling a JavaScript function From CodeBehind and Vice-versa?

You may try this :
Page.ClientScript.RegisterStartupScript(this.GetType(),"CallMyFunction","MyFunction()",true);

Calling a JavaScript function from code behind
Step 1 Add your Javascript code
<script type="text/javascript" language="javascript">
function Func() {
alert("hello!")
}
</script>
Step 2 Add 1 Script Manager in your webForm and Add 1 button too
Step 3 Add this code in your button click event
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "Func()", true);

C# to JavaScript: you can register script block to run on page like following:
ClientScript.RegisterStartupScript(GetType(),"hwa","alert('Hello World');",true);
replace alert() part with your function name.
For calling C# method from JavaScript you can use ScriptManager or jQuery. I personally use jQuery. You need to decorate the method that you want to call from JavaScript with WebMethod attribute. For more information regarding calling C# method (called PageMethod) from jQuery you can refer to Dave Ward's post.

If you need to send a value as a parameter.
string jsFunc = "myFunc(" + MyBackValue + ")";
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "myJsFn", jsFunc, true);

You can not do this directly. In standard WebForms JavaScript is interpreted by browser and C# by server. What you can do to call a method from server using JavaScript is.
Use WebMethod as attribute in target methods.
Add ScriptManager setting EnablePageMethods as true.
Add JavaScript code to call the methods through the object PageMethods.
Like this:
Step 1
public partial class Products : System.Web.UI.Page
{
[System.Web.Services.WebMethod()]
[System.Web.Script.Services.ScriptMethod()]
public static List<Product> GetProducts(int cateogryID)
{
// Put your logic here to get the Product list
}
Step 2: Adding a ScriptManager on the Page
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
Step 3: Calling the method using JavaScript
function GetProductsByCategoryID(categoryID)
{
PageMethods.GetProducts(categoryID, OnGetProductsComplete);
}
Take a look at this link.
To call a JavaScript function from server you can use RegisterStartupScript:
ClientScript.RegisterStartupScript(GetType(),"id","callMyJSFunction()",true);

Another thing you could do is to create a session variable that gets set in the code behind and then check the state of that variable and then run your javascript. The good thing is this will allow you to run your script right where you want to instead of having to figure out if you want it to run in the DOM or globally.
Something like this:
Code behind:
Session["newuser"] = "false"
In javascript
var newuser = '<%=Session["newuser"]%>';
if (newuser == "yes")
startTutorial();

You cannot. Codebehind is running on the server while JavaScript is running on the client.
However, you can add <script type="text/javascript">someFunction();</script> to your output and thus cause the JS function to be called when the browser is parsing your markup.

You can use literal:
this.Controls.Add(new LiteralControl("<script type='text/javascript'>myFunction();</script>"));

Working Example :_
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage2.Master" AutoEventWireup="true" CodeBehind="History.aspx.cs" Inherits="NAMESPACE_Web.History1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function helloFromCodeBehind() {
alert("hello!")
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div id="container" ></div>
</asp:Content>
Code Behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace NAMESPACE_Web
{
public partial class History1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "displayalertmessage", "helloFromCodeBehind()", true);
}
}
}
Possible pitfalls:-
Code and HTML might not be in same namespace
CodeBehind="History.aspx.cs" is pointing to wrong page
JS function is having some error

IIRC Code Behind is compiled serverside and javascript is interpreted client side. This means there is no direct link between the two.
What you can do on the other hand is have the client and server communicate through a nifty tool called AJAX. http://en.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML

ScriptManager.RegisterStartupScript(this, this.Page.GetType(),"updatePanel1Script", "javascript:ConfirmExecute()",true/>

I've been noticing a lot of the answers here are using ScriptManager.RegisterStartupScript and if you are going to do that, that isn't the right way to do it. The right way is to use ScriptManager.RegisterScriptBlock([my list of args here]). The reason being is you should only be using RegisterStartupScript when your page loads (hence the name RegisterStartupScript).
In VB.NET:
ScriptManager.RegisterClientScriptBlock(Page, GetType(String), "myScriptName" + key, $"myFunctionName({someJavascriptObject})", True)
in C#:
ScriptManager.RegisterClientScriptBlock(Page, typeof(string), "myScriptName" + key, $"myFunctionName({someJavascriptObject})", true);
Of course, I hope it goes without saying that you need to replace key with your key identifier and should probably move all of this into a sub/function/method and pass in key and someJavascriptObject (if your javascript method requires that your arg is a javascript object).
MSDN docs:
https://msdn.microsoft.com/en-us/library/bb338357(v=vs.110).aspx

This is how I've done it.
HTML markup showing a label and button control is as follows.
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblJavaScript" runat="server" Text=""></asp:Label>
<asp:Button ID="btnShowDialogue" runat="server" Text="Show Dialogue" />
</div>
</form>
</body>
JavaScript function is here.
<head runat="server">
<title>Calling javascript function from code behind example</title>
<script type="text/javascript">
function showDialogue() {
alert("this dialogue has been invoked through codebehind.");
}
</script>
</head>
Code behind to trigger the JavaScript function is here.
lblJavaScript.Text = "<script type='text/javascript'>showDialogue();</script>";

ScriptManager.RegisterStartupScript(Page, GetType(), "JavaFunction", "AlertError();", true);
using your function is enough

Try This in Code Behind and it will worked 100%
Write this line of code in you Code Behind file
string script = "window.onload = function() { YourJavaScriptFunctionName(); };";
ClientScript.RegisterStartupScript(this.GetType(), "YourJavaScriptFunctionName", script, true);
And this is the web form page
<script type="text/javascript">
function YourJavaScriptFunctionName() {
alert("Test!")
}
</script>

this works for me
object Json_Object=maintainerService.Convert_To_JSON(Jobitem);
ScriptManager.RegisterClientScriptBlock(this,GetType(), "Javascript", "SelectedJobsMaintainer("+Json_Object+"); ",true);

Since I couldn't find a solution that was code behind, which includes trying the ClientScript and ScriptManager like mutanic and Orlando Herrera said in this question (they both somehow failed), I'll offer a front-end solution that utilizes button clicks to others if they're in the same position as me. This worked for me:
HTML Markup:
<asp:button ID="myButton" runat="server" Text="Submit" OnClientClick="return myFunction();"></asp:button>
JavaScript:
function myFunction() {
// Your JavaScript code
return false;
}
I am simply using an ASP.NET button which utilizes the OnClientClick property, which fires client-side scripting functions, that being JavaScript. The key things to note here are the uses of the return keyword in the function call and in the function itself. I've read docs that don't use return but still get the button click to work - somehow it didn't work for me. The return false; statement in the function specifies a postback should NOT happen. You could also use that statement in the OnClientClick property: OnClientClick="myFunction() return false;"

I used ScriptManager in Code Behind and it worked fine.
ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "CallMyFunction", "confirm()", true);
If you are using UpdatePanel in ASP Frontend.
Then, enter UpdatePanel name and 'function name' defined with script tags.

Thank "Liko", just add a comment to his answer.
string jsFunc = "myFunc(" + MyBackValue + ")";
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "myJsFn", jsFunc, true);
Added single quotes (') to variable, otherwise it will give error message:
string jsFunc = "myFunc('" + MyBackValue + "')";

You can't call a Javascript function from the CodeBehind, because the CodeBehind file contains the code that executes server side on the web server. Javascript code executes in the web browser on the client side.

You can expose C# methods on codebehind pages to be callable via JavaScript by using the ScriptMethod attribute.
You cannot call JavaScript from a CodeBehind - that code exists solely on the client.

ASP.NET 4.0 - Calling a server-side method from a client side method - PageMethods

I'm trying to access a server side method from a client side one (that is just calling a server method from javascript). I'm using .NET 4.0 Visual Studio 2010 Ultimate. I'm building a web control (ascx).
I have an ascx page (the control's html) and an ascx.cs page:
The ascx is the following:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="BoxButton.ascx.cs" Inherits="ATB.Controls._BoxButton" %>
<asp:ScriptManager ID="SM_ScriptManager" runat="server" EnablePageMethods="true" />
<script type="text/javascript">
function handle() {
PageMethods.manageHandler();
}
</script>
<span id="BoxButton_HtmlSpan" runat="server" onclick="handle();" style="background-color:#efefef;border-style:solid;border-width:1px;border-color:#cccccc;height:25px;text-align:center;padding:3px 3px 3px 3px;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-style:normal;color:#333333;line-height:15px">
<asp:Label runat="server" Text="Button" id="Text_Label"></asp:Label>
</span>
And the ascx.cs file is this one (just printing the function):
[System.Web.Services.WebMethod]
public static string manageHandler() {
int i = 0;
System.Console.WriteLine("Ciao");
return "Hello";
}
Well, as you can see I'm trying to solve my problem through pagemethods, well it does not work and I always getPageMethods is undefined b y the JScript runtime manager.
Well, is it possible that PageMethods are not available in .net 4.0?
Anyway, is there another approach for solving the problem regarding server side method calling from client side scripts? I understood that pagemethods are nothing more than a web service, and this bothers me a little when thinking about security in my web app.
EDIT:
Well, it seems that jQuery is a valid solution... but is it able to allow me to call a server side method? I expect to be because we're talking about ajax right?
EDIT 2:
Ah... Another question... I tried to use a webmethod but it does not work getting me errors not finding PageMethods in javascript while I set scriptmanager and method's attribute WebMethod as specified....
Is it because I'm working inside an ascx?????? possible????? Then, even jQuery will not help....

I believe that PageMethods are only available on pages, not on user controls.

I would recommend using jQuery, it's much more elegant. Here's an example

I have found one more tutorial to do it with JQuery: Calling a server side function from JQUERY
hope this will help.

Categories