Filtering in PartialView

Question

I have a PartialView, that displays items in table. And I want to filter them with some criteria. My view:

@model Bike_Store.Models.PartsViewModel

<form method="get">
    <div>
        <label>Category: </label>
        @Html.DropDownList("categorie", Model.Categories as SelectList,
        htmlAttributes: new { @class="form-control"})

        <label>Brand: </label>
        @Html.DropDownList("brand", Model.Brands as SelectList,
        htmlAttributes: new { @class="form-control" })
        <input type="submit" value="Filter" />           
    </div>
</form>

 <table>...</table>

My controller:

[HttpGet]
    public ActionResult PartsPartial(int? categorie, int? brand)
    {
        IQueryable<bs_parts> parts = _db.bs_parts.Include(p => p.bs_categories);
        if (categorie != null && categorie != 0)
        {
            parts = parts.Where(p => p.parts_category_id == categorie);
        }
        if (brand != null && brand != 0)
        {
            parts = parts.Where(p => p.parts_brand_id == brand);
        }

        List<bs_categories> categoriesList = _db.bs_categories.ToList();
        List<bs_brands> brandsList = _db.bs_brands.ToList();

        PartsViewModel pvm = new PartsViewModel
        {
            Parts = parts.ToList(),
            Categories = new SelectList(categoriesList, "categories_id", "categories_name"),
            Brands = new SelectList(brandsList, "brands_id", "brands_name")
        };
        return PartialView(pvm);
    }

This way of filtering works fine with normal View. But when I try to do the same with Partial View it doesn't work, the page just reloads. I put break point to check, if my Get method works when I press Filter button, and I noticed that it doesn't. What is the problem?

I am calling Partial View from menu with:

@Ajax.ActionLink(
"Parts",
"PartsPartial",
new
{
    value1 = 1
},
new AjaxOptions
{
    HttpMethod = "GET",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "content"
}, new { @class = "button" }
)
<div class="content" id="content">

</div>

@Html.Partial() or @Html.RenderPartial does not make any controller call and barely render html view with the model of yours. Consider using Html.RenderAction instead — Igor Popov, Jun 04 '17 at 14:37

Igor Popov · Answer 1 · 2017-06-04T14:57:43.680

2

@Html.Partial() or @Html.RenderPartial do not make any controller call and just render html with the model of yours.

Consider using Html.RenderAction instead

UPDATE: It looks like there is a number of answers to similar questions already:

Html.Partial vs Html.RenderPartial & Html.Action vs Html.RenderAction

Html.Partial vs Html.RenderPartial & Html.Action vs Html.RenderAction. can any one please describe the difference

Controller for partial view in layout page MVC

edited Jun 04 '17 at 14:57

answered Jun 04 '17 at 14:38

Igor Popov

2,084
16
18

I have a side menu, where I call `Partial View` with `@Ajax.ActionLink`. How to solve my problem with it? You can see edit in my post – C. America Jun 04 '17 at 16:04
1

Are you sure your routing parameter is value1=1 and not categorie = 1? – Igor Popov Jun 04 '17 at 16:24
now I see it. Is there a way to put this rout parameter equal to `id` of selected ddl's item? So, when I choose `categorie` and press `Filter` button, it will display me filtered `Partial View`? – C. America Jun 04 '17 at 16:42
Do you mean something like { id: $('#categorie').val() }? – Igor Popov Jun 04 '17 at 17:47
Not sure. I mean I am calling `@Ajax.ActionLink` from main View, and filtering in `Partial View`. So `categories` locates in main view, and I need somehow made it equal to `id` of selected item in ddl, that locates in `Partial View`. Hope I have clearly described the problem. – C. America Jun 04 '17 at 17:58
1

You might want to check https://stackoverflow.com/questions/20425558/get-dropdownlistfor-selected-value-into-ajax-actionlink-call or https://stackoverflow.com/questions/12135843/how-to-pass-selected-dropdownlist-value-to-ajax-actionlink-in-mvc-4 – Igor Popov Jun 04 '17 at 18:03

Filtering in PartialView

1 Answers1