I have a Products.cshtml page that has a partial ProductsFilter.cshtml . Currently, I am just doing a regular POST back to the same page Products.cshtml. I would like to do an AJAX post to the same page, but not sure how to start. I tried replacing @Html.BeginUmbracoForm with @Ajax.BeginForm, but my UmbracoContext was null. This is my current partial view:

@model ProductFilterModel
@using (@Html.BeginUmbracoForm("SearchResults", "ProductFilter", null, new { @class = "vehicle-filter-group" }))
{
    <div class="select">
        @Html.DropDownListFor(x => x.Year, new List<SelectListItem>
    {
        new SelectListItem{Text = "YEAR", Value = ""},
        new SelectListItem{ Text = "1990", Value = "1990"},
        new SelectListItem{ Text = "1991", Value = "1991"},
        new SelectListItem{ Text = "1992", Value = "1992"},
        new SelectListItem{ Text = "1993", Value = "1993"},
    }, new { @class = "year" })
    </div>

    <div class="select">
        @Html.DropDownListFor(x => x.Make, new List<SelectListItem>
        {
            new SelectListItem{Text = "MAKE", Value = ""},
            new SelectListItem{ Text = "Volvo", Value = "Volvo"},
            new SelectListItem{ Text = "Saab", Value = "Saab"},
            new SelectListItem{ Text = "Opel", Value = "Opel"},
            new SelectListItem{ Text = "Audi", Value = "Audi"},
        }, new { @class = "make" })
    </div>

    <div class="select">
        @Html.DropDownListFor(x => x.Model, new List<SelectListItem>
        {
            new SelectListItem{Text = "MODEL", Value = ""},
            new SelectListItem{ Text = "Volvo", Value = "Volvo"},
            new SelectListItem{ Text = "Saab", Value = "Saab"},
            new SelectListItem{ Text = "Opel", Value = "Opel"},
            new SelectListItem{ Text = "Audi", Value = "Audi"},
        }, new { @class = "model" })
    </div>


    <div class="select">
        @Html.DropDownListFor(x => x.Engine, new List<SelectListItem>
        {
            new SelectListItem{Text = "ENGINE", Value = ""},
            new SelectListItem{ Text = "Volvo", Value = "Volvo"},
            new SelectListItem{ Text = "Saab", Value = "Saab"},
            new SelectListItem{ Text = "Opel", Value = "Opel"},
            new SelectListItem{ Text = "Audi", Value = "Audi"},
        }, new { @class = "model" })
    </div>

    <button type="submit" class="search-button">SEARCH</button>
}

This is my Model:

public class ProductSearchResultsModel: RenderModel
    {
        public ProductSearchResultsModel()
            : this(new UmbracoHelper(UmbracoContext.Current).TypedContent((UmbracoContext.Current.PageId)))
        {

        }
        public ProductSearchResultsModel(IPublishedContent content, CultureInfo culture)
            : base(content, culture)
        {
        }

        public ProductSearchResultsModel(IPublishedContent content)
            : base(content)
        {
        }
        public ProductFilterModel ProductFilterModel { get; set; }
        public IEnumerable<ProductViewModel> Products { get; set; } 
    }

This is the controller method:

[HttpPost]
        public ActionResult SearchResults(ProductFilterModel productFilterModel)
        {
            var db = new Database("productsDb");

            var productSearchResultsModel = new ProductSearchResultsModel
            {
                ProductFilterModel = productFilterModel,
                Products = db.Fetch<ProductViewModel>(@"SELECT Type, Name, PartNumber, ShortDescription ,pul.UmbracoPageId
                                                        FROM Products p
                                                        INNER JOIN ProductUmbracoLink pul on pul.ProductId = p.ProductID
                                                        WHERE Brand = 'SCT'")
            };


            ViewBag.ProductFilterModel = productFilterModel;

            //return View(productFilterModel);
            return View(productSearchResultsModel);
        }