consomment service web .net en utilisant jquery

Question

J'ai fait ce service web qui renvoie une datatable depuis le serveur sql db. Quelqu'un peut-il m'aider avec la jquery pour l'afficher?

service web

[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 

[ScriptService] 
public class WebService : System.Web.Services.WebService 
{ 
    DataTable dt = new DataTable(); 

    [WebMethod] 
    public DataTable dbAccess() 
    { 
    using (SqlConnection conn = new SqlConnection(
      ConfigurationManager.ConnectionStrings["localConnectionString"] 
      .ConnectionString)) 
    { 
     using (SqlDataAdapter da = new SqlDataAdapter()) 
     { 
     conn.Open(); 
     da.SelectCommand = 
      new SqlCommand("SELECT VehicleMake FROM VehicleMakes", conn); 
     da.Fill(dt); 
     } 
     conn.Close(); 
    } 
    return dt; 
    } 
} 

ce qui est aussi loin que je suis arrivé avec le jquery

<script type="text/javascript"> 

    $(function() { 
     $('#Button1').click(getData); 
    }); 

    function getData() { 
     $.ajax({ 
      type: "POST", 
      url: "WebService.asmx/dbAccess", 
      data: "{}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (response) { 
       // What goes here? 
      }, 
      failure: function (msg) { 
       //error message 
      } 
     }); 
    } 
</script> 

Answer 1

Dans le passé, lors de l'utilisation des services asmx avec jQuery, j'ai utilisé quelque chose comme ce qui suit pour le post/JSON:

en supposant que j'avais une classe de réponse comme ceci:

public ResponseClass 
    { 
     public string Message { get; set; } 
    } 

Et un webservice avec une méthode comme ceci:

[WebMethod] 
    [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)] 
    public ResponseClass PostResponse() 
    { 
     var response = new ResponseClass() {Message = "Hello World"}; 
     return response; 
    } 

Certains html comme ceci:

<div id="response"> 
</div> 

Le javascript:

$.ajax({ 
    url: '/MyService.asmx/PostResponse', 
    data: "{}", 
    type: "POST", 
    cache: false, 
    dataType: 'json', 
    contentType: "application/json; charset=utf-8", 
    success: function(msg) { 
     var response = msg.d; //your response object 
     $('#response').html(response.Message); //set the response div contents to the Message 
    }, 
    error: function(xhr, status, error) { 
     alert(error); //do something if there is an error 
    } 
}); 

Answer 2

Vous avez plusieurs options

1) Vous pouvez soit retourner le code HTML pur à l'arrière et faites .html sur la balise div

2) Construisez un objet jsonp en utilisant stringbuild et revenez à l'interface utilisateur. Dans l'interface utilisateur, vous pouvez utiliser eval (réponse) et analyser l'objet. Faites-moi savoir si vous avez besoin d'informations supplémentaires à ce sujet.

J'ai fait les deux approches.

c'est former mon code, et vous pouvez faire comme ci-dessous

var jsonobj = eval('(' + tempstr + ')'); 

      for (var i = 0; i < jsonobj.searchsuggest.items.item.length; i++) { } 

Answer 3

Juste au cas où quelqu'un vient par ce poste chercher la même réponse que j'ai fourni ce que je suis venu avec.

Mon service Web communique avec une base de données, lit une table avec un SqlDataReader et charge ces données dans une base de données. Chaque ligne est ensuite stockée dans une ArrayList.

[WebService(Namespace = "http://babyUnicorns.net/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 

[ScriptService] 
public class WebService : System.Web.Services.WebService 
{ 
    [WebMethod] 
    public object dbAccess() 
    { 

     DataTable table = new DataTable("myTable"); 
     ArrayList arl = new ArrayList(); 
     using (SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["localConnectionString"].ConnectionString)) 
     { 
      using(SqlCommand comm = new SqlCommand("SELECT * FROM VehicleMakes",conn)) 
      { 
       conn.Open(); 
       SqlDataReader reader = comm.ExecuteReader(); 
       table.Load(reader); 
       reader.Close(); 
       conn.Close();  
      }    
     } 
     foreach(DataRow dRow in table.Rows) 
       { 
        arl.Add(dRow["VehicleMake"]+" "+dRow["VehicleMakeId"]);  
       } 
     return arl.ToArray();  
    } 
} 

En utilisant jQuery commande ajax Je prends l'élément arrayList et foreach retourné dans le tableau que je joins à ma div nommé « sortie ». La commande jQuery $ .each est utilisée pour séparer un tableau. J'ai compris comment l'utiliser en lisant l'API.

function getData() { 
      $.ajax({ 
       type: "POST", 
       url: "WebService.asmx/dbAccess", 
       data: "{}", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (msg) { 
        var response = msg.d; 
        $.each(response, function(index, value) { 
         $('#output').append(value+'<br />'); 
         });    
       }, 
       failure: function (msg) { 
        alert('failure'); 
       } 
      }); 
     } 
</script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <input type="button" id="Button1" value="Get Cars" /><input type="button" id="buttonClear" value="Clear" /> 
<div id="output"> 

</div> 
    </div> 
    </form> 
</body> 
</html> 

Ceci renvoie une liste de voitures extraites de la base de données.

Answer 4

<input id="Button2" type="button" value="button" onclick="Find()" /><br /> // call the javascript function Find() 

//Javascript function Find() 
function Find() { 
     $(document).ready(function() { 
      $.ajax(
      { 
       type: "POST", 
       url: "Model/CustomerDTO.asmx/GetDetail", 
       data: "{'nm':'" + $('#Text1').val() + "'}", // passing a parameter to retrive detail. 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (msg) { 
            var obj = jQuery.parseJSON(msg.d); // parsing of Json string to Javascript object. 
        alert(obj.COMPANYADDRESS); //. anything(depends upon your Fieldname 
        $('#RSSContent').html(obj.COMPANYADDRESS); // bind data to a div 

       }, 
       error: function() { 
        alert('data could not be be found'); 
       } 
      }); 
     }); 

    }