ASP.NET web services - AJAX

From Logic Wiki
Jump to: navigation, search


To use a web service in a web page with AJAX in web service use [ScriptService] Attribute 

[ScriptService]
public class MyWebService : WebService
 [WebMethod(EnableSession = true)]
  public List<User> ListUsers()


Web Forms

install jQuery from NuGet 

<head runat="server">
<script type="text/javascript" src="Script/jquery-2.0.2.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
     PopulateSelectUsers();
   })
   function PopulateSelectUsers(){
     var selectUser = $('#select-user')
     selectUser.empty();
     MyWebService.myService.ListUsers(function(users)){
       for(var i = 0; i < users.legth; i++){
         selectUser.append($("<option></option>")
         .attr("value", users[i].UserId)
         .text(users[i].Name));
       }
     });
   }
</script>

<asp:ScriptManager runat="server" EnablePageMethods="True">
  <Services>
     <asp:ServiceReference Path="ProteinTracker.asmx"/>
  </Services>
</asp:ScriptManager>

  <label for="select-user">Select a user</label>
  <select id="select-user"></select>

HTML - JQuery

function AddNewUser(){
  var name = $("name").val();
  var goal = $("goal").val();
  $.ajax({
     type:"POST",
     url: "ProteinTracker.aspx/AddUser",
     data: JSPN.stringfy({'name':name, 'goal':goal }),
     contentType: 'application/json; charset=utf-8',
     dataType:"json",
     success: PopulateSelectUser
 });
Retrieved from "https://logicwiki.co.uk/index.php?title=ASP.NET_web_services_-_AJAX&oldid=193"