Bind a List via jQuery and JSON (using JavaScriptSerializer)

Akiii
Posted by Akiii under jQuery category on | Points: 40 | Views : 3078
<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" border="1">
<tr>
<th>
MaterialName
</th>
<th>
QuantityType
</th>
</tr>
</table>
</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");
$(data).each(function (i) {
table.append($("<tr>").append($("<td>").html(data[i].MaterialName)).append($("<td>").html(data[i].QuantityType)));
});
},
error: OnErrorCall
});
}

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


}

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



using System.Web.Script.Serialization;
using System.Collections.Generic;

public class Handler : IHttpHandler {

public void ProcessRequest (HttpContext context)
{
context.Response.ContentType = "application/json";
List<MaterialEntity> objList = new List<MaterialEntity>();
for (int i = 0; i < 10; i++)
{
objList.Add(new MaterialEntity()
{
MaterialName = "MaterialName " + " " + i.ToString(),
QuantityType = "QuantityType " + " " + i.ToString()
});
}
JavaScriptSerializer oSerializer = new 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