Transmettre les paramètres à telerik asp.net MVC grid
j'ai un telerik asp.net mvc grille qui doit être remplie en fonction des critères de recherche que l'utilisateur entre dans des boîtes de texte séparées. La grille utilise la méthode ajax pour se charger initialement aussi bien que faire la pagination.
Comment passer les paramètres de recherche à la grille de sorte qu'il envoie ces paramètres "à chaque fois" il appelle la méthode ajax en réponse à l'utilisateur en cliquant sur une autre page pour aller aux données sur cette page?
j'ai lu le telerik guide de l'utilisateur, mais c' ne fait pas mention de ce scénario. La seule façon que j'ai pu faire ci-dessus est de passer les paramètres à la méthode rebind() côté client en utilisant jquery. Le problème est que je ne suis pas sûr que ce soit la manière "officielle" de passer les paramètres qui fonctionnera toujours même après les mises à jour. J'ai trouvé cette méthode sur ce post sur le site de telerik: texte du lien
je dois passer plusieurs paramètres. La méthode d'action dans le controller lorsqu'elle est appelée par la grille telerik exécute la requête encore une fois basé sur les paramètres de recherche.
Voici un extrait de mon code:
$("#searchButton").click(function() {
var grid = $("#Invoices").data('tGrid');
var startSearchDate = $("#StartDatePicker-input").val();
var endSearchDate = $("#EndDatePicker-input").val();
grid.rebind({ startSearchDate: startSearchDate ,
endSearchDate: endSearchDate
});
});
6 réponses
ainsi selon Telerik "l'approche recommandée est de définir les arguments dans l'événement onDataBinding".
function onGridBinding(e) {
if (cancelGridBinding) {
// ...
}
else {
var searchValue = 'something';
e.data = { search: searchValue };
}
}
pour moi j'utilise L'objet ViewModel que je passe en utilisant l'objet jQuery et javascript, ma vue est fortement tapée SearchMemberModel, witch contient mes champs de recherche et j'ai une boîte de texte pour chaque champs de ma vue. Ma Banque de données est sur la transmission du modèle au contrôleur. Puis je construis mon objet en javascript et je le passe à mon contrôleur dans l'appel rebind.
Voici mon code :
View et 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"))%>
Et c'est mon contrôleur
[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);
}
je peux vous donner mon modèle de recherche de classe :
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; }
}
J'espère que ça peut aider n'importe qui!
<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>
Voici l'action du contrôleur liée à votre commande 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)));
}
la commande 'param' contient les informations de tri et de pagination. Note: Cette solution est pour une grille Ajax-ifiée. Si vous faites des messages simples, vous pouvez toujours utiliser le paramètre de commande GridCommand pour maintenir l'état de paging/filtrage/tri.
essayez celle-ci: Telerik MVC grille filtre externe
c'est un plugin jquery qui vous permet de régler le filtre par des contrôles d'entrée personnalisés.
voici un moyen beaucoup plus facile de passer les paramètres de votre forme pendant le post telerix ajax.
simplement accrocher dans le $global.événement ajaxPrefilter et utilisez jquery pour sérialiser le contenu de votre de à L'URL qui est soumise. Cela fonctionnera avec ASP.La liaison de modèle MVC
<script type="text/javascript">
$.ajaxPrefilter(function (options) {
options.url = options.url + "&" + $("form").serialize();
});
</script>