JqG​​ridと検索フォーム - ASP.NET MVC

0


0

http://blogs.teamb.com/craigstuntz/2009/04/27/38243/[link text]この記事に出会い、読んでみると、記事には自分のサイトで提供したいもののスクリーンショットがありました。 。 これは私が欲しいものです、 http://blogs.teamb.com/files/2009/04/jqgridsearchform_1250.png[alt text http://blogs.teamb.com/files/2009/04/jqgridsearchform_1250.png]

jqGridは最良の方法ですか？ 私が欲しいのは、その検索パラメータインターフェースだけです。 検索結果をタブ付きウィンドウに表示したいのですが、これから作業します。

asp.net-mvc user-interface jqgrid

Source

2 Answer

1


JqG​​ridは画像に表示される検索コントロールを自動的に構築します。 そのため、画像に表示されているものが必要なものであれば、JqGridを使用することをお勧めします。それが、質問に含めたスクリーンショットを作成するために使用したものです。

当然、このコントロールはJqGridに基づいているため、それを使用する必要があります。 検索コントロールは「スタンドアロン」ではありません（少なくとも、意図的なものではありません）。 しかし、グリッドはかなり設定変更可能なので、あなたは望む外観を得ることができるかもしれません。

グリッドを使用できない場合は、おそらくフィルタ/検索コントロールを使用できません。 しかし、それは単なるHTMLなので、コピーは簡単です。

Source

1


私はあなたがあなた自身のフォームとコントロールで検索してそれからjqGridで結果を表示したいと思います。 オンラインで見つかったソリューションのほとんどはjqGridの独自の検索コントロールを使用していますが、これはあなたの問題には適していないかもしれません。

これを完成させる方法の簡単な例を示します。

1）必要に応じて検索フォームを作成してください。

@using（Html.BeginForm（ "インデックス"、 "キャンペーン"、FormMethod.Post、new {id = "searchCampaigns"}）））{タイトル

@ Html.TextBoxFor（A ⇒ A.Titulo、新しい\ {Id = "search_title"、}）

によって作成された

@ Html.DropDownListFor（A ⇒ A.CreatedByUserId、Model.UserList、新しい\ {Id = "search_createdBy"}）

検索する

2）

それらの検索フィールドを読むためにあなたの検索機能を実装してください：

function search（）{var searchValue_title = document.getElementById（ "search_title"）; var searchValue_createdBy = document.getElementById（ "search_createdBy"）;

var extraQueryParameters = "";

extraQueryParameters = "？title =" searchValue_title.value; extraQueryParameters = extraQueryParameters "

jQuery（ "＃SearchResults"）。jqGrid（）。setGridParam（{url： '@ Url.Action（ "GridData"）' extraQueryParameters}）。trigger（ "reloadGrid"）

}

実際には、入力要素を作成するために@ HTML.TextBoxFor（…​）を使用する必要はありません。 MVC 3のdataAnnotationを利用したいのでなければ、単純な要素を利用することができます。

検索機能は、すべての検索パラメータを連結してGridData Actionに追加するだけです。 URLはhttp：// mySite / Controller / GridData？title = helloのようになります。 これはグリッドに送られます。

3）以下の行に沿ってMVCコントローラ関数を実装してください。

public JsonResult GridData（文字列sidx、文字列sord、整数？ ページ、int型？ 行、int？ createdBy、string title）{using（MyDataContext ddc = new MyDataContext（））{var baseQuery = ddc.MyCampaign.AsQueryable（）; string gridCaption = "検索結果";

if（！string.IsNullOrEmpty（titulo））baseQuery = baseQuery.Where（A => A.Title.Contains（title））;

if（createdBy.HasValue（））baseQuery = baseQuery.Where（A => A.idCreationUser = createdBy.Value）;

int pageIndex = Convert.ToInt32（ページ） -  1; int pageSize = rows.HasValue？ rows.Value：10; int totalRecords = baseQuery.Count（）; int totalPages =（int）Math.Ceiling（（float）totalRecords /（float）pageSize）;

var ds =（baseQueryのAからnew {ID = A.ID、Title = A.Title、}を選択します）OrderBy（sidx "" sord）.Skip（pageIndex * pageSize）.Take（pageSize）.ToList（）;

var jsonData = new {total = totalPages、page = page、records = totalRecords、rows = dsのAから選択new {id = A.ID、cell = new [] {A.ID.ToString（）、A.Title} caption = gridCaption};

Json（jsonData、JsonRequestBehavior.AllowGet）を返します。 }}

4）以下の点に注意してください。

C＃関数のパラメータ名は、[検索]ボタンをクリックしたときにクエリ文字列の構築時に渡される引数と一致する必要があります。 .OrderBy（sidx "" sord）メソッドを使用するには、ダイナミックLinq DLLを使用する必要があります。 using-the-linq-dynamic-query-library.aspxこれにはバグがありますが、ほとんどの部分ではうまくいきます:)

Source

Linked
Related