Вопрос

I want to use update panel with image. When image select and show for preview then only update that part only.

<div class="field-block button-height">
  <label for="file" class="label">
    <b>Image</b> (*.jpg)
  </label>
  <table>
    <tr>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
          <td>
            <span class="input file">
              <span class="file-text"></span>
              <span class="button compact">Select file</span>
              <asp:FileUpload ID="fuMovieLogo" runat="server" CssClass="file withClearFunctions />"
            </span>
            <br />
            <small class="input-info">Max file size: 2MB</small>
            <asp:Button ID="btnPreview" runat="server" Text="Preview" onclick="btnPreview_Click" />
            <asp:Button ID="btnCancelprev" runat="server" Text="Cancel" onclick="btnCancelprev_Click"/>
          </td>
          <td style="padding-left:10px">
            <asp:Image ID="imgTheatreLogo" runat="server" Width="130px" />
            <br />
            <asp:Label ID="lblupdatelogo" runat="server" CssClass="lbl" Visible="false" Text="FDMovieUntitled.jpg"></asp:Label>
          </td>
        </ContentTemplate>
        <Triggers>
          <asp:AsyncPostBackTrigger ControlID="btnPreview" EventName="Click" />
          <asp:AsyncPostBackTrigger ControlID="btnCancelprev" EventName="Click" />
        </Triggers>
      </asp:UpdatePanel>
    </tr>
  </table>
</div>

Please Help me.

Это было полезно?

Решение

So you just need to restructure your markup a little then. You need to place imgTheatreLogo inside the update panel. The triggers are actually handled by controls outside the update panel. See this documentation for reference on exactly how the UpdatePanel works.

<?xml version="1.0" encoding="utf-8"?>
<div class="field-block button-height">
  <label for="file" class="label">
    <b>Image</b> (*.jpg)
  </label>
  <table>
    <tr>
      <td>
        <span class="input file">
          <span class="file-text"></span>
          <span class="button compact">Select file</span>
          <asp:FileUpload ID="fuMovieLogo" runat="server" CssClass="file withClearFunctions />"
        </span>
        <br />
        <small class="input-info">Max file size: 2MB</small>
        <asp:Button ID="btnPreview" runat="server" Text="Preview" onclick="btnPreview_Click" />
        <asp:Button ID="btnCancelprev" runat="server" Text="Cancel" onclick="btnCancelprev_Click"/>
      </td>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
          <td style="padding-left:10px">
            <asp:Image ID="imgTheatreLogo" runat="server" Width="130px" />
            <br />
            <asp:Label ID="lblupdatelogo" runat="server" CssClass="lbl" Visible="false" Text="FDMovieUntitled.jpg"></asp:Label>
          </td>
        </ContentTemplate>
        <Triggers>
          <asp:AsyncPostBackTrigger ControlID="btnPreview" EventName="Click" />
          <asp:AsyncPostBackTrigger ControlID="btnCancelprev" EventName="Click" />
        </Triggers>
      </asp:UpdatePanel>
    </tr>
  </table>
</div>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top