Passare i parametri a telerik asp.net mvc grid

Question

Ho una rete telerik asp.net mvc che deve essere compilata in base ai criteri di ricerca immessi dall'utente in caselle di testo separate. La griglia utilizza il metodo ajax per caricarsi inizialmente come pure il paging.

Come si possono passare i parametri di ricerca alla griglia in modo che invii quei parametri "ogni volta" chiama il metodo ajax in risposta all'utente che fa clic su un'altra pagina per andare ai dati su quella pagina?

Ho letto la guida per l'utente di telerik ma non menziona questo scenario. L'unico modo che ho potuto fare sopra è passare i parametri al metodo rebind() sul lato client usando jquery. Il problema è che non sono sicuro che sia il modo "ufficiale" di passare parametri che funzioneranno sempre anche dopo gli aggiornamenti. Ho trovato questo metodo su questo post sul sito di telerik: link text

Devo passare in più parametri. Il metodo di azione nel controller quando chiamato dalla rete telerik esegue nuovamente la query in base ai parametri di ricerca.

Ecco un frammento del mio codice:

$("#searchButton").click(function() { 
    var grid = $("#Invoices").data('tGrid'); 

    var startSearchDate = $("#StartDatePicker-input").val(); 
    var endSearchDate = $("#EndDatePicker-input").val(); 

    grid.rebind({ startSearchDate: startSearchDate , 
        endSearchDate: endSearchDate 
       }); 
}); 

Answer 1

Questo è in realtà documentata here.

Answer 2

Dare questa una prova: Telerik MVC Grid External Filter

Si tratta di un plugin jQuery che consente di impostare il filtro dai controlli di input personalizzato.

Answer 3

Per conto mio uso l'oggetto ViewModel che ho passato usando jQuery e l'oggetto javascript, il mio View è tipicamente SearchMemberModel, witch contiene i miei campi di ricerca e ho una casella di testo per ogni campo nella mia vista. Il mio database è per passare il modello al controller. Poi costruisco il mio oggetto in javascript e lo passo al mio controller nella chiamata rebind.

Ecco il mio codice:

View e JavaScrip

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Admin.Master" Inherits="System.Web.Mvc.ViewPage<Enquete.Models.SearchMemberModel>" %> 

<% using (Html.BeginForm()) {%> 
    <%: Html.ValidationSummary(true) %> 

    <fieldset> 
     <legend><%: Resources.Search %></legend> 

     <div class="editor-label"> 
      <%: Html.LabelFor(model => model.MemberNumber) %> 
     </div> 
     <div class="editor-field"> 
      <%: Html.TextBoxFor(model => model.MemberNumber) %> 
      <%: Html.ValidationMessageFor(model => model.MemberNumber) %> 
     </div> 

     <div class="editor-label"> 
      <%: Html.LabelFor(model => model.Email) %> 
     </div> 
     <div class="editor-field"> 
      <%: Html.TextBoxFor(model => model.Email) %> 
      <%: Html.ValidationMessageFor(model => model.Email) %> 
     </div> 

     <div class="editor-label"> 
      <%: Html.LabelFor(model => model.FirstName) %> 
     </div> 
     <div class="editor-field"> 
      <%: Html.TextBoxFor(model => model.FirstName) %> 
      <%: Html.ValidationMessageFor(model => model.FirstName) %> 
     </div> 

     <div class="editor-label"> 
      <%: Html.LabelFor(model => model.LastName) %> 
     </div> 
     <div class="editor-field"> 
      <%: Html.TextBoxFor(model => model.LastName) %> 
      <%: Html.ValidationMessageFor(model => model.LastName) %> 
     </div> 

     <div class="editor-label"> 
      <%: Html.LabelFor(model => model.Phone) %> 
     </div> 
     <div class="editor-field"> 
      <%: Html.TextBoxFor(model => model.Phone) %> 
      <%: Html.ValidationMessageFor(model => model.Phone) %> 
     </div> 

     <div class="editor-label"> 
      <%: Html.LabelFor(model => model.Active) %> 
     </div> 
     <div class="editor-field"> 
      <%: Html.CheckBoxFor(model => model.Active) %> 
      <%: Html.ValidationMessageFor(model => model.Active) %> 
     </div> 

     <p> 
      <input type="submit" value="<%: Resources.ToSearch %>" id="btnSearch" /> 
     </p> 
    </fieldset> 

<% } %> 

<%= Html.Telerik().Grid<SerializableMember>() 
       .Name("Grid") 
       .Columns(colums => 
       { 
        colums.Bound(c => c.Email).Title(Resources.Email);//.ClientTemplate("<a href=\"" + Url.Action(MVC.Admin.Edit()) + "/<#=Id#>\" ><#=Email#></a>"); 
        colums.Bound(c => c.FirstName).Title(Resources.FirstName); 
        colums.Bound(c => c.LastName).Title(Resources.LastName); 
        colums.Bound(c => c.MemberNumber).Title(Resources.MemberNumber); 
        colums.Bound(c => c.Active).Title(Resources.Active).HeaderHtmlAttributes(new { @class = "center-text" }).HtmlAttributes(new { @class = "center-text" }).ClientTemplate("<img src=\"Content/images/icons/<#=Active#>.png\" alt=\"<#=Active#>\" />"); 
        colums.Bound(c => c.Id).Title(" ").HtmlAttributes(new { @class = "center-text" }).ClientTemplate("<a href=\"" + Url.Action(MVC.Member.ResetPassword()) + "/<#=Id#>\" title=\"" + Resources.ResetPassword + "\" >" + Resources.ResetPassword + "</a>"); 
        colums.Bound(c => c.Id).Title(" ").HtmlAttributes(new { @class = "center-text" }).ClientTemplate("<a href=\"" + Url.Action(MVC.Member.Activate()) + "/<#=Id#>\" title=\"" + Resources.Activate + "\" >" + Resources.Activate + "</a>"); 
        colums.Bound(c => c.Id).Title(" ").HtmlAttributes(new { @class = "center-text" }).ClientTemplate("<a href=\"" + Url.Action(MVC.Member.Deactivate()) + "/<#=Id#>\" title=\"" + Resources.Deactivate + "\" >" + Resources.Deactivate + "</a>"); 
       }) 
       //.DataBinding(d => d.Ajax().Select("ListAjax", "Member", Model)) 
       .DataBinding(d => d.Ajax().Select(MVC.Member.ListAjax(Model).GetRouteValueDictionary())) 
       .Sortable() 
       .NoRecordsTemplate(Resources.NoData) 
     %> 
     <%= Html.AntiForgeryToken() %> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#btnSearch').click(function() { 
        var grid = $('#Grid').data('tGrid'); 
        var searchModel = { 
         MemberNumber: $('#MemberNumber').val(), 
         Email: $('#Email').val(), 
         FirstName: $('#FirstName').val(), 
         LastName: $('#LastName').val(), 
         Phone: $('#Phone').val(), 
         Active: $('#Active').is(':checked') 
        }; 
        grid.rebind(searchModel); 
        return false; 
       }); 
      }); 
     </script> 

     <%= Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(g => g.DefaultPath("~/Content/Javascript/2010.3.1110"))%> 

E questo è il mio controller

[GridAction] 
    public virtual ActionResult ListAjax(SearchMemberModel search) 
    { 
     var gridModel = new GridModel<SerializableMember>(); 
     var data = _session.All<Member>(); 
     if (search != null) 
     { 
      if (search.Active) data = data.Where(x => x.Active); 
      if (!string.IsNullOrEmpty(search.Email)) data = data.Where(x => x.Email.Contains(search.Email)); 
      if (!string.IsNullOrEmpty(search.FirstName)) data = data.Where(x => x.FirstName.Contains(search.FirstName)); 
      if (!string.IsNullOrEmpty(search.LastName)) data = data.Where(x => x.LastName.Contains(search.LastName)); 
      if (!string.IsNullOrEmpty(search.MemberNumber)) data = data.Where(x => x.MemberNumber.Contains(search.MemberNumber)); 
      if (!string.IsNullOrEmpty(search.Phone)) data = data.Where(x => x.Phone.Contains(search.Phone)); 
     } 

     var list = new List<SerializableMember>(data.Count()); 
     list.AddRange(data.ToList().Select(obj => new SerializableMember(obj))); 
     gridModel.Data = list; 
     return View(gridModel); 
    } 

posso darvi la mia classe di ricerca del modello troppo:

public class SearchMemberModel 
{ 
    [LocalizedDisplayName("MemberNumber")] 
    public string MemberNumber { get; set; } 

    [LocalizedDisplayName("Email")] 
    [DataType(DataType.EmailAddress)] 
    public string Email { get; set; } 

    [LocalizedDisplayName("FirstName")] 
    public string FirstName { get; set; } 

    [LocalizedDisplayName("LastName")] 
    public string LastName { get; set; } 

    [LocalizedDisplayName("Phone")] 
    public string Phone { get; set; } 

    [LocalizedDisplayName("ActiveOnly")] 
    public bool Active { get; set; } 
} 

Spero che possa aiutare chiunque là fuori!

Answer 4

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#apply').click(function() { 
      var params = { 
       showDisabled : $('input[name=ShowDisabled]').attr('checked'), 
       showExpired : $('input[name=ShowDisabled]').attr('checked') 
      }; 

      var grid = $('#Grid').data('tGrid'); 
      grid.rebind(params); 
     }); 
    }); 
</script> 

Ecco l'azione di controllo legata al vostro comando SELECT:

[GridAction(EnableCustomBinding=true)] 
public ActionResult _BindGrid(GridCommand command, string mode, int? id, bool showExpired, bool showDisabled) 
{ 
    return View(new GridModel(GetMessageGridItems(command, mode, id, showExpired, showDisabled))); 
} 

Il 'comando' param ha le informazioni di ordinamento e il paging. Nota: questa soluzione è per una griglia ajax-ified. Se si stanno facendo post dritti, è comunque possibile utilizzare il parametro di comando GridCommand per mantenere lo stato di paging/filtro/ordinamento.

Answer 5

Quindi secondo Telerik "l'approccio consigliato è impostare gli argomenti nell'evento onDataBinding".

function onGridBinding(e) { 
if (cancelGridBinding) { 
    // ... 
} 
else { 
    var searchValue = 'something'; 
    e.data = { search: searchValue }; 
} 

}

Answer 6

Ecco un modo molto più semplice per passare parametri indietro dal modulo durante la telerix ajax palo.

Basta collegarsi all'evento $ .ajaxPrefilter globale e utilizzare jquery per serializzare il contenuto del proprio dall'URL che viene inviato. Questo funzionerà con il legame modello ASP.MVC

<script type="text/javascript"> 

$.ajaxPrefilter(function (options) { 
    options.url = options.url + "&" + $("form").serialize(); 
}); 

</script>