programing

telerik asp.net mvc 그리드에 매개 변수 전달

lastmoon 2023. 8. 25. 23:53
반응형

telerik asp.net mvc 그리드에 매개 변수 전달

저는 사용자가 별도의 텍스트 상자에 입력한 검색 기준에 따라 채워져야 하는 텔레릭 asp.net mvc 그리드를 가지고 있습니다.그리드는 Ajax 방법을 사용하여 초기에 자체를 로드하고 페이징을 수행합니다.

어떻게 하면 검색 매개 변수를 그리드에 전달하여 사용자가 다른 페이지를 클릭하여 해당 페이지의 데이터로 이동하는 것에 대한 응답으로 Ajax 메서드를 호출하도록 할 수 있습니까?

텔레릭의 사용자 가이드를 읽었는데 이 시나리오는 나와있지 않습니다.제가 위에서 할 수 있었던 유일한 방법은 jquery를 사용하여 클라이언트 측의 rebind() 메서드에 매개 변수를 전달하는 것입니다.문제는 업데이트 후에도 항상 작동하는 매개 변수를 전달하는 "공식적인" 방법인지 확신할 수 없다는 것입니다.텔레릭 사이트의 이 게시물에서 이 방법을 찾았습니다: 링크 텍스트.

여러 매개 변수를 전달해야 합니다.텔레릭 그리드에서 호출될 때 컨트롤러의 작업 방법은 검색 매개 변수를 기반으로 쿼리를 다시 실행합니다.

다음은 제 코드의 일부입니다.

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

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

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

따라서 Telerik에 따르면 "권장되는 접근 방식은 onDataBinding 이벤트에서 인수를 설정하는 것입니다."

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

}

나는 jQuery와 javascript 객체를 사용하여 전달하는 ViewModel 객체를 사용하고, 내 View는 SearchMemberModel을 강하게 입력하고, witch는 내 검색 필드를 포함하며, 내 뷰의 모든 필드에 대한 텍스트 상자를 가지고 있습니다.내 데이터 바인딩은 모델을 컨트롤러에 전달하는 중입니다.그런 다음 Javascript로 객체를 작성하여 재바인딩 호출 시 컨트롤러에 전달합니다.

내 코드는 다음과 같습니다.

보기 및 Javascript

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

그것이 밖에 있는 모든 사람들을 도울 수 있기를 바랍니다!

이것은 실제로 여기에 문서화되어 있습니다.

<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 명령 매개 변수를 사용하여 페이징/필터링/정렬 상태를 유지할 수 있습니다.

이것을 시도해 보십시오.텔레릭 MVC 그리드 외부 필터

사용자 지정 입력 컨트롤로 필터를 설정할 수 있는 jquery 플러그인입니다.

다음은 텔레릭스 아약스 포스트백 중에 양식에서 매개 변수를 훨씬 더 쉽게 전달할 수 있는 방법입니다.

글로벌 $.ajaxPrefilter 이벤트에 연결하고 jquery를 사용하여 의 내용을 제출 중인 URL로 직렬화하기만 하면 됩니다.이것은 ASP에서 작동합니다.MVC 모델 바인딩

<script type="text/javascript">

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

</script>

언급URL : https://stackoverflow.com/questions/2587066/passing-parameters-to-telerik-asp-net-mvc-grid

반응형