Pasando los parámetros a telerik asp.net grid mvc

Question

Tengo una grilla telerik asp.net mvc que necesita ser poblada en base a los criterios de búsqueda que el usuario ingresa en cuadros de texto separados. La grilla está usando el método ajax para cargarse inicialmente así como para hacer paginación.

¿Cómo se pueden pasar los parámetros de búsqueda a la grilla para que envíe esos parámetros "cada vez" que llama al método ajax en respuesta al usuario al hacer clic en otra página para ir a los datos en esa página?

Leí la guía de usuario de telerik, pero no menciona este escenario. La única forma en que he podido hacer lo anterior es pasando los parámetros al método rebind() en el lado del cliente usando jquery. El problema es que no estoy seguro de si es la forma "oficial" de pasar parámetros, que siempre funcionará incluso después de las actualizaciones. Encontré este método en esta publicación en el sitio de telerik: link text

Tengo que pasar por múltiples parámetros. El método de acción en el controlador cuando es llamado por la cuadrícula telerik ejecuta nuevamente la consulta en base a los parámetros de búsqueda.

Aquí hay un fragmento de mi código:

$("#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

Esto es en realidad documentada here.

Answer 2

dar a éste un intento: Telerik MVC Grid External Filter

Es un plugin jQuery que le permite configurar el filtro de controles de entrada personalizado.

Answer 3

Por mi parte yo uso ViewModel objeto que me pase con jQuery y JavaScript objeto, mi vista se escribe cenaseis SearchMemberModel, bruja contiene mis campos de búsqueda y tengo un cuadro de texto por cada campos en mi opinión. Mi enlace de datos está en pasar el Modelo al controlador. Luego construyo mi objeto en javascript y lo paso a mi controlador en la llamada de reenlace.

Aquí está mi código:

Ver y 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"))%> 

Y ese es mi controlador de

[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); 
    } 

Te puedo dar mi clase de modelo de búsqueda también:

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; } 
} 

Espero que pueda ayudar a cualquiera por ahí!

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> 

Aquí está la acción del controlador con destino a su comando de selección:

[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))); 
} 

El 'comando' parámetro tiene la información de clasificación y paginación. Nota: esta solución es para una grilla ajax-ified. Si está haciendo publicaciones directas, aún puede usar el parámetro de comando GridCommand para mantener el estado de paginación/filtrado/clasificación.

Answer 5

De acuerdo con Telerik "el enfoque recomendado es establecer los argumentos en el evento onDataBinding".

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

}

Answer 6

Aquí es una manera mucho más fácil de pasar parámetros de vuelta de su forma durante el telerix ajax segundo palo.

Simplemente enganche en el evento $ .ajaxPrefilter global y use jquery para serializar el contenido de su a la URL que se está enviando. Esto funciona con el modelo ASP.MVC vinculante

<script type="text/javascript"> 

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

</script>