WebMethodApi

ВебМетодАпи

ASP.Net WebMethod с использованием jQuery AJAX

Веб-метод

Важно отметить, что метод объявлен как статический (C#) и украшен атрибутом WebMethod; это необходимо, иначе метод не будет вызываться из вызова jQuery AJAX на стороне клиента.

  [ WebMethod ]
    public static List < Book > GetAllBooks ( )
    {
        return new BookManager ( ) . GetAllBooks ( ) ;
    }

    [ WebMethod ]
    public static Book GetBookDetails ( int bookId )
    {
        return new BookManager ( ) . GetBook ( bookId ) ;
    } 

JQuery-скрипт

 function GetAllBooks ( ) {
    // JQuery AJAX Code Here 

    var DropDownList1 = $ ( "#DropDownList1" ) ;
 

    $ . ajax ( {
        type : "POST" ,
        url : "index.aspx/GetAllBooks" ,
        contentType : "application/json; charset=utf-8" ,
        dataType : "json" ,
        success : function ( response ) {

            var books = response . d ;
            $ . each ( books , function ( index , b ) {
                DropDownList1 . append ( '<option value="' + b . Id + '">' + b . Title + '</option>' ) ;
            } ) ;
        } ,
        failure : function ( msg ) {
            alert ( msg ) ;
        } ,
        error : function ( r ) {
            alert ( r ) ;

        }
    } ) ;


} 

HTML-разметка

 < form id =" form1 " runat =" server " >
    
Select book:
    
   < asp:DropDownList ID =" DropDownList1 " runat =" server " Width =" 150 " >
      < asp:ListItem Text =" Select " Value =" -1 " />
   </ asp:DropDownList >
    
   < br />
   < br />
    
   < table style =" border: solid 1px black; width: 300px; display: none; background-color: #f3f3f3 "
      cellpadding =" 4 " cellspacing =" 0 " id =" outputTable " >
      < tr >
         < td > Book ID: </ td >
         < td > < span id =" bId " /> </ td >  
      </ tr >
      < tr >
         < td > Book Title: </ td >
         < td > < span id =" bTitle " /> </ td >
      </ tr >
      < tr >
         < td > Book Author: </ td >
         < td > < span id =" bAuth " /> </ td >
      </ tr >
       < tr >
         < td > Book Price: </ td >
         < td > < span id =" bPrice " /> </ td >
      </ tr >
   </ table >

</ form >