Dynamically create a table with asp.net
I want to design a table whose rows are retrieved from another aspx page via xml.
Say I have a page getstudents.aspx
which gives all the students in the database in the following format:
<?xml version="1.0" encoding="utf-8"?>
<allstudents>
<student>
<rollno>8001</rollno>
<name>AAAA</name>
</student>
<student>
<rollno>8002</rollno>
<name>BBBB</name>
</student>
</allstudents>
this way I get data from getstudents.aspx
.
Now I want to design a page selectstudents.aspx
which outputs following html (a table with a checkbox in each row)
in the following way:
<head>
<script type="text/javascript">
var values[];
function add(x)
{
//adds the value of ticked checkbox in values array and removes it when unticked
}
</script>
</head>
<body>
<table>
<tr>
<td> </td开发者_开发问答>
<td>Name</td>
<tr>
<td><input type="checkbox" name="cbRoll" value="8001" id="cbRoll8001" /></td>
<td>AAAA</td>
</tr>
<tr>
<td><input type="checkbox" name="cbRoll" value="8002" id="cbRoll8002"/></td>
<td>BBBB</td>
</tr>
</table>
<form id="form1" name="form1">
</form>
</body>
The table with checkboxes is dynamically generated at runtime with id of checkbox, value of checkbox(8001,8002,etc) and the name (AAAA,BBBB,etc) in the next corrosponding column. By reading data from xml given by page getstudents.aspx also a function (say) addremove(this.id) should be called whenever a checkbox is ticked or unticked which should add or remove the value of checkbox (8001,8002,etc) to/from a string array named (say) 'values'. I will then submit to the webpage a string via POST containing "8001;8002;8003 and so on" depending on which checkboxes are checked obviously i will make the string from the array 'values'.
I do not want to use ready made usercontrols available in asp.net. What I want to do is more complicated than this, but this is a simplified version of it.
So for this, what should be structure of aspx page and what should be code behind in C#?
On the selectstudents.aspx
page, have a >NET Literal control where you want the table to appear:
<body>
<form id="form1" name="form1">
<asp:Literal runat="server" id="ltrStudents" />
</form>
</body>
Then in the code-behind of that page, get your students XML and create a table from it, something like this:
string xml =
@"<?xml version='1.0' encoding='utf-8'?>
<allstudents>
<student>
<rollno>8001</rollno>
<name>AAAA</name>
</student>
<student>
<rollno>8002</rollno>
<name>BBBB</name>
</student>
</allstudents>";
var studentsXml = XDocument.Parse(xml);
var students = studentsXml.Element("allstudents").Elements("student").ToList();
StringBuilder sb = new StringBuilder(500);
sb.Append("<table>");
foreach (var student in students)
{
string rollNumber = student.Element("rollno") != null ? student.Element("rollno").Value : string.Empty;
string name = student.Element("name") != null ? student.Element("name").Value : string.Empty;
sb.Append("<tr>");
sb.Append("<td> </td>");
sb.Append("<td>Name</td>");
sb.Append("</tr>");
sb.Append("<tr>");
sb.AppendFormat("<td><input type='checkbox' name='cbRoll' value='{0}' id='cbRoll{0}' /></td>", rollNumber);
sb.AppendFormat("<td>{0}</td>", name);
sb.Append("<tr/>");
}
sb.Append("</table>");
ltrStudents.Text = sb.ToString();
Try the above code and see if it helps you. You might need to set the Mode
property of the ltrStudents control - check this out for help on that.
As for the JavaScript, my jQuery is really rusty, but in the ASPX you could have:
$(document).ready(
function() {
$("input[type=checkbox]").click(function(){
alert($(this).attr('value')); // Store the rollno using a global variable.
});
});
I'm just using alert()
here to prove a point. In your code you need to store the rollno in a variable.
精彩评论