Comment relier le contenu d'un Html.Grid en utilisant jquery?

Question

Je viens d'installer le paquet Grid.mvc pour mon projet et utilisé la méthode Html.Grid pour dessiner une grille de base:

@Html.Grid(Model).Named("FeedbackGrid").Columns(columns => 
{ 
    columns.Add(c => c.Id).Titled("Request Number").SetWidth("10%"); 
    columns.Add(c => c.AspNetUser.FullName).Titled("Requester").Filterable(true).SetWidth("15%"); 
    columns.Add(c => c.RequestedDate).Titled("Date Requested").SetWidth("15%"); 
    columns.Add(c => c.Title).Titled("Title").SetWidth("20%"); 
    columns.Add(c => c.Description).Titled("Description") 
     .RenderValueAs(c => c.Description.Substring(0, (c.Description.Length > 50) ? 50: c.Description.Length) 
      + ((c.Description.Length > 50) ? "..." : "")).SetWidth("40%"); 
     }).WithPaging(10).Sortable(true) 

Voici mon modèle:

@model IEnumerable<MyProject.Models.FeatureRequest> 

J'ai mis des capacités de recherche sur l'écran (des choses telles qu'un ID, un nom, etc.) avec un bouton de recherche. Lorsque la recherche est cliquée, jquery extrait de nouvelles données d'une méthode d'action et les renvoie à la vue (même type que celui du modèle). C'est là que je suis coincé. Je n'ai aucune idée comment repeupler la grille en utilisant les données nouvellement récupérées. Voici ci-dessous le code. Toute aide serait très appréciée.

var onSearchClicked = function(){ 
    var requestId = $('#RequestIdSearch').val(); 
    var requesterId = $('#RequesterIdSearch').val(); 
    var title = $('#TitleSearch').val(); 
    var description = $('#DescriptionSearch').val(); 

    $.ajax({ 
     cache: false, 
     type: "POST", 
     url: "/Home/GetFeatureRequests", 
     data: { "requestId": requestId, "requesterId": requesterId, "title": title,"description": description}, 
     success: function (rdata) { 
      // How to bind the grid to the retrieve rdata here? 
      alert('successful'); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      alert('Failed to retrieve request features!.'); 
     } 
    }); 
} 

Answer 1

Mettez votre HTML.Grid dans un Partial View. Ensuite, retournez le Partial View de votre commande comme ceci:

public PartialViewResult GetFeatureRequests(int requestId, int requesterId, string title, string description) 
{ 
    // Your code here to fill model IEnumerable<MyProject.Models.FeatureRequest> 
    return PartialView("_PartialViewName", model); // returns view with model 
} 

En ajax success function, faites ceci:

$.ajax({ 
    cache: false, 
    type: "POST", 
    url: "/Home/GetFeatureRequests", 
    data: { "requestId": requestId, "requesterId": requesterId, "title": title,"description": description}, 
    success: function (rdata) { 
     $('#yourContainerId').html(rdata); 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
     alert('Failed to retrieve request features!.'); 
    } 
}); 

Dans votre écran principal, comprend la vue partielle comme

<div id="yourContainerId"> 
    @Html.Partial("_PartialViewName", Model.FeatureRequestList) 
</div>