0

I am trying to insert data using jQuery and have done that earlier. But for the time being, I am doing this after a long time. Now the issue is I am trying to do debugging with browser and can see that the Ajax call actually doesn't get called. So here is my scenario: I've a table data and every row is associated with a button. If I click on the button, the associated row data will be inserted into database table (But here I put break-point in the debugger to check if the web method is called). So this is what I've tried:

<title>Tutorial - Sample App</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form id="form1" runat="server">
<div>
  <asp:Label ID="lblPersons" runat="server"></asp:Label>
</div>
</form>

 <script>
    $(".use-address").click(function () {
        var $row = $(this).closest("tr");    //Get the row
        var $text = $row.find(".val").text(); //Get the text or value

        alert($text);

        debugger;
        var persons = new Array();
        var person = {};

        person.name = $row.find(".val").text();
        persons.push(person);

        //The Ajax call here
        $.ajax({
            type: "POST",
            url: "/SampleWebForm.aspx/InsertPersons", //This isn't called actually and keeping the code in the same page - SampleWebForm.aspx
            data: JSON.stringify(persons),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                alert(data + " record(s) inserted.");
            }
        });
    });
</script>

Then the C# section here:

protected void Page_Load(object sender, EventArgs e)
{
   lblPersons.Text = Concatenate();
}

public class Person
{
   public string name { get; set; }
   public string age { get; set; }
}

public List<Person> GetPersons()
{
   List<Person> lst = new List<Person>
   {
      new Person { name = "John", age = "20" },
      new Person { name = "Jack", age = "30" }
   };

   return lst;
}

public string Concatenate()
{
   string data = "";
          data += "<table id = 'tblPersons'" +
                  "<thead>" +
                  "<tr class='ui-widget-header'>" +
                  "<th>Name</th>" +
                  "<th>Age</th>" +
                  "</tr>" +
                  "</thead>" +
                  "<tbody>" +
                  "";
                  foreach (var item in GetPersons())
                  {
          data +=   "<tr><td class='val'><span>" + item.name + "</span></td>" +
                    "<td>" + item.age + "</td><br/>" +
                    "<td><button type = 'button' id = 'btnSave'>Click Here</button><td><tr>" +
                    "</td>";
                  }
          data += "" +
                  "</tbody>" +
                  "</table>";

    return data;
}

[WebMethod]
public string InsertPersons(Person persons) //This is the method that's supposed to be hit while debugging but doesn't
{
   string name = "";
   name = persons.name;

   return name;
}
6
  • Does alert($text) alerts-popup you correct value in the browser on button click? Commented Oct 31, 2018 at 18:30
  • Yes, it does @Hitesh Gaur. The issue is the service doesn't get called in the debug mode of visual studio - Seems like missed something. Commented Oct 31, 2018 at 18:33
  • if it helps, can you check output in network tab of developer tools in your browser? and look for what response are you receiving for the specific ajax request. Commented Oct 31, 2018 at 19:20
  • Doesn’t WebMethod require a static method? Commented Oct 31, 2018 at 21:18
  • No, the ajax actually doesn't get called and checked in the network tab @Hitesh Gaur. Commented Nov 1, 2018 at 3:51

4 Answers 4

1

you need to declare the function "Static" or it wont work

public static string InsertPersons(Person persons)
Sign up to request clarification or add additional context in comments.

1 Comment

Already tried that @Kevbo. Didn't work I mean the method doesn't get called.
1

Make sure your code reaches to the point it can make ajax request.

A script manager may help, with Page methods enabled in it.. check here on previous SO article.

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

Also, use Static methods. Verify JSON string to be sent as value of data parameter. This article may help.

Comments

1

That is not a webservice(.asmx) but an exposed Page method in an .aspx

Use the annotation [PageMethod] instead of the webmethod annotation

Comments

0

I was able to make it work and my fault was, I was trying to pass a List though the C# method has an object to be passed. Not a list of object. So I changed the following:

debugger;
var persons = new Array();
var person = {};

person.name = $row.find(".val").text();
persons.push(person);

To:

debugger;
var person = {};

person.name = $row.find(".val").text();

Just removed the push() method and the persons array. Thanks all for your valuable suggestions.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.