Bind a Dropdown List via jQuery and JSON (using JavaScriptSerializer)

Akiii
Posted by Akiii under jQuery category on | Points: 40 | Views : 5067
<div>     
<asp:Button ID="btnGetMsg" runat="server" Text="Click Me" OnClientClick="DisplayMessageCall();return false;" /><br />
<asp:Label ID="lblOutput" runat="server" Text=""></asp:Label>
<table id="container">
<tr>
<th>MaterialName
</th>
<th>QuantityType
</th>
</tr>
</table><br /><br />

<asp:DropDownList ID="ddlNo" runat="server"></asp:DropDownList>
</div>




<script type="text/javascript">
function DisplayMessageCall() {
$.ajax({
url: "Handler.ashx",
data: "",
type: "GET",
datatype: 'json',
success: function (data) {
$("#container tr+tr").remove();
var table = $("#container");
var list = $("#ddlNo");
var listItems = "";
$(data).each(function (i) {
listItems += "<option value='" + data[i].MaterialName + "'>" + data[i].QuantityType + "</option>";
}

);
$("#ddlNo").html(listItems);
},
error: OnErrorCall
});
}

function OnSuccessCall(response) {
$('#<%=lblOutput.ClientID%>').html(response);


}

function OnErrorCall(response) {
alert(response.status + " " + response.statusText);
}
</script>



using System.Collections.Generic;

public class Handler : IHttpHandler {

public void ProcessRequest (HttpContext context)
{
context.Response.ContentType = "application/json";
string period = context.Request.QueryString["Period"];
List<MaterialEntity> objList = new List<MaterialEntity>();
for (int i = 0; i < 10; i++)
{
objList.Add(new MaterialEntity()
{
MaterialName = period + " " + i.ToString(),
QuantityType = period + " " + i.ToString()
});
}
System.Web.Script.Serialization.JavaScriptSerializer oSerializer =
new System.Web.Script.Serialization.JavaScriptSerializer();
string sJSON = oSerializer.Serialize(objList);
context.Response.Write(sJSON);
}


public bool IsReusable {
get {
return false;
}
}

}
public class MaterialEntity
{
public string MaterialName { get; set; }
public string QuantityType { get; set; }
}




Thanks and Regards
Akiii

Comments or Responses

Login to post response