Search code examples
formsasp.net-coreasp.net-core-tag-helpers

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>

Solution

  • 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