在C＃中从JavaScript调用代码

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 !

Answer 1

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");                
             }                
   });