javascriptを使ってasp.net webserviceからJsonデータを消費する方法

Question

いつか、ある人が働いていたプロジェクトがありました。このプロジェクトにはマスターページとコンテンツページがありました。コンテンツページには、ドロップダウンリストと2つのテキストボックスがありました。しかし、その人がドロップダウンリストから任意の商品名を選択した場合、好奇心が強いのは、totalQuantityとpricePerItemの値がテキストボックスに表示されていないことです！彼はこのプロジェクトのWebサービスコードとJavaScriptコードを書こうとしていましたが、残念ながら彼はそれが念頭に置いていたことをやっていませんでした。したがって、彼はあなたの助けを求めています。

public class QuantityAndPrice 
{ 
    public string totalQuantity { get; set; } 
    public string pricePerItem { get; set; } 
} 

Webサービスコード

public class QuantityAndPriceService : System.Web.Services.WebService 
{ 

    [WebMethod] 
    public void GetQuantityAndPrice(string productName) 
    { 
     QuantityAndPrice quantityAndpriceObject = new QuantityAndPrice(); 

     string connect_string = "datasource=localhost;port=3306;username=root;password=root;"; 
     MySqlConnection connection = new MySqlConnection(connect_string); 
     string query = "select totalQuantity,pricePerItem from smart_shop.inventory where name='" + productName + "';"; 
     MySqlCommand cmd = new MySqlCommand(query, connection); 
     connection.Open(); 
     MySqlDataReader reader = cmd.ExecuteReader(); 



     while (reader.Read()) 
     { 
      quantityAndpriceObject.totalQuantity = reader.GetString("totalQuantity"); 
      quantityAndpriceObject.pricePerItem = reader.GetString("pricePerItem"); 
     } 

     JavaScriptSerializer js = new JavaScriptSerializer(); 
     Context.Response.Write(js.Serialize(quantityAndpriceObject)); 


    } 
} 

ジャバスクリプト

<script type="text/javascript"> 
 

 
     $(document).ready(function() { 
 
      $('#productNameDDL').change(function() { 
 

 
       var pName = $('#productNameDDL').val(); 
 

 
       $.ajax({ 
 

 
        url: 'QuantityAndPriceService.asmx/GetQuantityAndPrice', 
 
        data: { productName: pName }, 
 
        method: 'post', 
 
        dataType: 'json', 
 
        success: function (data) { 
 

 
         $('#tbxAvailableQuantity').val(data.totalQuantity); 
 
         $('#tbxPricePerItem').val(data.pricePerItem); 
 
        }, 
 
        error: function (err) { 
 
         alert(err); 
 
        } 
 
       }); 
 
      }); 
 
     }); 
 

 

 
    </script>

と、ここでのaspxコード

<div class="panel-body"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <h6>&nbsp;&nbsp;Available Qty</h6> 
         <asp:TextBox ID="tbxAvailableQuantity" CssClass="form-control" ReadOnly="true" runat="server"></asp:TextBox> 
        </div> 

        <div class="col-md-6"> 
         <h6>&nbsp;&nbsp;Price/Item</h6> 
          <asp:TextBox ID="tbxPricePerItem" CssClass="form-control" ReadOnly="true" runat="server"></asp:TextBox> 
        </div> 

       </div> 
       <div class="row"> 
        <div class="col-lg-6"> 
         <h6>&nbsp;&nbsp;Sales Qty</h6> 
         <asp:TextBox ID="tbxSalesQtuantity" CssClass="form-control" runat="server"></asp:TextBox> 
        </div> 
        <div class="col-lg-6"> 
         <h6>&nbsp;&nbsp;Total Price</h6> 
         <asp:TextBox ID="tbxTotalPrice" CssClass="form-control" runat="server"></asp:TextBox> 
        </div> 
       </div>     

      </div> 




    <asp:DropDownList ID="productNameDDL" CssClass="form-control" runat="server"></asp:DropDownList> 

Answer 1

1. Webサービスクラスは ScriptService 属性を持つ必要があります。
2. Webサービスメソッドは、ResponseFormat = ResponseFormat.Jsonを指定するScriptMethod 属性を持つ必要があります。
3. javaスクリプトcontentType: "application/json; charset=utf-8"およびdataType: 'json'で指定する必要があります。
4. ajaxコールの成功部分の結果はdに含まれています。このようにdata.d.totalQuantity。
5. ajax呼び出しのデータは、たとえば文字列で指定する必要があります。このdata:JSON.stringify({ productName: pName })

---

[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
[System.ComponentModel.ToolboxItem(false)] 
[ScriptService] 
public class QuantityAndPriceService : WebService 
{ 
    [WebMethod] 
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
    public QuantityAndPrice GetQuantityAndPrice(string productName) 
    { 
     QuantityAndPrice quantityAndpriceObject = new QuantityAndPrice 
     { 
      totalQuantity = "totalQuantityValue", 
      pricePerItem = "pricePerItemValue" 
     }; 
     return quantityAndpriceObject; 
    } 
} 

$.ajax({ 
    url: 'QuantityAndPriceService.asmx/GetQuantityAndPrice', 
    data: JSON.stringify({ productName: pName }), 
    method: 'post', 
    contentType: "application/json; charset=utf-8", 
    dataType: 'json', 
    success: function (data) { 
     $('#tbxAvailableQuantity').val(data.d.totalQuantity); 
     $('#tbxPricePerItem').val(data.d.pricePerItem); 
    }, 
    error: function (err) { 
     alert(err.responseText); 
    } 
});