asp.net - ポストバック時に InnerHtml、InnerText、およびプロパティ値が空になるのはなぜですか?

Question

ページに値属性を持つスパンがいくつかあります。

コード ビハインドからこれらの属性を取得しようとすると、最初の 2 つしか取得できません。値属性が存在し、空でない場合でも、残りは null です。

どうして？これは私のマークアップです:

<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- &amp; studieboliger</label>
            </div>
            <div class="wraper go_left">
                <input id="chkAeldrebolig" type="checkbox" class="input_check" runat="server" />
                <label for="chkAeldrebolig">
                    Senior- &amp; ældreboliger</label>
            </div>
        </div>
        <div class="clear">
            &nbsp;</div>
        <div class="line">
            &nbsp;</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">
        &nbsp;</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">&nbsp;</div>

<input id="HDSelectedAreas" type="hidden" runat="server" class="HSelectedArea" />
</div>

検索ボタンは、aspx では次のようになります。

<asp:Button ID="searchButton" OnClick="ImgSearch_Click" Text="Søg" runat="server" />

そして、これは背後にあるコードです：

 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"];
}

値を初期化するには:

<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>

InnerHtmlとに変更してみましInnerTextたが、結果は同じです。value プロパティが null の場合もありますが、InnerHtml または InnerText は実際の値を返します:S

Answer 1

inputポストバックでは、要素のみがポストされます。

つまり、彼らはポストバックの前と同じであり、ポストバックの前に持っていたものと現在のものです。したがって、実際には、コードビハインドでこのパラメーターを「取得」するのではなく、それらを「設定」するだけで、ビューステートがオンになっているサーバーコントロールでは、ポストバックでこのパラメーターを思い出すことができますが、クライアント側でそれらを変更して読み取ることはできませんサーバー上のこの変更。

ここに回避策があります。イーサは、ページのビューステートを使用していくつかの値を保存し、それらをポストバックに保持します。イーサは、入力非表示要素を使用してそれらをポストバックします。