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

user_9536540 0
Viewed 15848

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>
asp.net-core-tag-helpers asp.net-core forms
2 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

user_113988100

Provide the action url in data-ajax-url:

<form method="get"
    data-ajax="true"
    data-ajax-method="get"
    data-ajax-update="product"
    data-ajax-mode="replace"
    data-ajax-url="@Url.Action("Products", "User")">
        <input type="hidden" name="categoryId" value="ViewBag.CategoryId" />
        <input type="hidden" name="searchName" value="ViewBag.SearchName" />
        <select name="sortOrder" class="form-control" onchange="orderByChanged()">
            <option selected> Please select one</option>
            <option value="date_desc">date_desc</option>
        <select>
</form>
user_55190260
Related