To pass control values as html.Pagedlist parameters

Question

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?

Are you trying to pass the selected item from the dropdown to the next page? If so, you'd have to forget about Razor and use some jQuery to detect the page # click and handle it manually. If you want to pass more complex objects, you'll need a route value dictionary. — Alex, Jun 06 '18 at 18:21
This makes no sense. If you change the search/filter values then you should be doing that in a separate `ajax` call (and so that you display the first page of the new results), not attempt the change the url of the existing buttons. — , Jun 06 '18 at 22:08
@theFallenOne I get the idea, but could you please post your own answer to see what you did. I have a same problem. — Ali Eshghi, Oct 16 '20 at 11:42

Alex · Accepted Answer · 2018-06-06T18:49:10.973

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.

Instead of using the function getQueryStringValue, I used the normal AJAX post and added the other parameters as part of the data, and that worked for me. Thanks. — TheFallenOne, Jun 06 '18 at 19:38
@Alex I have a same problem here https://stackoverflow.com/questions/64309882/how-pass-dom-element-value-to-ajax-request-html-pagedlist-parameters I was wondering if you look at it. I am using ajax there so this is make it some how different. — Ali Eshghi, Oct 15 '20 at 16:38

To pass control values as html.Pagedlist parameters

1 Answers1

Linked