asp.net - Hidden Field altered through javascript not persisting on postback - Stack Overflow

admin管理员组

文章数量:1316974

I have a web user control with a hidden field on it. When a javascript event (click) ocurrs, I am trying to set a value in the hidden field, so that the value can be retained on postback and remembered for the next rendering. The control is a collapsible panel extender that does not cause postback, uses jquery, and if postback occurs elsewhere on the page, it remembers if it is expanded or collapsed.

The problem is that the javascript executes, but does not actually change the value in the hidden field. If I use the dom explorer, the hidden fiend is still set to the default, and then when I debug, in the the next postback the hidden field is still set to the default as well.

I have also tried using the tried and true getElementById with no success.

No javascript errors occur.

ASCX code:

<input id="hiddenCurrentState" type="hidden" runat="server" />

Codebehind:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;

public partial class Controls_SubControls_CollapsiblePanelExtender : System.Web.UI.UserControl
{
    public string HeaderControlId { get; set; }

    public string BodyControlId { get; set; }

    public string CollapseAllControlId { get; set; }

    public string ShowAllControlId { get; set; }

    public CollapsedState DefaultState { get; set; }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            hiddenCurrentState.Value = DefaultState.ToString();
        }
    }

    protected override void OnPreRender(EventArgs e)
    {
        BuildJQueryScript();
        base.OnPreRender(e);
    }

    private void BuildJQueryScript()
    {
        StringBuilder script = new StringBuilder();

        script.Append("$(document).ready(function(){\n");

        //toggle based on current state
        script.Append("if ($(\"#" + hiddenCurrentState.ClientID + "\").attr(\"value\")==\"Expanded\")\n");
        script.Append("{\n");
        script.Append("$(\"#" + BodyControlId + "\").show();\n");
        script.Append("$(\"#" + hiddenCurrentState.ClientID + "\").val(\"Expanded\");\n");
        script.Append("}\n");
        script.Append("else\n");
        script.Append("{\n");
        script.Append("$(\"#" + BodyControlId + "\").hide();\n");
        script.Append("$(\"#" + hiddenCurrentState.ClientID + "\").val(\"Collapsed\");\n");
        script.Append("}\n");


        //toggle on click
        script.Append("$(\"#" + HeaderControlId + "\").click(function(){\n");
        script.Append("  $(this).next(\"#" + BodyControlId + "\").slideToggle(500)\n");
        script.Append("  return false;\n");
        script.Append("});\n");

        //collapse all
        if (!String.IsNullOrEmpty(CollapseAllControlId))
        {
            script.Append("$(\"#" + CollapseAllControlId + "\").click(function(){\n");
            script.Append("  $(\"#" + BodyControlId + "\").slideUp(500)\n");
            script.Append("  return false;\n");
            script.Append("});\n");
        }

        //show all
        if (!String.IsNullOrEmpty(ShowAllControlId))
        {
            script.Append("$(\"#" + ShowAllControlId + "\").click(function(){\n");
            script.Append("  $(this).hide()\n");
            script.Append("  $(\"#" + BodyControlId + "\").slideDown()\n");
            //script.Append("  $(\".message_list li:gt(4)\").slideDown()\n");
            script.Append("  return false;\n");
            script.Append("});\n");
        }

        script.Append("});\n");

        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CollapsiblePanelScript", script.ToString(), true);
    }
}

public enum CollapsedState
{
    Expanded = 0,
    Collapsed = 1
}

I have a web user control with a hidden field on it. When a javascript event (click) ocurrs, I am trying to set a value in the hidden field, so that the value can be retained on postback and remembered for the next rendering. The control is a collapsible panel extender that does not cause postback, uses jquery, and if postback occurs elsewhere on the page, it remembers if it is expanded or collapsed.

The problem is that the javascript executes, but does not actually change the value in the hidden field. If I use the dom explorer, the hidden fiend is still set to the default, and then when I debug, in the the next postback the hidden field is still set to the default as well.

I have also tried using the tried and true getElementById with no success.

No javascript errors occur.

ASCX code:

<input id="hiddenCurrentState" type="hidden" runat="server" />

Codebehind:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;

public partial class Controls_SubControls_CollapsiblePanelExtender : System.Web.UI.UserControl
{
    public string HeaderControlId { get; set; }

    public string BodyControlId { get; set; }

    public string CollapseAllControlId { get; set; }

    public string ShowAllControlId { get; set; }

    public CollapsedState DefaultState { get; set; }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            hiddenCurrentState.Value = DefaultState.ToString();
        }
    }

    protected override void OnPreRender(EventArgs e)
    {
        BuildJQueryScript();
        base.OnPreRender(e);
    }

    private void BuildJQueryScript()
    {
        StringBuilder script = new StringBuilder();

        script.Append("$(document).ready(function(){\n");

        //toggle based on current state
        script.Append("if ($(\"#" + hiddenCurrentState.ClientID + "\").attr(\"value\")==\"Expanded\")\n");
        script.Append("{\n");
        script.Append("$(\"#" + BodyControlId + "\").show();\n");
        script.Append("$(\"#" + hiddenCurrentState.ClientID + "\").val(\"Expanded\");\n");
        script.Append("}\n");
        script.Append("else\n");
        script.Append("{\n");
        script.Append("$(\"#" + BodyControlId + "\").hide();\n");
        script.Append("$(\"#" + hiddenCurrentState.ClientID + "\").val(\"Collapsed\");\n");
        script.Append("}\n");


        //toggle on click
        script.Append("$(\"#" + HeaderControlId + "\").click(function(){\n");
        script.Append("  $(this).next(\"#" + BodyControlId + "\").slideToggle(500)\n");
        script.Append("  return false;\n");
        script.Append("});\n");

        //collapse all
        if (!String.IsNullOrEmpty(CollapseAllControlId))
        {
            script.Append("$(\"#" + CollapseAllControlId + "\").click(function(){\n");
            script.Append("  $(\"#" + BodyControlId + "\").slideUp(500)\n");
            script.Append("  return false;\n");
            script.Append("});\n");
        }

        //show all
        if (!String.IsNullOrEmpty(ShowAllControlId))
        {
            script.Append("$(\"#" + ShowAllControlId + "\").click(function(){\n");
            script.Append("  $(this).hide()\n");
            script.Append("  $(\"#" + BodyControlId + "\").slideDown()\n");
            //script.Append("  $(\".message_list li:gt(4)\").slideDown()\n");
            script.Append("  return false;\n");
            script.Append("});\n");
        }

        script.Append("});\n");

        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CollapsiblePanelScript", script.ToString(), true);
    }
}

public enum CollapsedState
{
    Expanded = 0,
    Collapsed = 1
}

• asp
• javascript
• jquery
• postback

Share Improve this question Follow edited Jan 24, 2020 at 4:32 ankitkanojia 3,12244 gold badges2424 silver badges3737 bronze badges asked Mar 27, 2009 at 13:27 Broken BokkenBroken Bokken 1

• 1 +1 for the Freudian "hidden fiend" :) – demoncodemonkey Commented Jun 30, 2011 at 11:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

I don't see where you are setting the value of the hidden field on the client side. I would expect to see a line something like the following in your collapse/show functions to actually change the value on the client when the panel is collapsed/expanded.

Collapse:

 script.Append( "   $(\"#" + hiddenCurrentState.ClientID + "\").val(1);\n" );

Show:

 script.Append( "   $(\"#" + hiddenCurrentState.ClientID + "\").val(0);\n" );

On every post back the entire page is rendered again, any values changed on the client side will not be persisted.

I remend you store the state in a cookie. As you are using jQuery, the COOKIE library makes this a cinch.

Have you tried using <asp:HiddenField> instead of <input>?

本文标签： aspnetHidden Field altered through javascript not persisting on postbackStack Overflow