Paging/Sortierung funktioniert nicht in Webgitter, das in der Teilansicht verwendet wird

Question

Ich habe eine Teilansicht, in der ich ein Webgitter zeige, abhängig von einem Wert, der auf einer Seite ausgewählt wurde.

Für Drop-down habe ich verwendet

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

Für Drop-Down-Element auswählen I

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

verwendet haben, und unten ist meine Aktion

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

alles funktioniert gut, aber wenn Ich versuche ein Paging oder Sortierung auf meinem Webgrid, das in meiner Teilansicht ist. Ich zeige ein neues Fenster mit dem Web Grid.

Ich wollte

Bitte helfen

Answer 1

sortieren und zu Seite können

Das folgende Beispiel für mich auf der gleichen Seite ohne Postback funktioniert gut.

Modell:

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

Controller:

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 Ansicht:

<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 Teil:

@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") 
    ) 
) 

Beachten Sie, dass ich eine GET-Anforderung verwendet habe, um das Raster anstelle von POST zu aktualisieren, weil auf diese Weise der im Dropdown-Menü ausgewählte Abfragezeichenfolgenparameterfür die zukünftige Sortierung und Paging beibehalten wird.