Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Submit form to action with parameters, Asp.Net.Core Mvc

I am trying to submit sorting dropdown form via ajax in asp.net.core. Action has other parameters which I want to get in action too but form does not submit other parameters. I think, the main problem is form part in razor

this is part my action:

public IActionResult Products(int? page, int? categoryId, string searchName = "", string sortOrder="")
{
    int pageSize = 1;
    int pageNumber = (page ?? 1);

    ViewBag.SearchName = searchName;
    ViewBag.CategoryId = categoryId;
    ViewBag.SortOrder = sortOrder;
    ........
    model.ProductInfo = productList.ToList().ToPagedList(pageNumber, pageSize);
    if (isAjax)
        return PartialView("/Views/Shared/FrontPartialViews/_FrontProductList.cshtml", model.ProductInfo);
    else
        return View("/Views/User/Products.cshtml", model);
}

here is form:

<form asp-controller="User" asp-action="Products"  
   asp-route- categoryId="@ViewBag.CategoryId" 
   asp-route-searchName="@ViewBag.searchName"
   data-ajax="true"
   data-ajax-method="Get"
   data-ajax-update="product"
   data_ajax_mode="replace">
      <select name="sortOrder"  class="form-control" onchange="orderByChanged()">
         <option selected> Please select one</option>
         <option value="date_desc">
         date_desc
         </option
      <select>
</form>
like image 246
lekiniu Avatar asked Nov 05 '25 20:11

lekiniu


1 Answers

Here is a working demo like below:

View(Index.cshtml):

<form asp-controller="User" asp-action="Products"
      asp-route-categoryId="@ViewBag.CategoryId"
      asp-route-searchName="@ViewBag.SearchName"
      data-ajax="true"
      data-ajax-method="Get"
      data-ajax-update="product"
      data_ajax_mode="replace">
    <select name="sortOrder" class="form-control" onchange="orderByChanged()">
        <option selected> Please select one</option>
        <option value="date_desc">
            date_desc
        </option>
    </select>
    <input type="submit" value="Submit" class="btn btn-primary" />
</form>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js" integrity="sha256-v2nySZafnswY87um3ymbg7p9f766IQspC5oqaqZVX2c=" crossorigin="anonymous"></script>        
    <script>
        function orderByChanged() {
            $('form').submit();
        }
    </script>
}

Controller:

Be sure set ViewBag.CategoryId and ViewBag.SearchName when you first render your view.

public IActionResult Products(int? page, int? categoryId, string searchName = "", string sortOrder = "")
{
    int pageSize = 1;
    int pageNumber = (page ?? 1);

    ViewBag.SearchName = searchName;
    ViewBag.CategoryId = categoryId;
    ViewBag.SortOrder = sortOrder;
    //....
}
public async Task<IActionResult> Index()
{
    ViewBag.CategoryId = 1;
    ViewBag.SearchName = "aaa";
    return View();       
}

Result: enter image description here

like image 151
Rena Avatar answered Nov 09 '25 10:11

Rena