Dot Net Sea: generate grid using jquery

Friday, 6 September 2013

generate grid using jquery

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function showData() {

$.ajax({
url: 'Default4.aspx/Show',
type: 'post',
data: '{}',
contentType: 'application/json;charset=utf-8',
dataType:'json',
success: function (amit) {
chkShowData(amit);
},
Error: function (amit) {
alert(amit)
}
});
}
function chkShowData(abc) {
//debugger;
FillEmployee(abc.d);
}

function FillEmployee(EmpData) {
var table = "<table>"
+ "<tr>"
+ "<td style=width:100px;background-color:silver;color:navy;>Emp Id</td>"
+ "<td style=width:100px;background-color:silver;color:navy;>Emp Name</td>"
+ "<td style=width:100px;background-color:silver;color:navy;>Emp age</td>"
+ "</tr>";
var Row = "";
for (var indx in EmpData) {
Row += "<tr>"
+ "<td style=width:100px;background-color:silver;color:navy;>" +
EmpData[indx].id+ "</td>"
+ "<td style=width:100px;background-color:silver;color:navy;>" +
EmpData[indx].name + "</td>"
+ "<td style=width:100px;background-color:silver;color:navy;>" +
EmpData[indx].age + "</td>"
+ "</tr>"
}
table += Row;
table += "</table>";
$('#d1').html(table);
}

</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="d1"></div>
<input id="Button1" onclick="showData();" type="button" value="Show" />
</div>
</form>
</body>
</html>

-----------------------------------------------------------------------------
default4.aspx page code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using test_dbModel;

public partial class Default4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

[WebMethod]
public static List<emp> Show()
{
test_dbEntities db = new test_dbEntities();

return db.emps.ToList();
}
}

Dot Net Sea

Friday, 6 September 2013

generate grid using jquery

No comments:

Post a Comment