asp.net Link button image not visible after postback

问题

I have a link button with image and label inside it. After postback, the image and label is not visible.

< asp:LinkButton ID="AddNewRunLinkButton" runat="server" CssClass="Navigationlocalnav"
OnClick="AddNewRunLinkButton_Click" >
&nbsp;
  < img id="Img1" src="../../Images/add_newIcon.gif" runat="server" alt="Add New Run" />
  < asp:Label ID="addText" Text=" Add New Run" runat="server"></asp:Label>
< /asp:LinkButton>

This link button is used to import/export data. I have added an attribute on click of this link button(AddNewRunLinkButton) to display a progress bar using javascript - SetInterval function. If I remove this attribute, the image and label is getting displayed, otherwise only link button is getting displayed.

AddNewRunLinkButton.attributes.add("onclick","javascript:DisplayProgress()");

function DisplayProgress()
{
  timeid = setInterval("addBlock",100)
}

function Addblock()
{
 // Display a progress bar as follows - Increase the width of a div tag at this interval
}

Any help?

回答1:

Since your code examples doesn't give much to go on I'm posting something I think might be what you're trying to do.

Markup and Javascript:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title>Untitled Page</title>
  <script language="javascript" type="text/javascript">
    var timeID = null;
    var width = 0;

    function DisplayProgress() {
      timeID = setInterval('AddBlock();', 100);
    }

    function AddBlock() {
      var p = document.getElementById("progressDiv");
      if (width < 1000) {
        width += 100;
        p.style.width = width + "px";
      }
      else
        timeID = clearInterval(timeID);
      }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <asp:LinkButton runat="server" ID="lbAddNewRun" OnClick="lbAddNewRun_Click">
        <img src="--url to an image--" alt="Add New Run" />
        Add New Run
      </asp:LinkButton>
    </div>
    <div id="progressDiv" style="background-color: Green; width: 0px; height: 20px;"></div>
  </form>
</body>
</html>

Code-Behind:

protected void Page_Load(object sender, EventArgs e)
{
  lbAddNewRun.Attributes.Add("OnClick", "javascript:DisplayProgress();");
}

protected void lbAddNewRun_Click(object sender, EventArgs e)
{
  // Export/Import code.
}

This does not "hide" the image, for me atleast.

Remark:
Instead of adding the OnClick event in the code-behind you can add it directly in the markup since it is not dynamically created:

      <asp:LinkButton runat="server" ID="lbAddNewRun" OnClick="lbAddNewRun_Click" OnClientClick="DisplayProgress();">
        <img src="--url to an image--" alt="Add New Run" />
        Add New Run
      </asp:LinkButton>

回答2:

I would use Async call to show the progress bar as opposed to what you are doing here. Sometime when you attach both client side and server side events, the page rendering doesnt work as expected. In this case you are using a Javascript timer with SetInterval and I believe that is causing the lable to disappear.

来源：https://stackoverflow.com/questions/2131510/asp-net-link-button-image-not-visible-after-postback

标签

ASP.NET

postback