How to refresh data without page reloading in Asp.net core MVC using Ajax?

Question

I have data filtering using a checkbox. I want that when I click on the "Submit" button, only the products are updated without reloading the page

Here's the filtering:


    Color:
    Black
    White
    

    
    Manufacturer:
    A
    B
    
    //Etc

I need this data to be displayed first. And in the case of passing filters, they were updated depending on what I passed to the controller

 
            @foreach (var c in Model)
            {
                
                    
                        
                            
                                
                            
                        
                        
                            @c.Name
                            @c.PurposeFor
                            @c.Price ₴
                        
                    
                
            }

Just in case my controller:

public IActionResult Face(string[] color, string[] brand, string[] PurposeFor, string sortOrder)
    {

        ViewBag.color = color;
        ViewBag.PurposeFor = PurposeFor;
        ViewBag.brand = brand;
        ViewBag.NameSortParm = string.IsNullOrEmpty(sortOrder) ? "Name_desc" : "";
        ViewBag.PriceSortParm = sortOrder == "Price" ? "Price_desc" : "Price";

        var cosmetics = db.Cosmetics.Where(c => c.PurposeFor.Contains("Face")).ToList();
        var co_cars = new List();
        var ma_cars = new List();
        var purposeFor = new List();


        if (color.Length != 0)
        {
            foreach (string co in color)
            {
                var colorfiltercars = db.Cosmetics.Where(c => c.Color.Contains(co)).ToList();
                co_cars.AddRange(colorfiltercars);
            }
        }
        else
        {
            co_cars = cosmetics;
        }

        if (PurposeFor.Length != 0)
        {
            foreach (string pf in PurposeFor)
            {
                var purposefiltercars = db.Cosmetics.Where(c => c.PurposeFor.Contains(pf)).ToList();
                purposeFor.AddRange(purposefiltercars);
            }
        }
        else
        {
            purposeFor = cosmetics;
        }

        if (brand.Length != 0)
        {
            foreach (string ma in brand)
            {
                var manufacturerfiltercars = db.Cosmetics.Where(c => c.Brand.Contains(ma)).ToList();
                ma_cars.AddRange(manufacturerfiltercars);
            }
        }
        else
        {
            ma_cars = cosmetics;
        }

        var filtercars = co_cars.Intersect(ma_cars);
        filtercars = filtercars.Intersect(purposeFor);

        switch (sortOrder)
        {
            case "Name_desc":
                filtercars = filtercars.OrderByDescending(s => s.Name);
                break;
            case "Price":
                filtercars = filtercars.OrderBy(s => s.Price);
                break;
            case "Price_desc":
                filtercars = filtercars.OrderByDescending(s => s.Price);
                break;
            default:
                filtercars = filtercars.OrderBy(s => s.Name);
                break;
        }
        return View(filtercars.ToList());
    }

user_6751634 · Answer

I want that when I click on the "Submit" button, only the products are updated without reloading the page

You can refer to the following code snippet to perform AJAX submission using jQuery Unobtrusive AJAX and dynamically update the target container with returned partial view result.


    Color:
    Black
    White
    

    
    Manufacturer:
    A
    B

Add reference to jquery-ajax-unobtrusive

@section scripts{
    
}

Specify id attribute panel to div container

Action method that returns a partial view

public IActionResult GetPartial(string[] color, string[] brand, string[] PurposeFor, string sortOrder)
{
    //move your query code logic in custom method GetFilterData
    var filtercars = GetFilterData(color, brand, PurposeFor, sortOrder);

    return PartialView("_CarListPartial", filtercars);
}

Partial view _CarListPartial.cshtml

@model IEnumerable

@foreach (var c in Model)
{
    
        
            
                
                    
                
            
            
                @c.Name
                @c.PurposeFor
                @c.Price ₴
            
        
    
}

Test Result

user_14718192 · Answer

I suggest you the following step if you want to avoid page reload :

1- JQuery and Ajax Post to send data to controller

2- Function in your controller to manage the data and send a response with the data you need

3- In the success part of your Ajax .clear or .append the HTML part concerned like a div or select option

here is a little example to guide you, but you have to adapt it corresponding to your need:

In CSHTML: don't forget to add an Id to your checkbox :

in your controller:

public JsonResult AjaxMethodeCheckMe(int id)
{
    List ListOfPort = new List();

    ListOfPort.Add(new SelectListItem() { Text = "Text 1", Value = "Value1" });
    ListOfPort.Add(new SelectListItem() { Text = "Text 2", Value = "Value2" });
    ListOfPort.Add(new SelectListItem() { Text = "Text 3", Value = "Value3" });

    return Json(new SelectList(ListOfPort, "Value", "Text"));
}

Here i show how to do with dropdown but you can modify ...

How to refresh data without page reloading in Asp.net core MVC using Ajax?

2 Answers