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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

ASP.NET

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

Q&A

2回答

1553閲覧

画面内のある要素が表示領域に入ったら、検索を行い、その結果をその表示領域内に表示させる方法を教えてください。

coaprogramstu

総合スコア4

C#

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

ASP.NET

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

0グッド

0クリップ

投稿2018/05/26 13:37

編集2022/01/12 10:55

お世話になります。ASP.net、C#、JavaScriptを勉強しています。

前提・実現したいこと

あるindex.chtmlのdivタグ内(class="search")の要素が表示領域に入ったら、サーバーサイド(C#)であるデータベースのデータを検索して、その要素内に検索結果として部分ビュー(result.chtml)を表示させたままにしたいです。
途中までコーディングしましたが、躓いています。
ajaxを使用して、検索処理とModelを作成できますが、その後のJsonでどのようなデータを返すべきなのか(Modelを返す?)、そして、ajax処理が成功した後の処理でJsonデータと部分ビュー(result.chtml)を使って、検索結果を表示させるための処理(コード)がわからない状況です。
どなたか、教えてください。

また、部分ビュー更新、動的ロード、部分ロードなどを行う際に役立つJavaScriptのライブラリなどがありましたら、教えてください。

開発環境は以下の通りです。
OS…デバック環境でいろいろ操作しているので、特に指定はないです。
IISは特に設定していないです。
Visual Studio のバージョン…2017の11.00です。
ASP.NET MVC(バージョン5.2.3.0、coreではないです)
DBはmysqlのバージョン5.7.21です。
JavaScriptはjQueryとjQuery.inviewというプラグインを使用しています。
https://github.com/jquery/jquery
https://github.com/protonet/jquery.inview

jQuery pluginを使用
https://github.com/protonet/jquery.inview

該当のソースコード

index.chtml

<div> … <div class="search"> </div> </div>

result.chtml

@ model … <div> foreach (var result in model.resultList) { <ul> <li>result.id</li> <li>result.name</li> <li>result.content</li> </ul> } </div>

JavaScript

$('.search').on('inview', function (event, isInView, visiblePartX, visiblePartY) { $.ajax({ url: '/test/', type: 'post', dataType: 'json', processData: false, contentType: false, }).done(function (data, textStatus, jqXHR) { ??? }).fail(function (jqXHR, textStatus, errorThrown) { alert("error") }); });

C#

public ActionResult test() { //検索処理 … //検索結果を元にModel作成 … return Json(new { model = Model }); }

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/05/26 13:57

何を作っているか(MVC らしいとは想像してますが)と、開発環境(OS, IIS, .NET, MVC, Visual Studio のバージョン、Core か否か、DB は何でそのバージョン・・・など)を書いてください。アプリ開発の質問する時は必ずお願いします。
退会済みユーザー

退会済みユーザー

2018/05/26 14:01

> viewModelは作成できますが ←WPF の MVVM (Model-View-ViewModel) の ViewModel ではなくて、ASP.NET MVC (Model-View-Controller) の View と Model という理解でいいのですか?
退会済みユーザー

退会済みユーザー

2018/05/26 14:05

'inview' とかありますが、jQuery plugin を使ってます? であればそういう情報もきちんと書きましょうよ。あまりに情報提供が不十分ですよ。
coaprogramstu

2018/05/27 00:32

失礼しました。内容を修正します。
guest

回答2

0

質問者さんの返事(質問に追記した部分)を読むと話が伝わってないような感じで、説明して理解してもらえるかどうか不安がありますが、とにかく一度回答します。

JavaScriptはjQueryとjQuery.inviewというプラグインを使用しています。

jQuery はごくごく一般的なものですが、jQuery.inview は誰もが持っているものではないことを認識してください。

少なくとも自分は触ったこともないし、それを入手して使い方を調べてというのは負担が重いので、jQuery.inview と絡めて全体の動作がどうのこうのという話は今回はできません。

なので、とりあえずは jQuery.inview でトリガとなるイベントが発火した後の処理、つまり、

あるindex.chtmlのdivタグ内(class="search")の要素が表示領域に入ったら、

$('.search').on('inview', function ... の function が起動されると理解して、それ以降の、

サーバーサイド(C#)であるデータベースのデータを検索して、その要素内に検索結果として部分ビュー(result.chtml)を表示させたままにしたいです。

の処理について案を書きます。

まず、部分ビューの使用は忘れてください。以下の (1), (2) を実装すればやりたいことは可能なはずです。

(1) データベースのデータを検索してそれを JSON 文字列として返すアクションメソッド(質問では C# とした部分)

(2) jQuery ajax でそのアクションメソッドを呼び出して応答を div 要素に書き込むクライアントスクリプト(質問では JavaScript とした部分)

それぞれ以下のようにします。注:これ以外に方法はないという訳ではなく一案です。ただし、最も簡単かつスマートな方法だと思っています。

(1) 質問では C# とした部分

既存の DB から EDM を作って Linq to Entities を使ってデータを抽出します。以下の例では Microsoft が提供するサンプルデータベース Northwind の Categories テーブルから Id, Name, Content というプロパティを持つ匿名型オブジェクトのリスト list を取得しています。MySQL でも同様なことはできるはずです。

public ActionResult JsonCategories() { if (Request.IsAjaxRequest()) { var db = new NORTHWINDEntities(); var list = from c in db.Categories select new { Id = c.CategoryID, Name = c.CategoryName, Content = c.Description }; return Json(list); } return Content("AJAX を使った非同期呼び出ししかできません。"); }

クライアントから上記アクションメソッドを POST 要求すると以下のような JSON 文字列が返されます。

[ {"Id":1,"Name":"Beverages","Content":"Soft drinks, coffees, teas, beers, and ales"}, {"Id":2,"Name":"Condiments","Content":"Sweet and savory sauces, relishes, spreads, and seasonings"}, {"Id":3,"Name":"Confections","Content":"Desserts, candies, and sweet breads"}, {"Id":4,"Name":"Dairy Products","Content":"Cheeses"}, {"Id":5,"Name":"Grains/Cereals","Content":"Breads, crackers, pasta, and cereal"}, {"Id":6,"Name":"Meat/Poultry","Content":"Prepared meats"}, {"Id":7,"Name":"Produce","Content":"Dried fruit and bean curd"}, {"Id":8,"Name":"Seafood","Content":"Seaweed and fish"} ]

(2) 質問では JavaScript とした部分

function の部分は以下のようにします。以下のコードの data には上の JSON 文字列がパースされた JavaScript オブジェクトが代入されます。

function () { $.ajax({ type: 'POST', url: '/Customer/JsonCategories' }) .done(function (data) { $(".search").empty(); $.each(data, function (index, item) { $('.search').append( '<ul><li>' + item.Id + '</li><li>' + item.Name + '</li><li>' + item.Content + '</li></ul>' ); }); }) .fail(function (jqXHR, textStatus, errorThrown) { $("#jsonresult").text('textStatus: ' + textStatus + ', errorThrown: ' + errorThrown); }) }

いきなり $('.search').on('inview', function ... の function に設定する前に、適当な名前を付けてそれを button のクリックイベントで呼び出すなどして期待通り動くことを確認することをお勧めします。

投稿2018/05/27 06:24

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

「Jsonでどのようなデータを返すべきなのか」は作る人が決めることです。
そのあとの検索結果表示処理が「自身が」やりやすい形でデータを返してください。

投稿2018/05/26 21:52

編集2018/05/26 21:53
m.ts10806

総合スコア80765

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

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

退会済みユーザー

退会済みユーザー

2018/05/26 22:35

そのあたりは result.chtml から推測できるのではないでしょうか?
m.ts10806

2018/05/26 22:43

ほぼ説明がないまま置かれてるコードなのであまり意味は追いません。 質問は「どのようなデータを返してどう処理するか」なので「処理しやすい形で返しましょう」と答えています。 サポートセンターではないのでコードからそこまで汲んで考える必要はないかなと。 追記修正依頼のコメントにより質問内容が充実してくるようでしたらまた別ですが、現時点ではここまでかなと。
退会済みユーザー

退会済みユーザー

2018/05/26 22:46

回答と言うことではないのですね?
m.ts10806

2018/05/26 22:50

現在の質問内容に対する回答です。 要件がハッキリせず全く回答に至れないものであれば追記修正依頼だしますよ。 「こんなことって可能ですか?」「可能です」と似たような扱いです。
m.ts10806

2018/05/26 23:25

> 追記修正依頼のコメントにより質問内容が充実してくるようでしたら SurferOnWwwさんの追記修正依頼のコメントにより という意味です。色々と確認を投げられているので、その内容により質問内容が充実してくるようであれば(「Jsonでどのようなデータを返すべきなのか」ではなくなったら)回答も修正することにはなるかなと。 jQueryの使い方を聞いているのかC#の使い方を聞いているのかでいうと、今はどっちでもないので。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問