10

KendoUI読み取りに ajax バインディングを使用する ASP.NET MVC アプリ用の基本的なグリッドがあります。グリッド上のフォームを使用して、グリッドに表示する必要があるデータを選択できるように、これを強化したいと思います。これは、名、姓、生年月日、顧客ソースなどの基本的なフィールドと検索ボタンを備えた標準的な検索フォームです。検索ボタンが押されたら、上で参照したフィールドを使用して検索モデルを渡すことにより、コントローラーから基準を満たすデータをグリッドに強制的に取得させたいと考えています。

検索フォームは、_CustomerSearch 部分ビューに含まれています。

OnDataBinding クライアント イベントを利用してパラメーター値を更新し、手動で Ajax 呼び出しを行ってデータを取得することで、Telerik MVC 拡張機能でこの種のことを以前に実装しました。KendoUI がこれと同じように動作するようには見えません。

意見

@Html.Partial("_CustomerSearch", Model)
<hr>
@(Html.Kendo().Grid<ViewModels.CustomerModel>()    
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Hidden(true);
        columns.Bound(p => p.FirstName);
        columns.Bound(p => p.LastName);
        columns.Bound(p => p.DateOfBirth).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.IsActive);
    })
    .Scrollable()
    .Filterable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("_Search", "Customer"))
    )
)

コントローラ

public ActionResult _Search([DataSourceRequest]DataSourceRequest request)
{
    return Json(DataService.GetCustomers2().ToDataSourceResult(request));
}

私はコントローラがこのように見えると想像していますが、このように実装されているものの例を見つけることができません。これは私が助けを必要としているものです.

public ActionResult _Search([DataSourceRequest]DataSourceRequest request, CustomerSearchModel customerSearchModel)
{
    return Json(DataService.GetCustomers2(customerSearchModel)
               .ToDataSourceResult(request));
}
4

3 に答える 3

14

組み込みのフィルタリングで要件を解決できる場合、ニコラスの回答はうまくいく可能性があります。しかし、構築されたフィルタリングで要件を解決できるのであれば、なぜカスタム検索フォームを作成する必要があるのでしょうか?

したがって、検索を手動で行う理由があると思いますので、プロジェクトで行った方法を以下に示します (もっと簡単な方法があるかもしれませんが、それでもうまくいきました)。

コントローラーのアクションは問題ありません。

public ActionResult _Search([DataSourceRequest]DataSourceRequest request, 
                            CustomerSearchModel customerSearchModel)
{
    return Json(DataService.GetCustomers2(customerSearchModel)
               .ToDataSourceResult(request));
}

次のステップ: 検索フォームからデータを収集する JavaScript 関数が必要です (JS オブジェクトのプロパティ名は のプロパティ名と一致する必要がありますCustomerSearchModel)。

function getAdditionalData() {
    // Reserved property names
    // used by DataSourceRequest: sort, page, pageSize, group, filter
    return {
        FirstName: $("#FirstName").val(),
        LastName: $("#LastName").val(),
        //...
    };
}

次に、読み取りごとにこの関数が呼び出されるように構成できます。

.DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("_Search", "Customer")
                          .Data("getAdditionalData"))
    )

最後に、ボタンをクリックすると、グリッドを次のように更新する必要があります。

$('#Grid').data('kendoGrid').dataSource.fetch();
于 2013-03-27T19:32:44.697 に答える
2

filterグリッドのデータ ソースを呼び出して、グリッドにフィルターを設定できます。

したがって、ボタンのonclickハンドラー関数に、次のようなものを入れます。

var $Grid = $('#Grid').data('kendoGrid');

$Grid.dataSource.filter([
  { field: 'FirstName', operator: 'eq', value: $('#firstName').val() },
  { field: 'LastName', operator: 'eq', value: $('#lastName').val() }
]);

Kendo ドキュメントへのリンクは次のとおりです: DataSource.filter

于 2013-03-27T19:20:34.530 に答える
2

アクションメソッドに追加データを渡すを参照してください

アクションに追加のパラメーターを渡すには、Dataメソッドを使用します。追加データを含む JavaScript オブジェクトを返す JavaScript 関数の名前を指定します。

以下にリストされている実際の検索例:

重要:type="button"ボタンの場合。そしてAutoBind(false)グリッドの場合。そうしないと、うまくいきません

見る

@model  IEnumerable<KendoUIMvcSample.Models.Sample>
@{
    ViewBag.Title = "Index";
}


<script type="text/javascript">


    function getAdditionalData()
    {
        return {
            FirstName: 'A',
            LastName: 'B',
        };
    }

    $(document).ready(function ()
    {
        $('#Submit1').click(function ()
        {
            alert('Button Clicked');
            //Refresh the grid
            $('#ssgrid222').data('kendoGrid').dataSource.fetch();
        });

    });

</script>

<h2>Index</h2>
@using (Html.BeginForm())
{ 

    @(Html.Kendo().Grid<KendoUIMvcSample.Models.Sample>()    
    .Name("ssgrid222")
    .Columns(columns => {
        columns.Bound(p => p.SampleDescription).Filterable(false).Width(100);
        columns.Bound(p => p.SampleCode).Filterable(false).Width(100);
        columns.Bound(p => p.SampleItems).Filterable(false).Width(100);
    })
    .AutoBind(false)
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Sample")
        .Data("getAdditionalData"))
     )
  )

 <input id="Submit1" type="button" value="SubmitValue" />

}

コントローラ

namespace KendoUIMvcSample.Controllers
{
    public class SampleController : Controller
    {
        public ActionResult Index()
        {
            SampleModel AddSample = new SampleModel();
            Sample s1 = new Sample();
            return View(GetSamples());
        }
        public static IEnumerable<Sample> GetSamples()
        {
            List<Sample> sampleAdd = new List<Sample>();
            Sample s12 = new Sample();
            s12.SampleCode = "123se";
            s12.SampleDescription = "GOOD";
            s12.SampleItems = "newone";
            Sample s2 = new Sample();
            s2.SampleCode = "234se";
            s2.SampleDescription = "Average";
            s2.SampleItems = "oldone";
            sampleAdd.Add(s12);
            sampleAdd.Add(s2);
            return sampleAdd;
        }
        public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request, CustomerSearchModel customerSearchModel)
        {
            string firstParam = customerSearchModel.FirstName;
            return Json(GetOrders().ToDataSourceResult(request));
        }
        private static IEnumerable<Sample> GetOrders()
        {
            return GetSamples();
        }
    }
    public class CustomerSearchModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

モデル

namespace KendoUIMvcSample.Models
{
    public class SampleModel
    {
        public List<Sample> samples;
    }
    public class Sample
    {
        public string SampleDescription { get; set; }
        public string SampleCode { get; set; }
        public string SampleItems { get; set; }
    }
}
于 2013-08-05T09:21:18.177 に答える