Can I reload an asp 5/MVC 6 View Component via ajax?

Question

I am playing around with MVC 6 and have a grid of Users that are currently registered to my site. Above the gird, I have built a View Component for the search/filter functionality. It is invoked via

@Component.Invoke("UserSearchBar")

One of the requirements is to be able to save and reapply the values of the dropdowns so that an end user can quickly access his/her frequently used searches. I have added a dropdown in the View Component of all the saved searches.

Once a user saves a search, I would like to reload the UserSearchBar View Component to update the dropdown list.

My questions are:

1. How do I reload a view component via ajax after a button is pressed?
2. In this scenario, should I use a Partial instead of a view component, because of limitations in view components and reloading?

I could use a Partial inside the View Component for the drop down. Or add an element to the dropdown programmatically but I would still have the same question of reloading the View Component when I click a button to apply one of the saved searches.

---

Solution

After thinking through the problem while writing it out, I have come up with a better (more correct?) way that would not involve reloading the View Component. On save, make an ajax call to the save search method and add an element to the dropdown. And on saved search apply, make a call to a method that would return the saved search and apply it.

However, I would still like to know if it is possible (and how) to reload a View Component in MVC 6.

Lamppost

Answer 1

All you need to do is set up a route in a controller that returns the view component. For example:

public class MyController : Controller {
    public IActionResult GetMyViewComponent() {
        return ViewComponent("MyViewComponent", <arguments...>);
    }
}

You can then make a GET request to this controller via AJAX, and replace the old view component with the result of the request.

As for whether you should use a partial or view component, it is up to you, but I would recommend sticking with a view component because it allows you to keep the relevant logic for the search bar within the component itself.

Dovev

This is exactly what i was looking for. Simple and it works. Thanks. – Lamppost

Could you please give an example, how can I use it in view? – Munmro

Ryan Helmoski great help. thank you. I'm not sure how I'm supposed to use it in my view. can you share the Ajax portion ? – Meacham

@Meacham You will need to make an AJAX GET request to the URL of your controller for the view component. The result will be the new view component's html, which you can then use to replace the old view component. You could use JQuery's .replaceWith() function to do this, or use vanilla javascript, but I'll leave that for you to play around with. If you find you still can't get it, I'd recommend asking a new stackoverflow question. – Dovev

If you need a tutorial on AJAX, check out this one by W3Schools: w3schools.com/xml/ajax_intro.asp – Dovev

If you are using JQuery, you can also take advantage of its convenient ajax method. Check this tutorial: w3schools.com/jquery/ajax_ajax.asp – Dovev

I think I have the same problem as described here but I can't get it to work, the returned view component output simply replaces the whole view rather than the ocmponent. #45111366 – Paleoclimatology

"because it allows you to keep the relevant logic for the search bar within the component itself" .. except, of course, what you have to put into a Controller somewhere, including if your ViewComponent has any interactive AJAX behavior you'd wish to consolidate. That's one of the few shortcomings of them. – Parlour