![](/img/trans.png)
[英]Parsing Json data from asp.net webservice and populating it in asp.net dropdownlist
[英]How to consume Json data from asp.net webservice with javascript
曾几何时,有一个人在工作的项目。 该项目有一个母版页和一个内容页面。 内容页面有一个下拉列表和两个文本框。 但是,当这个人从下拉列表中选择任何产品名称时,有多好奇,它的totalQuantity
和pricePerItem
值没有出现在文本框中! 他试图为这个项目编写Web服务代码和javascript代码,但不幸的是,它并没有按照他应该和将要做的那样做。 因此,他正在请求你的帮助。
public class QuantityAndPrice
{
public string totalQuantity { get; set; }
public string pricePerItem { get; set; }
}
网络服务代码
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));
}
}
JavaScript的
<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> Available Qty</h6>
<asp:TextBox ID="tbxAvailableQuantity" CssClass="form-control" ReadOnly="true" runat="server"></asp:TextBox>
</div>
<div class="col-md-6">
<h6> 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> Sales Qty</h6>
<asp:TextBox ID="tbxSalesQtuantity" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<div class="col-lg-6">
<h6> 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>
ResponseFormat = ResponseFormat.Json
。 contentType: "application/json; charset=utf-8"
和dataType: 'json'
应该被指定。 d
例如像data.d.totalQuantity
。 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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.