Hi florenz,
I have created one sample please check with this.
HTML
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function GetPatientDetails(link) {
var row = $(link).closest('tr');
var PatientId = $('td', row).eq(0).html();
$.ajax({
type: "POST",
url: "179280.aspx/LoadDetails",
data: '{patientId: "' + PatientId + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
return false;
}
function OnSuccess(response) {
$('#dvDetails').html('');
$('#dvDetails').html(response.d);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:PlaceHolder runat="server" ID="PlaceHolder1"></asp:PlaceHolder>
</div>
<div id="dvDetails">
</div>
</form>
</body>
Code
public class Patient
{
public int PatientId { get; set; }
public string PatientName { get; set; }
}
public class PatientDetails
{
public int PatientId { get; set; }
public int VisitationId { get; set; }
public string VisitationDate { get; set; }
public string PhysicianName { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
List<Patient> patientList = new List<Patient>();
patientList.Add(new Patient() { PatientId = 1, PatientName = "Patient1" });
patientList.Add(new Patient() { PatientId = 2, PatientName = "Patient2" });
patientList.Add(new Patient() { PatientId = 3, PatientName = "Patient3" });
patientList.Add(new Patient() { PatientId = 4, PatientName = "Patient4" });
patientList.Add(new Patient() { PatientId = 5, PatientName = "Patient5" });
var query = from p in patientList select p;
StringBuilder html = new StringBuilder();
html.Append("<table id='patient-header'>");
html.Append("<tr><th>Patient ID</th><th>Patient Name</th><th>Details</th></tr>");
foreach (var p in query)
{
html.Append("<tr>");
html.Append("<td>");
html.Append(p.PatientId);
html.Append("</td>");
html.Append("<td>");
html.Append(p.PatientName);
html.Append("</td>");
html.Append("<td>");
html.Append("<a href=\"#\" id=\"" + p.PatientId + "\" onclick=\"GetPatientDetails(this);\">Details</a>");
html.Append("</td>");
html.Append("</tr>");
}
html.Append("</table>");
PlaceHolder1.Controls.Add(new Literal { Text = html.ToString() });
}
[WebMethod]
public static string LoadDetails(int patientId)
{
List<PatientDetails> details = new List<PatientDetails>();
details.Add(new PatientDetails() { PatientId = 1, VisitationId = 1, VisitationDate = "10/30/2015", PhysicianName = "Physician #1" });
details.Add(new PatientDetails() { PatientId = 1, VisitationId = 2, VisitationDate = "10/31/2015", PhysicianName = "Physician #2" });
details.Add(new PatientDetails() { PatientId = 2, VisitationId = 3, VisitationDate = "10/31/2015", PhysicianName = "Physician #2" });
details.Add(new PatientDetails() { PatientId = 3, VisitationId = 4, VisitationDate = "10/30/2015", PhysicianName = "Physician #1" });
details.Add(new PatientDetails() { PatientId = 4, VisitationId = 5, VisitationDate = "10/30/2015", PhysicianName = "Physician #1" });
details.Add(new PatientDetails() { PatientId = 5, VisitationId = 6, VisitationDate = "10/30/2015", PhysicianName = "Physician #2" });
StringBuilder html = new StringBuilder();
html.Append("<table id='patient-details'><tr><th>Visitation Date</th><th>Physician Name</th></tr>");
var result = from detail in details where detail.PatientId == patientId select detail;
foreach (PatientDetails v in result)
{
html.Append("<tr id='" + v.VisitationId + "'>");
html.Append("<td>");
html.Append(v.VisitationDate);
html.Append("</td>");
html.Append("<td>");
html.Append(v.PhysicianName);
html.Append("</td>");
html.Append("</tr>");
}
html.Append("</table>");
return html.ToString();
}
Screenshot
