问题
I have an div id = campaignDiv and I load its content dynamically
The content is checkboxes .
I have an update panel that fires every 30 seconds.
My problem
when the update panel fires, the checkboxes return to the default state, which is unselected.
I will give you all my code. Actually it is very simple code. you can copy paste it in you visual studio and it will work
WebForm4.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="TestDropdownChecklist.WebForm4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="StyleSheet1.css"/>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick">
</asp:Timer>
<div id="campaignDiv" runat="server">
<ul>
</ul>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
WebForm4.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestDropdownChecklist
{
public partial class WebForm4 : System.Web.UI.Page
{
private string CreateLiCheckbox(string checkBoxText)
{
return string.Format("<li><span class=\"textDropdown\">{0}</span><input runat=\"server\" id=\"{1}\" value=\"{0}\" type=\"checkbox\"><label for=\"{1}\"></label></li>", checkBoxText, checkBoxText + "dropdownID");
}
protected void Page_Load(object sender, EventArgs e)
{
int refreshtime = 30000;
Timer1.Interval = refreshtime;
if (!IsPostBack)
{
string[] comps = new string[] { "default", "sales", "direct"};
string html = "<ul>";
for (int i = 0; i < comps.Count(); i++)
{
html = html + CreateLiCheckbox(comps[i]);
}
html = html + "</ul>";
campaignDiv.InnerHtml = html;
}
else
{
}
}
protected void Timer1_Tick(object sender, EventArgs e)
{
}
}
}
StyleSheet1.css
#DropdownSeviceLink {
float: right;
margin-right: 10px;
}
a#DropdownServiceLink:visited {
color: inherit;
}
#campaignDiv {
background-color: #374954;
width: 200px;
height: 170px;
padding-bottom: 10px;
position: absolute;
top: 40px;
right: 0;
}
#campaignDiv ul {
color: #fff;
list-style: none;
overflow: auto;
padding-left: 5px;
height:100%;
}
#campaignDiv input[type=checkbox] {
visibility: hidden;
}
#campaignDiv input[type=checkbox]:checked + label {
left: 60px;
background: #26ca28;
}
#campaignDiv li {
width: 100px; /*120*/
height: 25px; /*40*/
background: #333;
margin: 13px 0px; /*20px 60px*/
border-radius: 50px;
position: relative;
}
#campaignDiv li:before {
content: 'On';
position: absolute;
top: 4px; /*12*/
left: 13px;
height: 2px;
color: #26ca28;
font-size: 16px;
}
#campaignDiv li:after {
content: 'Off';
position: absolute;
top: 4px; /*12*/
left: 71px; /*84*/
height: 2px;
color: #111;
font-size: 16px;
}
#campaignDiv li label {
display: block;
width: 36px; /*52*/
height: 18px; /*22*/
border-radius: 50px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 4px; /*9*/
z-index: 1;
left: 12px;
background: #ddd;
}
.textDropdown {
margin:0px;
padding:0px;
margin-left: 110px;
}
Please notice that I am using runat server already. maybe I should have added the checkbox dynamically in another way?
Edit
after readying through internet, I find that I may need to add the checkboxes to my update panel like this
UpdatePanel1.ContentTemplateContainer.Controls.Add(dynamic controls);
but the problem is the the checkbox in my case is string not objects. right?
Your help is highly appreciated.
Edit for the great user Schadensbegrenzer
Your answer is really works, I thaaaaaaaaaaaaaank you , but please I stil have this issue not solved, your code made this rendered html
<ul id="campaignDiv"> <li><input id="campaignDiv_0" type="checkbox" name="campaignDiv$0" checked="checked" value="default"><label for="campaignDiv_0">default</label></li> <li><input id="campaignDiv_1" type="checkbox" name="campaignDiv$1" value="sales"><label for="campaignDiv_1">sales</label></li> <li><input id="campaignDiv_2" type="checkbox" name="campaignDiv$2" value="direct"><label for="campaignDiv_2">direct</label></li> </ul>
where the campaignDiv is the ID of the ul. kindly can you edit your answer so the rendered html can be like this:
<div id = campaignDiv>
<ul>
<li>
checkbox here
</li>
</ul>
</div>
in your code I made the campaginDiv the id of asp:CheckBoxList
回答1:
To have more space for code here is my suggestion for the checkboxlist again. I hope it's that what you are asking for.
.aspx
<asp:UpdatePanel ID="upStuff" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="campaignDiv">
<asp:CheckBoxList runat="server" RepeatLayout="UnorderedList" ID="myCheckboxList" TextAlign="Left">
</div>
</asp:CheckBoxList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick"/>
</Triggers>
</asp:UpdatePanel>
.aspx.cs
if (!IsPostBack)
{
var comps = new[] { "default", "sales", "direct" };
for (int i = 0; i < comps.Count(); i++)
{
myCheckboxList.Items.Add(new ListItem{Text = comps[i]});
}
}
This way it will keep your checkbox checked
回答2:
First off, adding runat="server" to your html string is meaningless here, as it will not be processed by the server and will be sent to the client as is.
Now, your update panel will always emit the same content because its repopulated from the ViewState, if you disable the update panel view state, on the next refresh it will return an empty panel (there is no view state to read from)
So what to do here! You need to refresh the update panel contents on post back, and manually read the client state.
If view state size does concern you, then do the following:
public partial class WebForm4 : System.Web.UI.Page
{
private string CreateLiCheckbox(string checkBoxText)
{
var checkState = !string.IsNullOrEmpty(Request.Form[string.Format("chk_{0}", checkBoxText)]) ? "checked=\"checked\"" : "";
return string.Format("<li><span class=\"textDropdown\">{0}</span><input id=\"{1}\" name=\"chk_{0}\" value=\"{0}\" type=\"checkbox\" {2}><label for=\"{1}\"></label></li>",
checkBoxText,
checkBoxText + "dropdownID",
checkState);
}
protected void Page_Load(object sender, EventArgs e)
{
int refreshtime = 5000;
Timer1.Interval = refreshtime;
if (!IsPostBack)
PopulateCheckboxes();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
PopulateCheckboxes();
}
private void PopulateCheckboxes()
{
string[] comps = new string[] { "default", "sales", "direct" };
string html = "<ul>";
for (int i = 0; i < comps.Count(); i++)
{
html = html + CreateLiCheckbox(comps[i]);
}
html = html + "</ul>";
campaignDiv.InnerHtml = html;
}
}
来源：https://stackoverflow.com/questions/23854794/checkbox-status-not-saved-when-update-panel-fires