パーシャルビューで使用されるWebグリッドでページング/ソートが機能しない

Question

ページから選択した値に応じてWebグリッドを表示する部分的なビューがあります。ドロップのために

はダウン私はアイテムのドロップダウンのために

@Html.DropDownListFor(
x => x.ItemId, 
new SelectList(Model.Items, "Value", "Text"), 
new { 
    id = "myddl", 
    data_url = Url.Action("Foo", "SomeController") 
} 
) 

を使用していた私は

$(function() { 
$('#myddl').change(function() { 
    var url = $(this).data('url'); 
    var value = $(this).val(); 
    $('#result').load(url, { value: value }) 
}); 
}); 

と以下の私の行動が

public ActionResult Foo(string value) 
{ 
    SomeModel model = ... 
return PartialView(model); 
} 

すべてが良い動作しますが、あるを使用している選択私は、私の部分的なビューにある私のwebgridでページングやソートを試みます。私は、Webグリッドで新しいウィンドウを表示しています。

私は

Answer 1

次の例は、私のために正常に動作します助けてくださいポストバック

なく、同じページ上の並べ替えやページできるようにしたかったです。

モデル：

public class MyViewModel 
{ 
    public string Bar { get; set; } 
} 

コントローラー：

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult Foo(string value) 
    { 
     var model = Enumerable.Range(1, 45).Select(x => new MyViewModel 
     { 
      Bar = "bar " + value + " " + x 
     }); 
     return PartialView(model); 
    } 
} 

Index.cshtmlビュー：

<script type="text/javascript"> 
    $(function() { 
     $('#myddl').change(function() { 
      var url = $(this).data('url'); 
      var value = $(this).val(); 
      $.ajax({ 
       url: url, 
       type: 'GET', 
       cache: false, 
       data: { value: value }, 
       success: function (result) { 
        $('#result').html(result); 
       } 
      }); 
     }); 
    }); 
</script> 

@Html.DropDownList(
    "id", 
    new[] { 
     new SelectListItem { Value = "val1", Text = "value 1" }, 
     new SelectListItem { Value = "val2", Text = "value 2" }, 
     new SelectListItem { Value = "val3", Text = "value 3" }, 
    }, 
    new { 
     id = "myddl", 
     data_url = Url.Action("Foo", "Home") 
    } 
) 

<div id="result"> 
    @Html.Action("Foo") 
</div> 

Foo.cshtml部分：

@model IEnumerable<MyViewModel> 
@{ 
    var grid = new WebGrid(
     canPage: true, 
     rowsPerPage: 10, 
     canSort: true, 
     ajaxUpdateContainerId: "grid" 
    ); 
    grid.Bind(Model, rowCount: Model.Count()); 
    grid.Pager(WebGridPagerModes.All); 
} 

@grid.GetHtml(
    htmlAttributes: new { id = "grid" }, 
    columns: grid.Columns(
     grid.Column("Bar") 
    ) 
) 

POSTの代わりにグリッドをリフレッシュするためにGETリクエストを使用したことに注目してください。この方法では、ドロップダウンリストでvalueのクエリ文字列パラメータが将来のソートとページングのために保持されるためです。