質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

解決済

2回答

12765閲覧

ASP.net OnClick,OnClientClick,$.ajaxの共存処理

Qoo

総合スコア1249

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

0グッド

0クリップ

投稿2017/02/09 01:55

お世話になります。
ASP.netでクライアントスクリプト実行後、サーバスクリプトを実行したく以下のように記述しました。
保存ボタンを押すと、javascriptのpost関数自体には入り、終了後、サーバスクリプトのpost_Clickも実行されるのですが
javascriptのpost関数内で記述している$.ajaxによるファイルアップロードが実行されません。
両方実行するにはどうすれば良いでしょうか。

asp.net

1<asp:Button ID="post" Text="保存" runat="server" OnClick="post_Click" OnClientClick='return post();' />

Javascript

1function post() 2{ 3 var element = $('#screen3')[0]; 4 html2canvas(element, 5 { 6 onrendered : function (canvas) 7 { 8 var type = 'image/png'; 9 var dataurl = canvas.toDataURL(type); 10 var bin = atob(dataurl.split(',')[1]); 11 var buffer = new Uint8Array(bin.length); 12 for (var i = 0; i < bin.length; i++) { 13 buffer[i] = bin.charCodeAt(i); 14 } 15 var blob = new Blob([buffer.buffer], { 16 type : type 17 }); 18 var data = new FormData(); 19 data.append('image', blob); 20 data.append('filename', $('#fname').val()); 21 var options = {}; 22 options.url = "FileUploadHandler.ashx"; 23 options.type = "POST"; 24 options.data = data; 25 options.contentType = false; 26 options.processData = false; 27 options.success = function (result) 28 { 29 console.log('成功'); 30 }; 31 options.error = function (err) 32 { 33 console.log('失敗'); 34 }; 35 $.ajax(options); 36 } 37 }); 38}

c#

1protected void post_Click(object sender, EventArgs e) 2{ 3 4 ~処理~ 5 6 7}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

そのコードですと、まず OnClientClick に設定した JavaScript のメソッド post() が実行されて、その後すぐ同期ポストバックがかかり(asp:Button は input type="submit" になるので)サーバー側で C# のメソッド post_Click が実行されるはずです。

JavaScript のメソッド post() が実行されると、url オプションに設定された HTTP ハンドラ FileUploadHandler.ashx が POST 要求されると同時に data が送信されるはずです。(JavaScript のコードがきちんと作られていればの話ですが)

FileUploadHandler.ashx は送信されてきた data を受けて処理するはずです。(これも FileUploadHandler.ashx がきちんと作られていればの話ですが)

ただし、 FileUploadHandler.ashx から応答が返ってきても、同期ポストバックがかかってしまうので応答を処理できません。(ブラウザに表示されるのは同期ポストバックの応答で再描画されたものですので、success オプションに設定したコールバックは実行されません)

というわけで、

javascriptのpost関数内で記述している$.ajaxによるファイルアップロードが実行されません。

というのは JavaScript の post() メソッドもしくは HTTP ハンドラ FileUploadHandler.ashx の作り方問題があるからだと思われます。

Fiddler などのキャプチャツールを使って、要求は期待通り出ているか、POST したフォームデータの内容は期待通りかをチェックしてください。

それが期待通りであれば、デバッガを使って FileUploadHandler.ashx の処理が期待通り行われているかチェックしてください。

投稿2017/02/09 06:48

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Qoo

2017/02/11 00:22

ありがとうございます!
guest

0

ベストアンサー

ボタンはasp:Buttonではなく普通のHTMLボタンに変更し、ajaxでashxにPOSTしているわけですから、サーバー側ではProcessRequest()が呼ばれますので、この中でアップロードファイルの取得処理につづけてpost_click()を呼ぶコードを書けばいいのではないでしょうか。

投稿2017/02/09 02:48

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Qoo

2017/02/11 00:23

ありがとうございます! post_clickメソッドを[System.Web.Services.WebMethod]属性をつけたメソッドに変更することで アップロードファイルの取得処理につづけて処理を行うことができました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問