To pass control values as html.Pagedlist parameters

问题

I am using paged list to display a list of values. The display works fine. I use the provided Unobtrusive AJAX to get the data for the other pages.

This is how my paged control looks.

@Html.PagedListPager(Model.CountryList, page => Url.Action("GetCountries", "Dashboard", new {page}), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(PagedListRenderOptions.ClassicPlusFirstAndLast, new AjaxOptions()
{
    HttpMethod = "POST",
    UpdateTargetId = "panel1",
    OnSuccess = "onAjaxSuccess",
    OnFailure = "onAjaxFailure"
}))

This works fine.

Now I have a textbox and a drop down box in the page and I want to pass values present in those along with the Html Paged list.

@Html.TextBox("SearchCountryName", new { name = "SearchCountryName", @class = "form-control", placeholder = "Search Country" })

@Html.DropdownList("Continent", ContinentList)

My controller code is :

public PartialViewResult GetDashboardBody(string country,string continent,int? page)
{

}

I want to do something like

@Html.PagedListPager(Model.CountryList, page => Url.Action("GetCountries", "Dashboard", new {country = $("#SearchCountryName").val(),continent = $("#Continent").val(),page}), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(PagedListRenderOptions.ClassicPlusFirstAndLast, new AjaxOptions()
{
    HttpMethod = "POST",
    UpdateTargetId = "panel1",
    OnSuccess = "onAjaxSuccess",
    OnFailure = "onAjaxFailure"
}))

But this does not work.

So how do I go about passing the current value of the controls to the action method as parameters using html.PagedList?

回答1:

You'll need to handle this on the client, as Razor is unaware of what the user has selected. Remember: once the page is rendered, Razor is no longer part of the process.

Here's what I used on a recent project:

<div class="text-center" id="pagingControl">
    <input type="hidden" id="selectedOption" name="selectedOption" />
    @Html.PagedListPager(Model.Logs, page => Url.Action("Index", "Log",
        new { page = page }),
        PagedListRenderOptions.ClassicPlusFirstAndLast)
</div>

With the following on doc load,

$('#pagingControl').find('a[href]').on('click', function (e) {
        e.preventDefault();
        $("#selectedOption").val("something"); // When you submit, you can read this field on the controller and pass it on
        var page = utilities.getQueryStringValue(this, 0).replace('page=','');
        $('#AdvancedSearchForm').submit();
    }
});

The utility function (not mine, though can't remember where I found it) is as such,

getQueryStringValue: function (anchor, index) {
    var queryString = $(anchor).attr('href').split('?')[1];
    var values = queryString.split('&');
    return values[index];
}

So the trick is to intercept the user's click of the paging control, use hidden fields to submit whatever values you want, and then read the values on the controller. In this case, I have a hidden field called selectedOption; add others as you need them and populate them in JavaScript with the values the user has provided. Then do a submit on the form.

Note that the form's method is a POST here. You'll also want to pass in the FormCollection into your action so you can read the hidden fields posted.

来源：https://stackoverflow.com/questions/50726173/to-pass-control-values-as-html-pagedlist-parameters

标签

jquery

ajax

asp.net-mvc

pagedlist