Dot Net Sea: bind li using jquery in asp.net with css class dynamically

Saturday, 12 October 2013

bind li using jquery in asp.net with css class dynamically

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>

<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>--%>

<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) {
// debugger;
// $("#div3").html('');
// var div3Content = '';
// for (var i = 0; i < EmpData.length; i++)
// {
// div3Content += '<p>' + EmpData[i].name + '</p>'; //if Name is property of your Person object
// }
// $("#div3").append(div3Content);

debugger;
var listString = '<ul id="customerList" class="dropv">';

// running a loop
for (var i = 0; i < EmpData.length; i++) {
listString += '<li><a href="Default2.aspx " style="text-decoration:none;" >' + EmpData[i].name + '</a></li>';
}
listString += '</ul>';
//appending to the div
$('#LankanLists').html(listString);
}
</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>

<div id="LankanLists"></div>

</form>
</body>
</html>

Dot Net Sea

Saturday, 12 October 2013

bind li using jquery in asp.net with css class dynamically

No comments:

Post a Comment