Передать данные формы 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".