お世話になります。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 }); }