call function from ascx.cs in javascript using ajax call

Question

I have created one control which has one function but I want to call that function with ajax call on any .aspx page or master page same as like calling function from a code behind file,am fine with codebehind file but stucked with calling function from acsx.cs file to any .aspx page/master page on which am including/registering that control.

this is my HTML

<div>

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

  <input type="button" id="Button2" runat="server" value="Button" />

 </div>

my ascx.cs code

[WebMethod()]

[ScriptMethod()]

public static void myMethod(string text)

  Label1.text=text;

my ajax call whn am calling function from code behind file is like

$(document).ready(function () {

    $("#Button2").click(function () {

       var text = $("#TextBox1").val();

             $.ajax({

             type: "POST",

             url: "WebForm1.aspx/myMethod",

             data: "{ text: '" + text + "'}",

             contentType: "application/json; charset=utf-8",

              dataType: "json",

              async: "true",

              cache: "false",

              success: function (msg) {

               alert("success");

},

             Error: function (x, e) {

              // On Error

});

});

});

n ajax call am calling function from codebehind thats why am puting url: "WebForm1.aspx/myMethod", but am confused when about calling the function from .ascx.cs, like what will be a Url value for that ,because am simply using that control on my page like

<UC:userControl id="control1" runat="server" />

which I have included/registered on my page like

<%@ Register TagPrefix="UC" TagName="userControl " src="~/Controls/Mycontrol.ascx" %>

how do i resolved this issue?

i tried url value(s) like <pre> url: "Mycontrol.ascx/myMethod",

also

<pre> url: "WebForm1.aspx/Mycontrol.ascx/myMethod",

but still am unable to get it

Mangesh Gaherwar · Answer

Hey Madhav  I got Your Point u need to adopt the Webservice approach for this just check the solution added Now Hope Helps Mark Approved if it does

Mangesh Gaherwar · Answer

Hey Madhav Just move the WebMethod to the Your parent page an it will work as per the code is concerened it is Perfectly fine Your method needs to be in an .aspx (or I think .ashx or .asmx will work as well). Since it's actually making a new call to the web server IIS has to handle the request and IIS will not respond to calls to .ascx files. WebForm1.aspx/myMethod And MyMethod On the ASPX Page Hope it Helps Happy Coding Mark Approved if it is fine

Madhav · Answer

Thanks Mangeshit is working as i want i just tested will test this with master page really thanks man

Madhav · Answer

Hii Mangesh actauly i was facing some other issue with user control and to avoid resolve that issue many people suggest me to use ajax call my issue was very simple and that is likewhen i am clicking on button from user control that was reloading/refresh the entire page. and there is one requirement which could be done by controler because the same thing gone be use on more thatn one master page and master page not have any .cs page where i could write any simple or webmethod.

Mangesh Gaherwar · Answer

Is there any need that Ur webmethod needs to be on the ascx and u will call it On the ascx only WebMethod can reside anywhere at any page

Mangesh Gaherwar · Answer

Yes madhav in that case it is not feasible solution I will post workaround for same

Madhav · Answer

Thanks Magesh for being so helpfull i realy apriciate your help. the solution you shared that is calling method from aspx.cs page here its fine when am using aspx page but what when am puting that control on master page there it'll not feasibleisn't it?

Mangesh Gaherwar · Answer

Hey Madhav  This is the Working Solution for you sorry for late reply Few Tips for reference /* Method shoud be static so as to make it as WebMethod * We are doing AJAX POST to the WebMethod so it has to be somewhere where we can post the data * User Controls are part of the WEB PAGE they are not rendered seprately * Dont try to access the Control values In the WEB METHOD as Being static everything u access has to be the static an * controls are not static......... */ Hope it helps mark approved if it does Happy Coding

Madhav · Answer

ThanksBikesh Srivastava for your reply but can you please be more specific with your answer?because am not getting whar you have suggested

Bikesh Srivastava · Answer

Hi i think its not big deal just you can create seperate layer and call on aspx.cs and provide path

Madhav · Answer

Hello Mangesh please check the attchment once

Mangesh Gaherwar · Answer

Hey Madhav just check the code from this project run the samplepage.aspx an see the Output an do the needed changes in ur code One more thing dont try to access the controls In the WebMethod it wont allow you HOpe this Helps Mark approved if it does Thanks ..

Madhav · Answer

[WebMethod()] [ScriptMethod()] public void myMethod1(string text) { } this is a prototype of my function(i.e in ascx.cs file ) $(document).ready(function () { $(#Button2).click(function () { var text = $(#TextBox1).val(); // PageMethods.myMethod1(text); $.ajax({ type: POST url: WebForm1.aspx/myMethod1 data: { text: ' + text + '} contentType: application/json; charset=utf-8 dataType: json async: true cache: false success: function (msg) { alert(success); } Error: function (x e) { // On Error } }); }); }); and this is the way am calling that function in javascript with ajax call

Madhav · Answer

you mean the function code from ascx.cs file?

Mangesh Gaherwar · Answer

Add only.webmethod attribute to ur webmethod an try one more time. Thanks Hope.it helps u

Mangesh Gaherwar · Answer

Madhav can u post.the code control an page so that I can check what's wrong.with It Thanks Happy coding

Madhav · Answer

Thanks Mangesh for your reply. i tried the thing you suggested but unfortunatly that is not working i have a method in my ascx.cs file i.e myMethod1 and as per you suggestion my url in ajax call will be like url: WebForm1.aspx/myMethod1 right? if it is so then it shows me error as jquery-1.7.1.min.js:4 POST http://localhost:61025/WebForm1.aspx/myMethod1 500 (Internal Server Error) send @ jquery-1.7.1.min.js:4 ajax @ jquery-1.7.1.min.js:4 (anonymous) @ WebForm1.aspx:17 dispatch @ jquery-1.7.1.min.js:3 i @ jquery-1.7.1.min.js:3

Chetan Ranpariya · Answer

Hi Madhav If you are using latest version of ASP.NET and Visual Studio you can utilize feature of Web API for the functionality you want to achieve. You can refer following post know about how you can create a web API in ASP.NET application and call it from Javascript. http://www.webdevelopmenthelp.net/2014/05/using-web-api-with-web-forms.html Thanks and regards Chetan Ranpariya