title: How to consume Json data from asp.net webservice with javascript
body: <p>Once upon a time, there was a project on which a person was working. This project had a master page and a content page. The content page had a drop-down list and two text boxes. However, when the person selected any product name from the drop-down list, how curious, it's <code>totalQuantity</code> and <code>pricePerItem</code> values did not appear in the text boxes! He was trying to write web service code and javascript code for this project, but unfortunately it did not do what he had in mind it should and would do. Therefore, he is requesting your help.</p>
  
  <pre><code> public class QuantityAndPrice
  {
      public string totalQuantity { get; set; }
      public string pricePerItem { get; set; }
  }
  </code></pre>
  
  <blockquote>
    <p>webservice code</p>
  </blockquote>
  
  <pre><code>  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));
  
  
      }
  }
  </code></pre>
  
  <blockquote>
    <p>javascript</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> &lt;script type="text/javascript"&gt;
  
          $(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);
                      }
                  });
              });
          });
  
  
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>and here aspx code</p>
  </blockquote>
  
  <pre><code>&lt;div class="panel-body"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-6"&gt; 
                           &lt;h6&gt;&amp;nbsp;&amp;nbsp;Available Qty&lt;/h6&gt;
                           &lt;asp:TextBox ID="tbxAvailableQuantity" CssClass="form-control" ReadOnly="true" runat="server"&gt;&lt;/asp:TextBox&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-md-6"&gt;
                           &lt;h6&gt;&amp;nbsp;&amp;nbsp;Price/Item&lt;/h6&gt;
                            &lt;asp:TextBox ID="tbxPricePerItem" CssClass="form-control" ReadOnly="true" runat="server"&gt;&lt;/asp:TextBox&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt; 
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-6"&gt;
                           &lt;h6&gt;&amp;nbsp;&amp;nbsp;Sales Qty&lt;/h6&gt;
                           &lt;asp:TextBox ID="tbxSalesQtuantity" CssClass="form-control" runat="server"&gt;&lt;/asp:TextBox&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-6"&gt;
                           &lt;h6&gt;&amp;nbsp;&amp;nbsp;Total Price&lt;/h6&gt;
                           &lt;asp:TextBox ID="tbxTotalPrice" CssClass="form-control" runat="server"&gt;&lt;/asp:TextBox&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;                 
  
              &lt;/div&gt;
  
  
  
  
    &lt;asp:DropDownList ID="productNameDDL" CssClass="form-control" runat="server"&gt;&lt;/asp:DropDownList&gt;
  </code></pre>