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

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

ただいまの
回答率

90.75%

  • JavaScript

    15256questions

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

  • C#

    6552questions

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

  • jQuery

    6310questions

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

  • ASP.NET

    480questions

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

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

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 158

お世話になります。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 });
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • SurferOnWww

    2018/05/26 22:57

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

    キャンセル

  • SurferOnWww

    2018/05/26 23:01

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

    キャンセル

  • SurferOnWww

    2018/05/26 23:05

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

    キャンセル

  • coaprogramstu

    2018/05/27 09:32

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

    キャンセル

回答 2

+1

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

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 のクリックイベントで呼び出すなどして期待通り動くことを確認することをお勧めします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/27 07:35

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

    キャンセル

  • 2018/05/27 07:43

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

    キャンセル

  • 2018/05/27 07:46

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

    キャンセル

  • 2018/05/27 07:50

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

    キャンセル

  • 2018/05/27 08:25

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

    キャンセル

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15256questions

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

  • C#

    6552questions

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

  • jQuery

    6310questions

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

  • ASP.NET

    480questions

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

  • トップ
  • C#に関する質問
  • 画面内のある要素が表示領域に入ったら、検索を行い、その結果をその表示領域内に表示させる方法を教えてください。