Передать данные формы jquery-ajax-unobtrusive asp.net core

Друзья, как мне передать все данные формы в контроллер для обработки ajax запроса? Передаются данные формы при нажатии кнопки type="submit" value="Фильтр". Тут ок, но, при клике по ссылке пагинации (Вперед или Назад) - передается только номер страницы, остальные параметры (supplier и pageSize) - не передаются((.

Вот форма:

@model ProductsViewModel

@{
    ViewData["Title"] = "Справочник товаров";
}

<div>
    <h1>@ViewData["Title"]</h1>
    <form asp-action="Products" asp-controller="Products" data-ajax="true" data-ajax-method="POST"
          data-ajax-begin="OnBegin" data-ajax-failure="OnFailure"
          data-ajax-success="OnSuccess" data-ajax-complete="OnComplete"
          data-ajax-update="#ttt">
        <div class="form-inline form-group">

            <label class="control-label">Поставщик: </label>
            <select name="supplier" asp-items="Model.Suppliers" class="form-control"></select>

            <label class="control-label">К-во записей на странице: </label>
            <select name="pageSize" asp-items="Model.PageSizes" class="form-control"></select>
            <input type="hidden" name="page" value="@(Model.PageViewModel.PageNumber)">

            <input type="submit" value="Фильтр" class="btn btn-default" />
        </div>
        <div id="ttt">
           
            @if (Model.PageViewModel.HasPreviousPage)
            {
                <a asp-action="Products"
                   asp-route-pageSize="pageSize"
                   asp-route-page="@(Model.PageViewModel.PageNumber - 1)"
                   asp-route-supplier="@(Model.Supplier)"
           
                   asp-controller="Products" data-ajax="true" data-ajax-method="POST"
                   data-ajax-complete="OnComplete"
                   data-ajax-update="#ttt"
                   class="btn btn-outline-dark">
                    <i class="glyphicon glyphicon-chevron-left"></i>
                    Назад
                </a>
            }
            @if (Model.PageViewModel.HasNextPage)
            {
                <a asp-action="Products"
                   asp-route-pageSize="pageSize"
                   asp-route-page="@(Model.PageViewModel.PageNumber + 1)"
                   asp-route-supplier="@(Model.Supplier)"
           
                   asp-controller="Products" data-ajax="true" data-ajax-method="POST"
                   data-ajax-complete="OnComplete"
                   data-ajax-update="#ttt"
                   class="btn btn-outline-dark">
                    Вперед
                    <i class="glyphicon glyphicon-chevron-right"></i>
                </a>
            }

            <p>
                <a asp-action="Create">Create New</a>
            </p>
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.Supplier.Title)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Supplier)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Title)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.PurchasePrice)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Quantity)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.SupplierCategory)
                        </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.Products)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.Supplier.Title)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Supplier.Id)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Title)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.PurchasePrice)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Quantity)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.SupplierCategory.Id)
                            </td>
                            <td>
                                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                                <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </form>
</div>





<script type="text/javascript">
    function OnBegin() {

    }

    function OnFailure(response) {

    }

    function OnSuccess(response) {
        alert("OnSuccess");
    }
    function OnComplete() {

    }
</script>

И методы контроллера:

public async Task<IActionResult> Index(int? supplier, int page = 1, int pageSize = 2)
        {
          
            List<Product> products = await Context.Products.ToListAsync();
            
            var count = products.Count();
            var items = products.Skip((page - 1) * pageSize).Take(pageSize).ToList();

            //Список поставщиков для выпадающего списка
            List<Supplier> suppliers = Context.Suppliers.ToList();
            suppliers.Insert(0, new Supplier { Title = "Все", Id = 0 });
            //Список к-ва записей на странице для выпадающего списка
            List<int> pageSizes = new List<int> { 1, 2, 3 };

            PageViewModel pageViewModel = new PageViewModel(count, page, pageSize);
            ProductsViewModel model = new ProductsViewModel
            {
                PageViewModel = pageViewModel,
                Products = items,
                Suppliers = new SelectList(suppliers, "Id", "Title"),
                PageSizes = new SelectList(pageSizes)
            };

            
                return View(model);
            
        }

        public async Task<IActionResult> Products(int? supplier, int page, int pageSize)
        {
            
            List<Product> products = await Context.Products.Include(p => p.Supplier).ToListAsync();
            if (supplier != null && supplier != 0)
            {
                products = products.Where(p => p.SupplierId == supplier).ToList();
            }
            var count = products.Count();
            var items = products.Skip((page - 1) * pageSize).Take(pageSize).ToList();

            //Список поставщиков для выпадающего списка
            List<Supplier> suppliers = Context.Suppliers.ToList();
            suppliers.Insert(0, new Supplier { Title = "Все", Id = 0 });
            //Список к-ва записей на странице для выпадающего списка
            List<int> pageSizes = new List<int> { 1, 2, 3 };

            PageViewModel pageViewModel = new PageViewModel(count, page, pageSize);
            ProductsViewModel model = new ProductsViewModel
            {
                PageViewModel = pageViewModel,
                Products = items,
                Suppliers = new SelectList(suppliers, "Id", "Title"),
                PageSizes = new SelectList(pageSizes)
            };

                return PartialView("~/Views/Products/_Products.cshtml", model);
            
        }

И как сделать так, чтобы не нужно было нажимать кнопку submit для отправки формы, а данные отправлялись сразу при выборе елемента SelectList (supplier и pageSize). Также хотелось бы использовать именно jquery-ajax-unobtrusive.

P.S. _Products.cshtml просто дублирует и обновляет его с помощью data-ajax-update="#ttt".


Ответы (0 шт):