Why are InnerHtml, InnerText and property values empty on postback? - asp.net

Question

I have some spans on my page that have value attributes.
When i try to get these attributes from the code behind, i only get the first two - the rest are null, even if the the value attributes exist and are not empty.
Howcome? This is my markup:
<div class="ExtraContainer">
<div class="box_slider">
<form id="Form1" runat="server">
<div class="block block1">
<h3>
Vælg områder</h3>
<div class="wraper">
<input id="chkAllAreas" type="radio" name="group1" class="input_radio" runat="server"/>
<label for="chkAllAreas">
Vis alle områder</label>
</div>
<div class="wraper">
<input id="chkCustomAreas" type="radio" name="group1" class="input_radio" runat="server"/>
<label for="chkCustomAreas">
Vælg områder</label>
</div>
</div>
<div class="block block2">
<h3>
Vælg Ledighed</h3>
<div class="wraper">
<input id="chkShowAll" type="radio" name="group2" class="input_radio" runat="server" />
<label for="chkShowAll">
Vis alle boliger</label>
</div>
<div class="wraper">
<input id="chkIsAvailable" type="radio" name="group2" class="input_radio" runat="server" />
<label for="chkIsAvailable">
Vis kun ledige boliger</label>
</div>
</div>
<div class="block block3">
<h3>
Vælg boligtype</h3>
<div class="wraper go_left">
<input id="chkAllTHousingTypes" type="checkbox" class="input_check" runat="server" />
<label for="chkAllTHousingTypes">
Vis alle boligtyper</label>
</div>
<div class="wraper go_left">
<input id="chkFamilieboliger" type="checkbox" class="input_check" runat="server" />
<label for="chkFamilieboliger">
Familieboliger</label>
</div>
<div class="wraper go_left">
<input id="chkUngdomsboliger" type="checkbox" class="input_check" runat="server" />
<label for="chkUngdomsboliger">
Ungdoms- & studieboliger</label>
</div>
<div class="wraper go_left">
<input id="chkAeldrebolig" type="checkbox" class="input_check" runat="server" />
<label for="chkAeldrebolig">
Senior- & ældreboliger</label>
</div>
</div>
<div class="clear">
</div>
<div class="line">
</div>
<div class="block4 go_left">
<h3>
Vælg økonomi</h3>
<div class="slider_info">
<div class="slider_info_leftright_container">
<div class="slider_info_left">
<span>Husleje</span>
</div>
<div class="slider_info_right" style="float: right">
<span id="huslejefra" runat="server"></span> <em>til</em> <span id="huslejetil" runat="server"></span><span>kr</span>
</div>
</div>
<div class="Slider">
<div id="husleje-slider-range">
</div>
</div>
</div>
<div class="slider_info">
<div class="slider_info_leftright_container">
<div class="slider_info_left">
<span>Indskud</span>
</div>
<div class="slider_info_right" style="float: right">
<span id="indskudfra" runat="server"></span> <em>til</em> <span id="indskudtil" runat="server"></span><span>m2</span>
</div>
<div class="Slider">
<div id="indskud-slider-range">
</div>
</div>
</div>
</div>
</div>
<div class="block4 go_right">
<h3>
Vælg størrelse</h3>
<div class="slider_info">
<div class="slider_info_leftright_container">
<div class="slider_info_left">
<span>Antal værelser</span>
</div>
<div class="slider_info_right" style="float: right">
<span id="rumfra" runat="server">3</span> <em>til</em> <span id="rumtil"
runat="server">6</span><span>rum</span>
</div>
</div>
<div class="Slider">
<div id="rum-slider-range">
</div>
</div>
</div>
<div class="slider_info">
<div class="slider_info_leftright_container">
<div class="slider_info_left">
<span>m2</span>
</div>
<div class="slider_info_right" style="float: right">
<span id="storrelsefra" value="2" runat="server"></span> <em>til</em> <span id="storrelsetil" runat="server"></span><span>m2</span>
</div>
</div>
<div class="Slider">
<div id="storrelse-slider-range">
</div>
</div>
</div>
</div>
<asp:Button ID="searchButton" OnClick="ImgSearch_Click" Text="Søg" runat="server" />
</form>
<div class="clear">
</div>
</div>
<div class="block5">
<h3>
Vælg resultatvisning</h3>
<div class="buttonswrapper">
<div class="wraper">
<input id="id9" type="radio" class="input_radio" />
<label for="id9">
Billedevisning</label>
</div>
<div class="wraper">
<input id="id10" type="radio" class="input_radio" />
<label for="id10">
Kortvisning</label>
</div>
</div>
<a class="link_img resetBtn" href="#">
<img src="style/images/select_img.png" alt="" />Nulstil søgningen</a>
</div>
<div class="clear"> </div>
<input id="HDSelectedAreas" type="hidden" runat="server" class="HSelectedArea" />
</div>
the search button looks like this in the aspx:
<asp:Button ID="searchButton" OnClick="ImgSearch_Click" Text="Søg" runat="server" />
And this is the code behind:
protected void ImgSearch_Click(object sender, EventArgs e)
{
String cRoomsFrom = rumfra.Attributes["value"];
String cRoomsTo = rumtil.Attributes["value"];
String cSizeFrom = storrelsefra.Attributes["value"];
String cSizeTo = storrelsetil.Attributes["value"];
String cRentFrom = huslejefra.Attributes["value"];
String cRentTo = huslejetil.Attributes["value"];
String cDepositFrom = indskudfra.Attributes["value"];
String cDepositTo = indskudtil.Attributes["value"];
}
to initialize the values:
<script type="text/javascript" language="javascript">
function setupSlider(min, max, step, values, sliderElement, minelement, maxelement) {
$(sliderElement).slider({
range: true,
min: min,
max: max,
values: values,
step: step,
slide: function (event, ui) {
$(minelement).html(ui.values[0]);
$(maxelement).html(ui.values[1]);
$(minelement).attr('value', ui.values[0]);
$(maxelement).attr('value', ui.values[1]);
__doPostBack();
}
});
$(minelement).html($(sliderElement).slider("values", 0));
$(maxelement).html($(sliderElement).slider("values", 1));
$(minelement).attr('value', $(sliderElement).slider("values", 0));
$(maxelement).attr('value', $(sliderElement).slider("values", 1));
}
function initializeSliders()
{
// størrelse slider
var values = [10, 80];
setupSlider(10, 80, 10, values, "#storrelse-slider-range", "#storrelsefra", "#storrelsetil");
// husleje slider
values = [1000, 7000];
setupSlider(1000, 12000, 1000, values, "#husleje-slider-range", "#huslejefra", "#huslejetil");
/// rum
values = [3, 6];
setupSlider(1, 8, 1, values, "#rum-slider-range", "#rumfra", "#rumtil");
// indskud
values = [3000, 7000];
setupSlider(1000, 10000, 1000, values, "#indskud-slider-range", "#indskudfra", "#indskudtil");
//fix color
fixToolTipColor();
}
$(document).ready(function () {
$('.Udvidet').live('click', function () {
$('.UdvidetSoegning').toggle('slow');
});
$(function () {
initializeSliders();
$(".resetBtn").live("click", function () {
initializeSliders();
__doPostBack();
});
});
});
</script>
I tried changing to InnerHtml and InnerText, but the result is the same. Sometimes the value property is null, but then InnerHtml or InnerText return the actual value :S

Answer 1

On post back only the input elements are posted.
So they are the same as before the post back, what they have before the post back, have and now. So actually you do not "get" this parameters on code behind, you only "set" them and on server controls with viewstate on, you can remember this parametres on post back - but you can not change them on client side and expect to read this change on server.
Here the workaround is. Ether use the viewstate of the page to save some values and keep them on post back, ether use input hidden elements to have them on post back.