更新パネルにファイルアップロードを使用して進行状況の更新を表示する

Jason_P

VS2013とC#(webforms)を使用してasp.netでWebサイトを開発しています。<asp:FileUpload>サーバーコントロールを含む、いくつかのユーザー入力を受け入れるページがあります。フォーム全体が更新パネル内にあり、ユーザーがフォームを送信したときにポップアップする進行状況の更新divを表示できます。

更新パネル内にファイルアップロードサーバーコントロールがあると問題が発生することを読みました。その<asp:PostBackTrigger>ため、アップロードコントロールの.HasFileプロパティが常にfalseになるとは限らないように、を使用してポストバックを強制しています。

DBの活動に遅延があるときに、サイトを通して、私が使用<asp:UpdatePanel>して<asp:UpdateProgress>、いくつかの活動があることをユーザーに表示するようにし、ユーザーのヒットが送信すると変更または再提出されてからフォームを保護するために。それはうまくいきます。

問題は、が表示されないこと<asp:PostBackTrigger>です<asp:UpdateProgress>これにより、フォームは送信後の不要なユーザー入力に対して脆弱になり、ユーザーエクスペリエンスも低下します。だから私はcatch22にいます-ファイルアップロードコントロールが機能しないため、PostBackTriggersを削除できません。また、PostBackTriggersが表示されないため、送信時にUpdateProgressを使用できません。

いくつかのコード:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>

    <%-- Some irrelevant code left out --%>
            <div class="row">
              <div class="input-group col-sm-6">
                <span class="input-group-addon" style="width: 175px; text-align: right;" id="basic-addon10">Signature</span>
                <asp:FileUpload ID="uplSignature" runat="server" CssClass="form-control" />
              </div>

              <%-- Some irrelevant code left out --%>

  </ContentTemplate>
  <Triggers>
    <asp:PostBackTrigger ControlID="btnSubmit" />
  </Triggers>
  <asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
    <ProgressTemplate>
      <div class="updateProgressMain" style="position: fixed;">
        <div class="updateProgressDiv" style="position: fixed;">
          <img src="Images/loader.gif" alt="" />
        </div>
      </div>
    </ProgressTemplate>
  </asp:UpdateProgress>

これを解決するための最良の方法は何でしょうか?

よろしくお願いします。

編集-問題を解決するために実際に機能したため、Ajax ControlToolkitのAjaxファイルアップロードコントロールの使用を回答として受け入れました。自分のサイトのルックアンドフィールに合わせてスタイルを設定するのが難しいと感じているので、私はそれに興奮していませんが、それは機能します。提案をありがとう。

ThatChris

Ajax ControlToolkitに同梱されているAjaxFileUploadコントロールを見てみましょう。

私は以前に同様の問題を抱えていましたが、ajaxのものが私のために働いたことを覚えています。

あなたはここでそれについてのいくつかの情報を見つけることができます:https//ajaxcontroltoolkit.devexpress.com/AjaxFileUpload/AjaxFileUpload.aspx

Ajax Control Toolkitを入手するには、NuGetで検索してください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

SSH.NETを使用してProgressBarにファイルアップロードの進行状況を表示する

分類Dev

JavascriptでFetchAPIを使用してファイルをアップロードし、進行状況を表示します

分類Dev

SSH.NETを使用してProgressBarにファイルダウンロードの進行状況を表示する

分類Dev

Essenceフレームワークでファイルのアップロードの進行状況を表示する

分類Dev

Androidでリアクティブ拡張機能を使用して進行状況の更新を含むファイルをダウンロードする方法

分類Dev

C#:HttpClient、MultipartFormDataContentとして複数のファイルをアップロードするときのファイルアップロードの進行状況

分類Dev

ファイルをアップロードするときに「進行状況」と更新イベントをajaxリクエストにバインドする方法

分類Dev

スタイルを使用して進行状況を更新する進行状況バー

分類Dev

マルチパートなしでファイルアップロードの進行状況を取得するにはどうすればよいですか?

分類Dev

マルチパートなしでファイルアップロードの進行状況を取得するにはどうすればよいですか?

分類Dev

JavaScriptをアップロードせずにファイルのアップロードの進行状況を表示する

分類Dev

AFNetworkingを使用して、Strava V3APIへのアップロードの進行状況と非同期にファイルをPOSTします

分類Dev

Android:HttpURLConnectionの進行状況コールバックを使用してCloudinaryに写真をアップロードする

分類Dev

DataOutputStreamを使用してファイルをアップロードしても、実際の進行状況は表示されません

分類Dev

プログレスバーにファイルのアップロードの進行状況を表示する方法-AmazonS3バケット

分類Dev

ファイルがAngular7でFormDataとして送信されるかどうかを確認するファイルアップロードの進行状況

分類Dev

GWT:進行状況バーを表示するためのファイルアップロード速度を取得します

分類Dev

Javaを使用したファイルのアップロード(進行状況バーあり)

分類Dev

ファイルのアップロードの進行状況の最後にfancyboxを閉じます

分類Dev

進行状況追跡C#を使用したファイルのアップロード

分類Dev

Apache HttpClient 4でファイルアップロードの進行状況バーを取得する方法

分類Dev

Angularファクトリ:アップロード中の進行状況に応じてスコープを更新します

分類Dev

ブートストラッププログレスバーを使用して、アップロードの進行状況をモーダルで表示する

分類Dev

マルチパートファイルの進行状況は、実際のアップロードよりも速く更新されます

分類Dev

2つのprogressBarコントロールを使用して、各ファイルのダウンロードの進行状況と、すべてのファイルのダウンロードの全体的な進行状況を表示するにはどうすればよいですか?

分類Dev

リストからファイルをダウンロードして進行状況バーを表示する方法

分類Dev

TCP接続を介したmp3ファイルの転送。JProgressBarを使用してダウンロードの進行状況を表示する

分類Dev

複数のファイルを一度にアップロードするときに、すべてのファイルのアップロードの進行状況が表示されるようにコードを変更するにはどうすればよいですか?

分類Dev

Androidでファイルをダウンロードし、進行状況をProgressDialogに表示する

Related 関連記事

  1. 1

    SSH.NETを使用してProgressBarにファイルアップロードの進行状況を表示する

  2. 2

    JavascriptでFetchAPIを使用してファイルをアップロードし、進行状況を表示します

  3. 3

    SSH.NETを使用してProgressBarにファイルダウンロードの進行状況を表示する

  4. 4

    Essenceフレームワークでファイルのアップロードの進行状況を表示する

  5. 5

    Androidでリアクティブ拡張機能を使用して進行状況の更新を含むファイルをダウンロードする方法

  6. 6

    C#:HttpClient、MultipartFormDataContentとして複数のファイルをアップロードするときのファイルアップロードの進行状況

  7. 7

    ファイルをアップロードするときに「進行状況」と更新イベントをajaxリクエストにバインドする方法

  8. 8

    スタイルを使用して進行状況を更新する進行状況バー

  9. 9

    マルチパートなしでファイルアップロードの進行状況を取得するにはどうすればよいですか?

  10. 10

    マルチパートなしでファイルアップロードの進行状況を取得するにはどうすればよいですか?

  11. 11

    JavaScriptをアップロードせずにファイルのアップロードの進行状況を表示する

  12. 12

    AFNetworkingを使用して、Strava V3APIへのアップロードの進行状況と非同期にファイルをPOSTします

  13. 13

    Android:HttpURLConnectionの進行状況コールバックを使用してCloudinaryに写真をアップロードする

  14. 14

    DataOutputStreamを使用してファイルをアップロードしても、実際の進行状況は表示されません

  15. 15

    プログレスバーにファイルのアップロードの進行状況を表示する方法-AmazonS3バケット

  16. 16

    ファイルがAngular7でFormDataとして送信されるかどうかを確認するファイルアップロードの進行状況

  17. 17

    GWT:進行状況バーを表示するためのファイルアップロード速度を取得します

  18. 18

    Javaを使用したファイルのアップロード(進行状況バーあり)

  19. 19

    ファイルのアップロードの進行状況の最後にfancyboxを閉じます

  20. 20

    進行状況追跡C#を使用したファイルのアップロード

  21. 21

    Apache HttpClient 4でファイルアップロードの進行状況バーを取得する方法

  22. 22

    Angularファクトリ:アップロード中の進行状況に応じてスコープを更新します

  23. 23

    ブートストラッププログレスバーを使用して、アップロードの進行状況をモーダルで表示する

  24. 24

    マルチパートファイルの進行状況は、実際のアップロードよりも速く更新されます

  25. 25

    2つのprogressBarコントロールを使用して、各ファイルのダウンロードの進行状況と、すべてのファイルのダウンロードの全体的な進行状況を表示するにはどうすればよいですか?

  26. 26

    リストからファイルをダウンロードして進行状況バーを表示する方法

  27. 27

    TCP接続を介したmp3ファイルの転送。JProgressBarを使用してダウンロードの進行状況を表示する

  28. 28

    複数のファイルを一度にアップロードするときに、すべてのファイルのアップロードの進行状況が表示されるようにコードを変更するにはどうすればよいですか?

  29. 29

    Androidでファイルをダウンロードし、進行状況をProgressDialogに表示する

ホットタグ

アーカイブ