Call asp.net function from javascript function

Question

I want to call asp.net function from a javascript function passing string value.

this is the asp.net function :

[System.Web.Services.WebMethod]     
public static string InsertData(string ID)
{
    string source = "Data Source=(LocalDB)\v11.0;Integrated Security=True;Connect Timeout=30";
    using(SqlConnection con = new SqlConnection(source))
    {
        using (SqlCommand cmd = new SqlCommand("Insert into Book (Name) values(@Name)", con))       {
            con.Open();
            cmd.Parameters.AddWithValue("@Name", ID);
            cmd.ExecuteNonQuery();
            return "True";
        }
    }
}

So i want to call this function from javascript function which passes the string value "ID" to the the asp.net function.

this is the javascript function i use

 function CallMethod() {
            PageMethods.InsertData("hello", CallSuccess, CallError);

        }

        function CallSuccess(res) {
            alert(res);
        }

        function CallError() {
            alert('Errorrr');
        }

and i call it from here

<body>
        <header>        
        </header>       
        <div class="table"  id="div1" > </div>                      
        <form id="Form1" runat="server">
            <asp:Button id="b1" Text="Submit" runat="server" onclientclick="CallMethod();return false;"/>
            <asp:ScriptManager enablepagemethods="true" id="ScriptManager1" runat="server"></asp:ScriptManager>
        </form> 

    </body>

so i have a button and onClick i want to add "Hello" Row to my table but nothing happens and CallError function calls

You absolutely should verify that the given string input is in the correct format ie is not an attack payload before blindly inserting the contents into your database. This is an XSS attack vector waiting to happen. — asawyer
– asawyer, Commented Jul 1, 2014 at 13:56
im not even properly inserting the data into the table before doing security checks but thanks anyway — Arch_interpreter
– Arch_interpreter, Commented Jul 1, 2014 at 14:35

Sain Pradeep · Accepted Answer · 2014-07-01 13:54:29Z

1

You can call web method from ajax call in javascript . you need to set url parameter values to function you want to call and you can pass value in the data prameter in json formate. like this data:"{ParamterName:'VALUE'}

 <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "YourPage.aspx/YouPageMethod",
                data: "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    alert('Method Called Sucess fully');
                },
                error: function (result) {
                    alert("error " + result);
                }
            });
        });
    </script>

OR

you can call using PageMethod Eample

 <script type="text/javascript">
        function callInsert() {
            PageMethods.InsertDate(id, OnSucceeded, OnFailed);
        }

        function OnSucceeded(response) {
            alert(response);
        }
        function OnFailed(error) {
            alert(error);
        }   


  /* call this javascript function */    
    callInsert();

</script>

edited Jul 1, 2014 at 13:54

answered Jul 1, 2014 at 12:11

Sain Pradeep

3,1351 gold badge24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Arch_interpreter Over a year ago

so this will call function("YouPageMethod") from` MyPage.aspx.cs` when document is ready ?In my case my asp.net function is called InsertData and its in WebForm1.aspx.cs

Arch_interpreter Over a year ago

function CallMethod() { 	PageMethods.InsertData("hello", CallSuccess, CallError); }  	    function CallSuccess(res) { 	        alert(res); 	    }  	    function CallError() { 	        alert('Errorrr'); 	    }

Sain Pradeep Over a year ago

can you update code in your question. So other can also see it

Arch_interpreter Over a year ago

and i call CallMethod() function from button click - onclientclick="CallMethod();"

Sain Pradeep Over a year ago

onclientclick="CallMethod();return false;" add return false with function call other wise your page will post back

milan m · Accepted Answer · 2014-07-01 12:15:44Z

0

You will need to include Jquery first in your page. Then you need to add the following Javascript code.

 <script type="text/javascript">
  var id ="5";  //your id will be stored here
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "YourPage.aspx/InsertData"  + "&?id="  ,
            data: "",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                alert('Success');
            },
            error: function (xhr, request, status) {
                 alert(xhr.responseText);
            }
        });
    });
</script>

answered Jul 1, 2014 at 12:15

milan m

2,2543 gold badges29 silver badges42 bronze badges

1 Comment

Arch_interpreter Over a year ago

ok so i think it works both ways with Jquery and with PageMethod. The thing is that it gives me failure message both ways and i dont know why. The asp.net function seems properly constructed

DineshKumar · Accepted Answer · 2014-07-01 12:20:46Z

0

You need to have scriptManager in your .aspx page

    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />

After that you can call the method using

    <script type="text/javascript">
    function func(){
    PageMethods.InsertData(id,success_msg,failure_msg);
    }
    </script>

answered Jul 1, 2014 at 12:20

DineshKumar

4833 silver badges12 bronze badges

1 Comment

Arch_interpreter Over a year ago

well i have everything i need and same story no rows added in the table

Collectives™ on Stack Overflow

Call asp.net function from javascript function

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related