C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[5]: ajaxによるjason形式のdata格納方法


(過去ログ 178 を表示中)

[トピック内 8 記事 (1 - 8 表示)]  << 0 >>

■102078 / inTopicNo.1)  ajaxによるjason形式のdata格納方法
  
□投稿者/ あああ (1回)-(2023/06/25(Sun) 22:37:36)

分類:[ASP.NET (C#)] 

【開発環境】
visualstudio2019 
.NET Framework4.7.2
ASP.NET MVC Webアプリケーション
C#

【課題】
チェックされているチェックボックスのvalueを取得して配列に格納しています。
その配列をajaxでコントローラに渡した後にModel内で処理をしたいと考えております。
しかしajaxのデータにチェックボックスの値を格納した配列をしていする方法がわかりません。
ご教示ください。


【ajax通信】
$('input[name="bunruicheck"]').change(function () {
        // ここに変更時の処理を記入
        var checkbunrui = []; // 配列を定義
        $('input[name="bunruicheck"]:checked').each(function () {
            checkbunrui.push($(this).val()); // 配列に値を追加
        });

        $.ajax({
            url: "Home/Action",
            type: "POST",
            datatype: "json",
            data: { values: ["a", "b"] }, 
            traditional: true,
        })
            .done(function (data) {
                alert("a");
            })
            .fail(function (data) {
                alert("b");
            })
            .always(function (data) {
                alert("c");
            });
        
    })

【コントローラ】
[HttpPost]
        public ActionResult Action(string[] values)
        {
            return Json(new { Hoge = "Huga" });
        }

【補足】
data: { values: ["a", "b"] }, 
この部分で今はテストで固定の文字列を指定していますがcheckbunruiの変数をdataに格納したいです。
現状のコードだと一応a,bという配列はコントローラへ渡せています。


引用返信 編集キー/
■102079 / inTopicNo.2)  Re[1]: ajaxによるjason形式のdata格納方法
□投稿者/ WebSurfer (2714回)-(2023/06/26(Mon) 08:57:43)
No102078 (あああ さん) に返信

> 【補足】
> data: { values: ["a", "b"] }, 
> この部分で今はテストで固定の文字列を指定していますがcheckbunruiの変数をdataに格納したいです。
> 現状のコードだと一応a,bという配列はコントローラへ渡せています。

そうであれば、

data: { values: checkbunrui },

でコントローラーに渡せませんか?

それではダメということなら、どうダメなのか教えて下さい。
引用返信 編集キー/
■102080 / inTopicNo.3)  Re[2]: ajaxによるjason形式のdata格納方法
□投稿者/ あああ (2回)-(2023/06/26(Mon) 19:18:12)
No102079 (WebSurfer さん) に返信

申し訳ありません。上記の通りでコントローラへデータを渡すことができました。自分の確認不足でした。
しかしコントローラへは渡せたのですがビューへ反映できない状況になってしまいました。

【コントローラ】
        [HttpPost]
        public ActionResult Index(model model, string[] values)
        {
            model.kansuu();
            return View(model);
            //return Json(new { Hoge = "Huga" });
        }

【View】
                <tbody>
                    @*DBの内容を1行ずつ表示*@
                    @for (var i = 0; i < @Model.List.Count; i++)
                    {
                        <tr>
                            <td>@Model.List[i]</td>
                        </tr>
                    }
                </tbody>


【課題】
valueにはちゃんと値が入ってきておりそれを使用してModel上で処理しております。
Model上の処理はできているのですがそれがview上に反映されません。
Json形式で値を返さないとだめなのでしょうか。
リダイレクトはさせたくない場合はビューを返すのはご法度でしょうか。


引用返信 編集キー/
■102081 / inTopicNo.4)  Re[3]: ajaxによるjason形式のdata格納方法
□投稿者/ WebSurfer (2715回)-(2023/06/26(Mon) 20:26:45)
No102080 (あああ さん) に返信

> 申し訳ありません。上記の通りでコントローラへデータを渡すことができました。自分の確認不足でした。
> しかしコントローラへは渡せたのですがビューへ反映できない状況になってしまいました。

何をしたいのか分かりません。

ajax で要求をかけ、返ってきた応答で何かを表示したいのなら、JavaScript で何とかすると
言うことになると思いますが、そのあたりのことは分かってますか?

引用返信 編集キー/
■102082 / inTopicNo.5)  Re[4]: ajaxによるjason形式のdata格納方法
□投稿者/ あああ (3回)-(2023/06/27(Tue) 08:02:47)
No102081 (WebSurfer さん) に返信

申し訳ありません。勉強不足でした。
モデルをjson形式にシリアライズ化してjavascriptでparseすることで実現できました。
ありがとうございました。
引用返信 編集キー/
■102083 / inTopicNo.6)  Re[5]: ajaxによるjason形式のdata格納方法
□投稿者/ WebSurfer (2716回)-(2023/06/27(Tue) 09:59:02)
No102082 (あああ さん) に返信

> モデルをjson形式にシリアライズ化してjavascriptでparseすることで実現できました。

できたとのことですので正しくやっているのだろうと思いますが念のため・・・

parse (デシリアライズ) する必要はないはずです。

最初の質問にあるコントローラーのコード、

return Json(new { Hoge = "Huga" });

で、{"Hoge":"Huga"} という JSON 文字列が返ってきますが、jQuery のコード、

.done(function (data) {

引数の data には JSON 文字列をデシリアライズした JavaScript オブジェクト(連想
配列)が渡されます。

なので、data.Hoge とすれば "Huga" という文字列を取得できます。

(昔、jQuery v1.4 以前は、ブラウザの JSON パーサを使うため dataFilter でパース
したということがありましたが)

あと、JSON 文字列を返してブラウザで JavaScript を使って html を組み立てるのでは
なく、部分ビューを使ってサーバー側で html を組み立ててそれを data として返し、
ブラウザではそれをそのまま表示するという方法もあります。

具体例は以下の時事を見てください。

jQuery ajax で部分ビューの呼出・表示 (CORE)
http://surferonwww.info/BlogEngine/post/2020/03/07/use-jquery-ajax-to-request-and-render-partial-view.aspx

引用返信 編集キー/
■102092 / inTopicNo.7)  Re[5]: ajaxによるjason形式のdata格納方法
□投稿者/ WebSurfer (2719回)-(2023/06/29(Thu) 14:41:54)
No102082 (あああ さん) に返信

> モデルをjson形式にシリアライズ化してjavascriptでparseすることで実現できました。
> ありがとうございました。

質問者さん、課題が解決できて、これ以上質問がなければ「解決済み」マークをつけて、
このスレッドはクローズ願います。
引用返信 編集キー/
■102103 / inTopicNo.8)  Re[6]: ajaxによるjason形式のdata格納方法
□投稿者/ あああ (5回)-(2023/07/02(Sun) 23:22:11)
No102083 (WebSurfer さん) に返信
> ■No102082 (あああ さん) に返信

申し訳ありませんでした解決したと思い返信を確認しておりませんでした、丁寧な補足有難うございました。
大変勉強になりました。
解決済み
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -