I have written a script which dynamically creates a html table based off server side variables passed through hidden fields. Ideally, I want to add a .NET label and Radio button control to each cell that I can populate server side. I realize that .NET controls are all created when the page is first compiled, but is there anyway to add them later? Here is my code that builds the table:
<script>
$(document).ready(function () {
var satShifts = $('#mainContent_hidSat').val();
var sunShifts = $('#mainContent_hidSun').val();
var monShifts = $('#mainContent_hidMon').val();
var tueShifts = $('#mainContent_hidTue').val();
var wedShifts = $('#mainContent_hidWed').val();
var thuShifts = $('#mainContent_hidThu').val();
var friShifts = $('#mainContent_hidFri').val();
var c = 0;
for (var i = 0; i < satShifts; i++) {
$('#tblSat').append('<tr><td class="individualShift">Shift: ' + ***LABEL & RAD here*** + '</td></tr>');
c++;
}
for (var i = 0; i < sunShifts; i++) {
$('#tblSun').append('<tr><td class="individualShift">Shift: ' + ***LABEL & RAD here*** + '</td></tr>');
c++;
}
for (var i = 0; i < monShifts; i++) {
$('#tblMon').append('<tr><td class="individualShift">Shift: ' + ***LABEL & RAD here*** + '</td></tr>');
c++;
}
for (var i = 0; i < tueShifts; i++) {
$('#tblTue').append('<tr><td class="individualShift">Shift: ' + ***LABEL & RAD here*** + '</td></tr>');
c++;
}
for (var i = 0; i < wedShifts; i++) {
$('#tblWed').append('<tr><td class="individualShift">Shift: ' + ***LABEL & RAD here*** + '</td></tr>');
c++;
}
for (var i = 0; i < thuShifts; i++) {
$('#tblThu').append('<tr><td class="individualShift">Shift: ' + ***LABEL & RAD here*** + '</td></tr>');
c++;
}
for (var i = 0; i < friShifts; i++) {
$('#tblFri').append('<tr><td class="individualShift">Shift: ' + ***LABEL & RAD here*** + '</td></tr>');
c++;
}
});
</script>
You cannot add them as a .NET control once the page has been loaded. This is by design.
You can however add them as HTML elements and then access their values in the code-behind using Request.Form["textboxName"]
.
You would then set the name
value of your textboxes to whatever value you wanted to retrieve them by in the code-behind (In this case, it would be name="textboxName"
).
Alternatively, you could render them as ASP.NET controls from the back-end using the server side variables. If this is the route you want to take, I'll elaborate further.
Update : Everything you're trying to do in javascript can be done with Repeaters .
For each day on the back end, add a repeater that looks like this:
<asp:Repeater ID="rptSaturdayShifts" runat="server">
<ItemTemplate>
<tr><td class="individualShift">Shift: <asp:Label id="lblYourLabel" runat="server" Text='<%# Eval("LabelContent") %>' /> <asp:RadioButton id="rbYourRadioButton" runat="server" /></td></tr>
</ItemTemplate>
</asp:Repeater>
You just databind your repeater with a collection that has a "LabelContent" property and voila, your data is rendered. Now, when saving, you'll have to iterate through all of the repeater rows. So on your "Save" button click:
foreach (var item in rptSaturdayShifts.Items)
{
var yourRadioButton = (Label) item.FindControl("rbYourRadioButton");
// You can then access it using...
var radioButtonValue = yourRadioButton.SelectedValue;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.