将参数传递给 Telerik asp.net mvc 网格答案

【问题标题】：Passing parameters to telerik asp.net mvc grid将参数传递给 Telerik asp.net mvc 网格
【发布时间】：2011-02-04 22:27:24
【问题描述】：

我有一个 Telerik asp.net mvc 网格，需要根据用户在单独的文本框中输入的搜索条件进行填充。网格最初使用 ajax 方法来加载自身以及进行分页。

如何将搜索参数传递给网格，以便它在“每次”调用 ajax 方法以响应用户单击另一个页面以转到该页面上的数据时发送这些参数？

我阅读了 Telerik 的用户指南，但没有提到这种情况。我能够在上面做的唯一方法是使用 jquery 将参数传递给客户端的 rebind() 方法。问题是我不确定它是否是传递参数的“官方”方式，即使在更新后也总是有效。我在 Telerik 网站上的这篇文章中找到了这种方法：link text

我必须传入多个参数。当 Telerik 网格调用时，控制器中的操作方法会根据搜索参数再次运行查询。

这是我的代码的 sn-p：

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

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

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

【问题讨论】：

标签： asp.net-mvc ajax parameters grid telerik

【解决方案1】：

所以根据 Telerik “推荐的方法是在 onDataBinding 事件中设置参数”。

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

}

【讨论】：

【解决方案2】：

这是在 Telerix ajax 回发期间从表单传回参数的更简单方法。

只需挂钩全局 $.ajaxPrefilter 事件并使用 jquery 将 from 的内容序列化为正在提交的 URL。这将适用于 ASP.MVC 模型绑定

<script type="text/javascript">

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

</script>

【讨论】：

【解决方案3】：

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

这是绑定到您的选择命令的控制器操作：

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

参数“命令”具有排序和分页信息。注意：此解决方案适用于 ajax 化网格。如果你是直接发帖，你仍然可以使用 GridCommand 命令参数来保持分页/过滤/排序的状态。

【讨论】：

【解决方案4】：

对于我自己，我使用我使用 jQuery 和 javascript 对象传递的 ViewModel 对象，我的视图是严格类型的 SearchMemberModel，女巫包含我的搜索字段，并且我的视图中的每个字段都有一个文本框。我的数据绑定是将模型传递给控制器。然后我在 javascript 中构建我的对象并在 rebind 调用中将它传递给我的控制器。

这是我的代码：

查看和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"))%>

那是我的控制器

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

我也可以给你我的搜索模型类：

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

希望它可以帮助任何人！

【讨论】：

您的方法与 GlobalCompe 的方法基本相同 - 将 Javascript 参数传递给 rebind 调用。我用这种方法看到的问题是在分页时参数丢失了。你也看到了吗？
解决了，有点。此（分页）在 MVC 扩展的最新（2011 年第一季度）测试版中被破坏。
这个答案比 Telerik 网站上的大多数客户端 API 示例更有帮助。非常感谢你！

【解决方案5】：

试试这个：Telerik MVC Grid External Filter

它是一个 jquery 插件，可让您通过自定义输入控件设置过滤器。

【讨论】：

此解决方案不会在服务器端进行过滤，是吗？据我所知，您正在过滤已针对您的数据源执行的选择。

【解决方案6】：

这实际上记录在here。

【讨论】：

所以如果我理解正确，我所要做的就是设置数据绑定如下 Html.Telerik().Grid(Model) .DataBinding(databinding => databinding.Ajax().Select( "GetInvoicesInPages", "Invoices", new { startSearchDate = (string)ViewData["StartDatePicker-input"] })) .EnableCustomBinding(true) 并在客户端执行 $("#searchButton").click(function() { var grid = $("#Invoices").data('tGrid'); grid.ajaxRequest();} );