asp.net-mvc - mvc - telerik grid
Pasando parámetros a telerik asp.net mvc grid (6)
Tengo una cuadrícula telerik asp.net mvc que se debe completar en función de los criterios de búsqueda que el usuario ingresa en cuadros de texto separados. La cuadrícula está utilizando el método ajax para cargarse inicialmente, así como hacer la paginación.
¿Cómo se puede pasar los parámetros de búsqueda a la cuadrícula para que envíe esos parámetros "cada vez" que llame al método ajax en respuesta al usuario que hace clic en otra página para ir a los datos en esa página?
Leí la guía del usuario de telerik pero no menciona este escenario. La única forma en que he podido hacer lo anterior es pasar 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: texto del enlace
Tengo que pasar en múltiples parámetros. El método de acción en el controlador cuando es llamado por la red telerik ejecuta la consulta nuevamente en función de 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
});
});
Entonces, según 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 };
}
}
Esta es una forma mucho más fácil de volver a pasar los parámetros desde su formulario durante la publicación de telerix ajax.
Simplemente conecte el evento global $ .ajaxPrefilter y use jquery para serializar el contenido de su a la URL que se está enviando. Esto funcionará con el enlace del modelo ASP.MVC.
<script type="text/javascript">
$.ajaxPrefilter(function (options) {
options.url = options.url + "&" + $("form").serialize();
});
</script>
Esto está realmente documentado here .
Para mí, uso el objeto ViewModel que paso usando jQuery y el objeto javascript, mi vista es SearchMemberModel tipeada de manera robusta, contiene mis campos de búsqueda y tengo un cuadro de texto para cada campo 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 revinculación.
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
[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);
}
Puedo darte 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 alguien por ahí!
Prueba este: Telerik MVC Grid External Filter
Es un complemento de jquery que le permite configurar el filtro mediante controles de entrada personalizados.
<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 vinculada 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'' de param tiene la información de clasificación y paginación. Nota: esta solución es para una grilla ajax-ified. Si está realizando publicaciones directas, aún puede usar el parámetro del comando GridCommand para mantener el estado de paginación / filtrado / clasificación.