Call code behind from JavaScript in c#

Question

I have a search page call "companies" when user input keyword and click "search" it will call to some functions to show search results in file "companiesdatagrid".

Now, I created a simple dropdownlist in companiesdatagrid.ascx file:

  <asp:UpdatePanel ID="UpdatePanel1"  runat="server">
          <ContentTemplate>
              <asp:DropDownList ID="DropDownList1" Width="200px" runat="server" DataTextField="ItemTypeName" DataValueField="ItemTypeId"
                  onchange = "CallServerMethod(this)" ValidationGroup="vgLibItem"  >
              </asp:DropDownList>
          </ContentTemplate>
          <Triggers>
              <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
          </Triggers>

I want it to call a Java Script function that will call to function

public void DropDownList1sel(object sender, EventArgs e)

in the code behind file (CompaniesDatagrid.ascx.cs) However, I will test for a simple case, call for a simple function in code behind :

 public void add()
    {
        int a = 1;
        int b = 3;
        int c = a + b;
    }

In the page_load function (file CompanniesDatagrid.ascx.cs) I have:

   protected void Page_Load(object sender, System.EventArgs e)
    {
        // clear the javascript literal
        this.responseLiteral.Text = "";
        if (!Page.IsPostBack)
        {

            if (Request.Form["Method"] == "Add")
            {
                add();
                return;
            }
        }

And in companiesdatagrid.ascx I have this Java Script:

    <script type="text/javascript">
   function CallServerMethod() {
       alert("changed");
       var dataToSend = { Send1: 'Value1', Send2: 'Value2', Method: 'Add' };
       var opts =
        {
              url: 'companiesdatagrid.ascx',
            //url: 'companies.ascx',
            //url: 'CompaniesDatagrid.ascx.cs',
            //url: 'companies.ascx.cs'
            //url: 'companiesdatagrid.ascx/add',
            //url: 'CompaniesDatagrid.ascx.cs/add',
            //url: 'CompaniesDatagrid.aspx/add',
            //url: 'DesktopDefault.aspx?tabindex=2&tabid=15/add',
            data: dataToSend,
            dataType: 'JSON',
            type: 'POST',
            success: function (response) {
                //Do something here if successful
                alert('success');
            },
            error: function () {
                alert('failure');
            }
        }
        $.ajax(opts);
        alert("changed 2");
        }
</script>

It will only show the alert "changed" then "changed 2" then "failure". I never get success alert, which means I never call add() function in the code behind successfully!? Note that all the commented at the url I tried and get the same result! How to implement it correctly here ? I am really out of my way, please help! Thank you !

Replace `alert('failure')` with `console.log(arguments)`, open the console and see what the error is. `alert` is not a debugging tool! — adeneo, Aug 01 '14 at 03:36
It said "404 - File or directory not found" so it is not the right file or path to point to? But I tried all possible options that I may think of, what is the right place to point to ? — user1314404, Aug 01 '14 at 03:44

score 2 · Answer 1 · answered Aug 01 '14 at 03:59

2

first change url and check it is not reaching at proper resource, then check data is proper not..

 var dataToSend = { Send1: 'Value1', Send2: 'Value2', Method: 'Add' };
 var opts =
           $.ajax({               
       type: "POST",                
       url: "companiesdatagrid.ascx/methodname to be called",                
       data: dataToSend ,                
       contentType: "application/json; charset=utf-8",                
       dataType: "json",                
       success: function(msg) {                
          alert('sucess');                

       },                
       error: function() {                
             alert("error");                
             }                
   });

answered Aug 01 '14 at 03:59

Pankaj786

269
3
16

As in my example, "methodname to be called" is "add", so I put url: "companiesdatagrid.ascx/add" in your code and test. Same result, I got error alert. "404 not found" – user1314404 Aug 01 '14 at 04:11
it is resource not found error means your url is not proper put ? after add and check,it also may be because of data also change data to null object and check it may solve your error but first try with url – Pankaj786 Aug 01 '14 at 04:20
refer this link it may help you http://stackoverflow.com/questions/2539620/jquery-ajax-async-postback-on-c-sharp-usercontrol/2539913#2539913 – Pankaj786 Aug 01 '14 at 04:24
Thanks for the reference but I don't find much new info in that link. Most of that I was tried in my post. – user1314404 Aug 01 '14 at 06:15
still not solved your prob.Error code 404 for the resource it come only when url prob...try by changing url where url code is working in your module it may help you....dont send data send data by url only....remover data attribute – Pankaj786 Aug 01 '14 at 06:28

Call code behind from JavaScript in c#

1 Answers1