由 javascript 更改时回发时丢失的值

Posted 2023-02-22

【中文标题】由 javascript 更改时回发时丢失的值

【英文标题】：Values lost on postback when changed by javascript

【发布时间】：2013-10-26 14:46:55

【问题描述】：

当用户鼠标悬停时，我正在通过 javascript 更改 ImageButtons 的 ImageUrl。在提交时，我想检查 ImageUrl 属性。但是，更改后的属性并没有反映在后面的代码中。事实上，我也在通过 javascript 更新 span 标签，它的更改值也不会反映在回发中。这些都是静态 html 元素。我没有动态创建任何这些，也没有在后面的代码中对它们进行任何操作。

HTML：

            <div style="margin: 20px 0 0 0; float: left;">
        <div class="divStars1" style="width: 130px; float: left;">
            <input type="image" name="ctl00$MainContent$ax1" id="MainContent_ax1" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$ax2" id="MainContent_ax2" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$ax3" id="MainContent_ax3" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$ax4" id="MainContent_ax4" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$ax5" id="MainContent_ax5" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />

        </div>
        <div style="margin-top: 3px; width: 600px; float: left;">
            <span>axs</span>
        </div>
    </div>
    <div style="margin: 20px 0 0 0; float: left;">
        <div class="divStars2" style="width: 130px; float: left;">
            <input type="image" name="ctl00$MainContent$bx1" id="MainContent_bx1" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$bx2" id="MainContent_bx2" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$bx3" id="MainContent_bx3" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$bx4" id="MainContent_bx4" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$bx5" id="MainContent_bx5" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
        </div>
        <div style="margin-top: 3px; width: 600px; float: left;">
            <span>bx blah blah</span>
        </div>
    </div>

Javascript：

        $(document).on("mouseover", "input.stars", function () 
        var score = 0;
        $("input.stars").each(function (index, element) 
            // element == this
            if ($(element).attr("src") == "style/FilledStar.png") 
                score = score + 1;
            ;
        );
        score = score / 5;
        var n = score.toFixed(2);
        $("#MainContent_lblScore").text(n);
    );

btnSubmit_Click 代码：

        For Each ctrl As Control In Me.divSkill1.Controls
        If (TypeOf ctrl Is ImageButton) Then
            Dim imgCtl As ImageButton = TryCast(ctrl, ImageButton)
            Dim x As String = imgCtl.ImageUrl 'HERE'S THE PROBLEM... x always equals original static value!
        End If

    Next

【问题讨论】：

它不应该改变代码隐藏，否则我可以用我的浏览器删除你的网站。

感谢您的指导。

【参考方案1】：

服务器对此类控件的客户端更改一无所知。可能您必须将已被 javascript 更改的值存储在隐藏字段或隐藏文本框中，然后在服务器端收集此值。

希望对你有帮助

编辑：

如果你只想获取 var n 的值，你可以这样做：

// aspx;

<asp:HiddenField ID="HidScore" runat="server" />

/// javascript

$(document).on("mouseover", "input.stars", function () 
    var hid=$("#<%= HidScore.ClientID %>");


        var score = 0;
        $("input.stars").each(function (index, element) 
            // element == this
            if ($(element).attr("src") == "style/FilledStar.png") 
                score = score + 1;
            ;
        );
        score = score / 5;
        var n = score.toFixed(2);
        $("#MainContent_lblScore").text(n);

    hid.val(n);
    );

然后在 vb.net 中获取值：HidScore.value

【讨论】：

这就是我的想法，但也需要确保我没有忽略某些东西。这有帮助。非常感谢。

【参考方案2】：

对服务器端控件的客户端更改通常不会被保留或发回服务器。

考虑创建一个隐藏字段<asp:HiddenField /> 控件并让您的JavaScript 也更新该值。 HiddenFields / <input type="hidden" /> 将通过 PostBack 返回到服务器。然后，您的代码将需要检查 HiddenField 是否有可能的更改或更新，并将这些更改路由回 ImageButton ImageUrl 属性。

【讨论】：

我很感激你的回应，andleer。我只是有点困惑，为什么我可以更新其值在服务器端可用的 HiddenField，但 ImageButton ImageUrl 属性却不是。我会试一试并发布结果。

一个 HiddenField 是一个 input 字段，它回发到服务器。 ImageButtons 利用 ViewState 和 ControlState 来维护它们的状态。此机制不会捕获通过客户端上的 JavaScript 进行的更新。

带有name 属性的HTML 控件会将它们的值回传到服务器。 select 控件/DropDownList 将回发其选择，但如果您在客户端的控件中添加元素，它们将丢失。

成功了。这让我的逻辑有点复杂，但还不错。非常感谢！！

感谢您的解释。我做 ASP 已经好几年了，所以你只是点击了灯泡。